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.