This is an Android project allowing to realize a circular View in the simplest way possible. Finish the oval shapes of all colors in your projects.
To make a circular View add CircleView in your layout XML and add CircleView library in your project or you can also grab it via Gradle:
implementation 'com.mikhaellopez:circleview:1.3.2'<com.mikhaellopez.circleview.CircleView
android:id="@+id/circleView"
android:layout_width="300dp"
android:layout_height="300dp"
app:cv_border="true"
app:cv_border_color="#000000"
app:cv_border_width="8dp"
app:cv_color="#3f51b5"
app:cv_shadow="true"
app:cv_shadow_color="#3f51b5"
app:cv_shadow_radius="10" />You must use the following properties in your XML to change your CircleView.
| Properties | Type | Default |
|---|---|---|
app:cv_color |
color | WHITE |
app:cv_color_start |
color | cv_color |
app:cv_color_end |
color | cv_color |
app:cv_color_direction |
left_to_right, right_to_left, top_to_bottom or bottom_to_top | left_to_right |
app:cv_border |
boolean | false |
app:cv_border_width |
dimension | 4dp |
app:cv_border_color |
color | BLACK |
app:cv_border_color_start |
color | cv_border_color |
app:cv_border_color_end |
color | cv_border_color |
app:cv_border_color_direction |
left_to_right, right_to_left, top_to_bottom or bottom_to_top | left_to_right |
app:cv_shadow |
boolean | false |
app:cv_shadow_color |
color | BLACK |
app:cv_shadow_radius |
float | 8.0f |
app:cv_shadow_gravity |
center, top, bottom, start or end | bottom |
ℹ️ You can also use android:elevation instead of app:cv_shadow to have default Material Design elevation.
val circleView = findViewById<CircleView>(R.id.circleView)
circleView.apply {
// Set Color
circleColor = Color.WHITE
// or with gradient
circleColorStart = Color.BLACK
circleColorEnd = Color.RED
circleColorDirection = CircleView.GradientDirection.TOP_TO_BOTTOM
// Set Border
borderWidth = 10f
borderColor = Color.BLACK
// or with gradient
borderColorStart = Color.BLACK
borderColorEnd = Color.RED
borderColorDirection = CircleView.GradientDirection.TOP_TO_BOTTOM
// Add Shadow with default param
shadowEnable = true
// or with custom param
shadowRadius = 15f
shadowColor = Color.RED
shadowGravity = CircleView.ShadowGravity.CENTER
}CircleView circleView = findViewById(R.id.circleView);
// Set Color
circleView.setCircleColor(Color.WHITE);
// or with gradient
circleView.setCircleColorStart(Color.BLACK);
circleView.setCircleColorEnd(Color.RED);
circleView.setCircleColorDirection(CircleView.GradientDirection.TOP_TO_BOTTOM);
// Set Border
circleView.setBorderWidth(10f);
circleView.setBorderColor(Color.BLACK);
// or with gradient
circleView.setBorderColorStart(Color.BLACK);
circleView.setBorderColorEnd(Color.RED);
circleView.setBorderColorDirection(CircleView.GradientDirection.TOP_TO_BOTTOM);
// Add Shadow with default param
circleView.setShadowEnable(true);
// or with custom param
circleView.setShadowRadius(15f);
circleView.setShadowColor(Color.RED);
circleView.setShadowGravity(CircleView.ShadowGravity.CENTER);Find this library useful? Support it by joining stargazers for this repository ⭐️
And follow me for my next creations 👍
CircleView by Lopez Mikhael is licensed under a Apache License 2.0.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent