CircularImageView
This is an Android project allowing to realize a circular ImageView in the simplest way possible.
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 |
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.
And here is the xml code:
164 Dec 7, 2022
1.2k Dec 28, 2022
531 Dec 25, 2022
18.4k Dec 30, 2022
2.4k Mar 28, 2021
2.6k Mar 29, 2021
1.9k Jan 4, 2023
1.3k Dec 24, 2022
1.1k Nov 10, 2022
1.1k Mar 9, 2021
1.1k Mar 17, 2021
944 Nov 10, 2022
153 Nov 14, 2022
163 Dec 31, 2022
3.2k Dec 15, 2022
2.3k Dec 30, 2022
657 Jan 5, 2023