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.
