Giter VIP home page Giter VIP logo

rings's Introduction

Android Arsenal

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.

Rings Demo

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" />

Result

Rings Example

rings's People

Contributors

lalongooo avatar

Watchers

James Cloos avatar Trending Technology avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.