Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

CircularImageView

sample

Platform API Download
Twitter Codacy Badge

This is an Android project allowing to realize a circular ImageView in the simplest way possible.

Android app on Google Play

USAGE

To make a circular ImageView add CircularImageView in your layout XML and add CircularImageView library in your project or you can also grab it via Gradle:

implementation 'com.mikhaellopez:circularimageview:4.2.0'

XML

<com.mikhaellopez.circularimageview.CircularImageView
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:src="@drawable/image"
    app:civ_border_color="#3f51b5"
    app:civ_border_width="4dp"
    app:civ_shadow="true"
    app:civ_shadow_radius="10"
    app:civ_shadow_color="#3f51b5"/>

You must use the following properties in your XML to change your CircularImageView.

Properties Type Default
app:civ_circle_color color WHITE
app:civ_circle_color_start color civ_circle_color
app:civ_circle_color_end color civ_circle_color
app:civ_color_direction left_to_right, right_to_left, top_to_bottom or bottom_to_top left_to_right
app:civ_border boolean true
app:civ_border_width dimension 4dp
app:civ_border_color color WHITE
app:civ_border_color_start color civ_border_color
app:civ_border_color_end color civ_border_color
app:civ_border_color_direction left_to_right, right_to_left, top_to_bottom or bottom_to_top left_to_right
app:civ_shadow boolean false
app:civ_shadow_color color BLACK
app:civ_shadow_radius dimension 8dp
app:civ_shadow_gravity center, top, bottom, start or end bottom

ℹ️ You can also use android:elevation instead of app:civ_shadow to have default Material Design elevation.

KOTLIN

val circularImageView = findViewById<CircularImageView>(R.id.circularImageView)
circularImageView.apply {
    // Set Color
    circleColor = Color.WHITE
    // or with gradient
    circleColorStart = Color.BLACK
    circleColorEnd = Color.RED
    circleColorDirection = CircularImageView.GradientDirection.TOP_TO_BOTTOM

    // Set Border
    borderWidth = 10f
    borderColor = Color.BLACK
    // or with gradient
    borderColorStart = Color.BLACK
    borderColorEnd = Color.RED
    borderColorDirection = CircularImageView.GradientDirection.TOP_TO_BOTTOM
    
    // Add Shadow with default param
    shadowEnable = true
    // or with custom param
    shadowRadius = 7f
    shadowColor = Color.RED
    shadowGravity = CircularImageView.ShadowGravity.CENTER
}

JAVA

CircularImageView circularImageView = findViewById(R.id.circularImageView);
// Set Color
circularImageView.setCircleColor(Color.WHITE);
// or with gradient
circularImageView.setCircleColorStart(Color.BLACK);
circularImageView.setCircleColorEnd(Color.RED);
circularImageView.setCircleColorDirection(CircularImageView.GradientDirection.TOP_TO_BOTTOM);

// Set Border
circularImageView.setBorderWidth(10f);
circularImageView.setBorderColor(Color.BLACK);
// or with gradient
circularImageView.setBorderColorStart(Color.BLACK);
circularImageView.setBorderColorEnd(Color.RED);
circularImageView.setBorderColorDirection(CircularImageView.GradientDirection.TOP_TO_BOTTOM);

// Add Shadow with default param
circularImageView.setShadowEnable(true);
// or with custom param
circularImageView.setShadowRadius(7f);
circularImageView.setShadowColor(Color.RED);
circularImageView.setShadowGravity(CircularImageView.ShadowGravity.CENTER);

LIMITATIONS

  • By default the ScaleType is FIT_CENTER. You can also used CENTER_INSIDE AND CENTER_CROP.
  • Enabling adjustViewBounds is not supported as this requires an unsupported ScaleType.

SUPPORT ❤️

Find this library useful? Support it by joining stargazers for this repository ⭐️
And follow me for my next creations 👍

LICENCE

CircularImageView by Lopez Mikhael is licensed under a Apache License 2.0.

You can’t perform that action at this time.