Circular Counter

Circular Counter is an Android Widget I needed to implement for an application I was developing. As it could be useful to more people, I tried to make it generic enough to share and be used by others.

The view shows a value in the center together with 3 bars that grow depending on the values received. Digging into the code you can easily increase or decrease the number of bars.

Screenshot

Usage

Add CircularCounter widget to your layout. Configure the view customization elements using styleable attributes or/and programatically. This is a basic example, explore the code to get to know it in detail.

 <com.db.circularcounter.CircularCounter

xmlns:counter="http://schemas.android.com/apk/res-auto"

android:id="@+id/counter"

android:layout_width="300dp"

android:layout_height="300dp"

counter:range="60"

counter:textSize="100sp"

counter:textColor="#ffffff"

counter:metricSize="20sp"

counter:metricText="metric"
  /> 

 //First Bar
  counter.setFirstWidth(getResources().getDimension(R.dimen.first))
  counter.setFirstColor(Color.parseColor(colors[0]))

//Second Bar
  counter.setSecondWidth(getResources().getDimension(R.dimen.second))
  counter.setSecondColor(Color.parseColor(colors[1]))

//Third Bar
  counter.setThirdWidth(getResources().getDimension(R.dimen.third))
  counter.setThirdColor(Color.parseColor(colors[2]))

counter.setBackgroundColor(Color.parseColor(colors[3]));
 

To pass values to the view use setValues(value1, value2, value3). First value will be the one shown in text.