This is an Android project allowing to realize a circular ImageView in the simplest way possible.
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.3.1'<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="10dp"
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.
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
}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);- 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.
Find this library useful? Support it by joining stargazers for this repository โญ๏ธ
And follow me for my next creations ๐
CircularImageView by Lopez Mikhael is licensed under a Apache License 2.0.