Android Rings
A simple chart for Android with three indicators and one more to indicate overall summary. They get highlighted if you click on the ring or text.
Setup
1. Provide the gradle dependency
Add the gradle dependency to your app
module build.gradle
file:
dependencies {
compile 'com.lalongooo:rings:1.0.0'
}
2. Add the Rings
custom view to your layout xml file
Make sure layout_width
and layout_height
are equal so rings can be a perfect circle inside a square, otherwise it'd look like an ellipse inside a rectangle.
<com.lalongooo.Rings
android:id="@+id/rings"
android:layout_width="200dp"
android:layout_height="200dp" />
3. Add the custom attributes as needed
Text size. Default is 18sp
.
app:rings_text_size
Margin left of the text. Default is 10dp
.
app:rings_text_margin_left
The three inner rings stroke width. Default is 8dp
.
app:rings_inner_stroke_width
The three inner rings stroke width when unfinished or incomplete, if value is the same as app:rings_inner_stroke_width
, it will be invisible. Default is 10dp
.
app:rings_inner_stroke_width_unfinished
The outer ring stroke width. Default is 12dp
.
app:rings_outer_stroke_width
The outer ring stroke width when unfinished or incomplete, if value is the same as app:rings_outer_stroke_width_unfinished
, it will be inviisble. Default is 12dp
.
app:rings_outer_stroke_width_unfinished
Default unfinished/incomplete background color for all rings.
app:rings_unfinished_color
Default finished/progress color for all the inner rings. It is overriden by app:rings_inner_first_color
, app:rings_inner_second_color
, app:rings_inner_third_color
when specified.
app:rings_default_filled_color
Finished/progress color of the first inner ring.
app:rings_inner_first_color
Finished/progress color of the second inner ring.
app:rings_inner_second_color
Finished/progress color of the third inner ring.
app:rings_inner_third_color
Finished/progress color of the outer ring.
app:rings_overall_color
Progress of the first inner ring. Between 0 and 100. Default is 0.
app:rings_inner_first_progress
Progress of the second inner ring. Between 0 and 100. Default is 0.
app:rings_inner_second_progress
Progress of the third inner ring. Between 0 and 100. Default is 0.
app:rings_inner_third_progress
Progress of the outer ring. Between 0 and 100. Default is 0.
app:rings_overall_progress
Text of the first inner ring.
app:rings_inner_first_text
Text of the second inner ring.
app:rings_inner_second_text
Text of the third inner ring.
app:rings_inner_third_text
Text of the outer ring.
app:rings_overall_text
Example
<com.lalongooo.Rings
android:id="@+id/rings"
android:layout_width="200dp"
android:layout_height="200dp"
app:rings_inner_first_color="#FF9F1C"
app:rings_inner_first_progress="30"
app:rings_inner_first_text="Java"
app:rings_inner_second_color="#4BC6B9"
app:rings_inner_second_progress="75"
app:rings_inner_second_text="Kotlin"
app:rings_inner_third_color="#757780"
app:rings_inner_third_progress="85"
app:rings_inner_third_text="Android"
app:rings_overall_color="#EA3546"
app:rings_overall_progress="100"
app:rings_overall_text="Overall"
app:rings_text_size="20sp"
app:rings_unfinished_color="#f2f2f2" />