Android Range Bar (Seek bar) with two thumbs

This blog will help you to create a Android Seekbar with two thumbs. User can select values between two range i.e. between minimum and maximum. This sample project uses third party library present in github: RangeBar Github

Step1: Create Android project:

In your MainActivity file enter below lines of code:

 @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // Setup the new range seek bar
        RangeSeekBar<Integer> rangeSeekBar = new RangeSeekBar<Integer>(this);
        // Set the range
        rangeSeekBar.setRangeValues(0, 100);
        rangeSeekBar.setSelectedMinValue(20);
        rangeSeekBar.setSelectedMaxValue(88);

        // Add to layout
        LinearLayout layout = (LinearLayout) findViewById(R.id.seekbar_placeholder);
        layout.addView(rangeSeekBar);
    }

Step2: Add Files:




Download and add these below files in your project and then ctrl+shift+o in your eclipse in MainActivty file to import missing files:

File 1: PixelUtil.java
File 2: RangeSeekBar.java

Step3: Resource File:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:rsb="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="5dp" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Range seek bar initialized in code with ranges set" />

    <LinearLayout
        android:id="@+id/seekbar_placeholder"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Range seek bar from xml with default range" />

    <com.yahoo.mobile.client.android.util.RangeSeekBar
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Range seek bar from xml with ranges set" />

    <com.yahoo.mobile.client.android.util.RangeSeekBar
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        rsb:absoluteMaxValue="150"
        rsb:absoluteMinValue="20" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Range seek bar from xml with ranges set and double values" />

    <com.yahoo.mobile.client.android.util.RangeSeekBar
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        rsb:absoluteMaxValue="140.54"
        rsb:absoluteMinValue="15.23" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Range seek bar from xml with single thumb to true" />

    <com.yahoo.mobile.client.android.util.RangeSeekBar
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        rsb:absoluteMaxValue="150"
        rsb:absoluteMinValue="20"
        rsb:singleThumb="true" />

</LinearLayout>

Step4: Clean and Run:
Now clean your project and run it on device or emulator. That's It, Its done.

Output: