SnappingSeekBar

I have developed my own implementation of a snapping seek bar. It automatically creates indicators depending on how it is configured. The seek bar is able to display short texts for each indicator. If an indicator gets tapped, the thumb animates smoothly to the tapped indicator. The thumb can also be slided and after releasing it snaps to the most nearest indicator. The seek bar is very customizable: you can change several colors, drawables or strings for the items you are using.

The usage is very simple. You can put it in your xml or add it programmatically:

From xml:

<com.tobishiba.SnappingSeekBarSample.views.SnappingSeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:progressDrawable="@drawable/seekbar_progress"
    app:thumb="@drawable/seekbar_thumb"
    app:progressColor="@color/blue"
    app:thumbnailColor="@color/blue_light"
    app:indicatorColor="@color/white"
    app:textIndicatorColor="@color/white"
    app:textSize="12dp"
    app:indicatorSize="12dp"
    app:itemsArrayId="@array/big_indicators_items"/>

From code:

private SnappingSeekBar createSnappingSeekBarProgrammatically() {
    final SnappingSeekBar snappingSeekBar = new SnappingSeekBar(this);
    snappingSeekBar.setProgressDrawable(R.drawable.seekbar_progress;
    snappingSeekBar.setThumbDrawable(R.drawable.seekbar_thumb);
    snappingSeekBar.setItems(new String[]{"Wow", "such", "amazing"});
    snappingSeekBar.setProgressColor(resources.getColor(R.color.green_darker));
    snappingSeekBar.setThumbnailColor(resources.getColor(R.color.yellow_light));
    snappingSeekBar.setTextIndicatorColor(resources.getColor(R.color.red_darker));
    snappingSeekBar.setIndicatorColor(resources.getColor(R.color.green_light));
    snappingSeekBar.setTextSize(14);
    snappingSeekBar.setIndicatorSize(14);
    snappingSeekBar.setOnItemSelectionListener(this);
    return snappingSeekBar;
}

Just check it out on github or at Google Play!

How to create an ProgressCircle instead of a ProgressBar

In the picture you see the result of this little tutorial. A ProgressCircle where the progress is visualized as a circle from 0% to 100%.

First of all you will need a new progress drawable.

<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape
            android:innerRadiusRatio="2.2"
            android:shape="ring"
            android:useLevel="false"
            android:thicknessRatio="90.0">
            <solid android:color="@color/white"/>
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <shape
            android:innerRadiusRatio="2.2"
            android:shape="ring"
            android:thicknessRatio="25.0">
            <solid android:color="@color/attribute_green"/>
        </shape>
    </item>
</layer-list>

Inside of the drawable xml you have the background and the progress of the ProgressBar.
After creating the ProgressDrawable you have to put it as progressDrawable to the ProgressBar Widget as shown below:

<ProgressBar

    android:id="@+id/manufacture_count_progress"
    style="?android:attr/progressBarStyleHorizontal" 
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:rotation="90"
    android:indeterminate="false"
    android:layout_centerInParent="true"
    android:max="100"
    android:progress="10"
    android:progressDrawable="@drawable/progressbar" />

Done! Now you will see a CircleProgressBar. You can use it the exact same way like with the normal drawable. Have Fun.

ähm...hello world :)

@Override
public void onCreate(final Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Toast.makeText(this, "Hello world!", Toast.LENGTH_LONG).show();
}