Custom SeekBar (Discrete SeekBar) in android

SeekBar is very good user Interface to present to set any value between from minimum to maximum range. But the things is that how can we satisfy to users to give or show them with best user interface experience because this time is only Material time. So in this article, I am talking about to custom seek bar implementation.

If we talk about Material Design seek bar, I found one library that suitable to provides Discrete Seek bar. This library is providing the amazing  user interface for custom seek bar.
Here is the DiscreteSeekBar link. Please give full credit to him that made our life easy.

In this article, I am focusing four different ways that we can use this discrete seek bar in our projects. For example below here

1. Normal Seek bar
2. Multiple of 100 (ex 100, 200, 300..etc) to select from 0 to 10000.
3. Multiple of 100 from range 500 to 10000 in between.

4. Interval kind of multiple of 100 from 500 to 1000 (exp 500, 600..etc)and then after multiple of 1000 from 1000 to 100000 (exp. 1000, 2000, 3000...etc)

Here is uploaded the video that shows this all four type implemented. Please check this video once.



Let's create an android project to implement this.


MainActivity.java

    
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

import org.adw.library.widgets.discreteseekbar.DiscreteSeekBar;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.title_normal)
    TextView titleNormal;
    @BindView(R.id.discrete_normal)
    DiscreteSeekBar discreteNormal;
    @BindView(R.id.title_multiple)
    TextView titleMultiple;
    @BindView(R.id.discrete_multiple)
    DiscreteSeekBar discreteMultiple;
    @BindView(R.id.title_range_multiple)
    TextView titleRangeMultiple;
    @BindView(R.id.discrete_multiple_range)
    DiscreteSeekBar discreteMultipleRange;
    @BindView(R.id.title_interval_range_multiple)
    TextView titleIntervalRangeMultiple;
    @BindView(R.id.discrete_interval_multiple_range)
    DiscreteSeekBar discreteIntervalMultipleRange;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        initSeekBar(); // normal seek bar bar 0 to 100
        initMultipleOfSeekBar();   // multiple of 100 form 0 to 10000
        initMultipleRangeOfSeekBar();  // multiple of 100 form 500 to 10000
        initIntervalMultipleRangeOfSeekBar();   // multiple of 100 form 500 to 1000 and after multiple of 1000 from 1000 to 10000

    }

    private void initIntervalMultipleRangeOfSeekBar() {
        discreteIntervalMultipleRange.setMin(0);
        discreteIntervalMultipleRange.setMax(14);
        discreteIntervalMultipleRange.setNumericTransformer(new DiscreteSeekBar.NumericTransformer() {
            @Override
            public int transform(int value) {
                if (value <= 5) {
                    return (value * 100) + 500;
                }else {
                    return (value - 4) * 1000;
                }
            }
        });

        discreteIntervalMultipleRange.setOnProgressChangeListener(new DiscreteSeekBar.OnProgressChangeListener() {
            @Override
            public void onProgressChanged(DiscreteSeekBar seekBar, int value, boolean fromUser) {
                if (fromUser) {
                    int updatedValue = 0;
                    if (value <= 5) {
                         updatedValue = (value * 100) + 500;
                    }else{
                         updatedValue = (value - 4) * 1000;
                    }
                    titleIntervalRangeMultiple.setText("Interval Multiple Range SeekBar- Value: " + updatedValue);
                }
            }

            @Override
            public void onStartTrackingTouch(DiscreteSeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(DiscreteSeekBar seekBar) {

            }
        });
    }

    private void initMultipleRangeOfSeekBar() {

        discreteMultipleRange.setMin(0);
        discreteMultipleRange.setMax(95);
        discreteMultipleRange.setNumericTransformer(new DiscreteSeekBar.NumericTransformer() {
            @Override
            public int transform(int value) {
                return (value * 100) + 500;
            }
        });

        discreteMultipleRange.setOnProgressChangeListener(new DiscreteSeekBar.OnProgressChangeListener() {
            @Override
            public void onProgressChanged(DiscreteSeekBar seekBar, int value, boolean fromUser) {
                if (fromUser) {
                    int updatedValue = (value * 100) + 500;
                    titleRangeMultiple.setText("Multiple Range SeekBar- Value: " + updatedValue);
                }
            }

            @Override
            public void onStartTrackingTouch(DiscreteSeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(DiscreteSeekBar seekBar) {

            }
        });
    }

    private void initMultipleOfSeekBar() {
        discreteMultiple.setMin(0);
        discreteMultiple.setMax(100);  //result should be in multiple of 100
        discreteMultiple.setNumericTransformer(new DiscreteSeekBar.NumericTransformer() {
            @Override
            public int transform(int value) {
                return value * 100;
            }
        });

        discreteMultiple.setOnProgressChangeListener(new DiscreteSeekBar.OnProgressChangeListener() {
            @Override
            public void onProgressChanged(DiscreteSeekBar seekBar, int value, boolean fromUser) {
                titleMultiple.setText("Multiple SeekBar- Value: " + value * 100);
            }

            @Override
            public void onStartTrackingTouch(DiscreteSeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(DiscreteSeekBar seekBar) {

            }
        });
    }

    private void initSeekBar() {
        discreteNormal.setOnProgressChangeListener(new DiscreteSeekBar.OnProgressChangeListener() {
            @Override
            public void onProgressChanged(DiscreteSeekBar seekBar, int value, boolean fromUser) {
                titleNormal.setText("Normal SeekBar- Value: " + value);
            }

            @Override
            public void onStartTrackingTouch(DiscreteSeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(DiscreteSeekBar seekBar) {

            }
        });
    }
}

activity_main.xml

 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.sunil.customseekbarandroid.MainActivity">

    <RelativeLayout
        android:id="@+id/relative_normal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

       <TextView
            android:text="Normal SeekBar"
            android:id="@+id/title_normal"
            android:gravity="center"
            android:textSize="15sp"
            android:layout_marginBottom="20dp"
            android:textColor="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <org.adw.library.widgets.discreteseekbar.DiscreteSeekBar
            android:layout_below="@+id/title_normal"
            android:id="@+id/discrete_normal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:dsb_min="0"
            app:dsb_max="100"
            app:dsb_value="0"
            />

        <RelativeLayout
            android:layout_below="@+id/discrete_normal"
            android:layout_marginBottom="20dp"
            android:layout_width="match_parent"
            android:padding="5dp"
            android:layout_height="wrap_content">

           <TextView
                android:text="Min:1"
                android:gravity="left"
                android:textSize="12sp"
                android:layout_marginLeft="10dp"
                android:textColor="@color/colorPrimary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

           <TextView
                android:text="Max:100"
                android:gravity="right"
                android:textSize="12sp"
                android:layout_marginRight="10dp"
                android:textColor="@color/colorPrimary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />


        </RelativeLayout>

    </RelativeLayout>

   <RelativeLayout
        android:id="@+id/multiple_seekbar"
        android:layout_below="@+id/relative_normal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:text="Multiple of SeekBar"
            android:id="@+id/title_multiple"
            android:gravity="center"
            android:textSize="15sp"
            android:layout_marginBottom="20dp"
            android:textColor="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

       <org.adw.library.widgets.discreteseekbar.DiscreteSeekBar
            android:layout_below="@+id/title_multiple"
            android:id="@+id/discrete_multiple"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:dsb_min="0"
            app:dsb_max="100"
            app:dsb_value="0"
            />

       <RelativeLayout
            android:layout_below="@+id/discrete_multiple"
            android:layout_marginBottom="20dp"
            android:layout_width="match_parent"
            android:padding="5dp"
            android:layout_height="wrap_content">

           <TextView
                android:text="Min:0"
                android:gravity="left"
                android:textSize="12sp"
                android:layout_marginLeft="10dp"
                android:textColor="@color/colorPrimary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

           <TextView
                android:text="Max:10000"
                android:gravity="right"
                android:textSize="12sp"
                android:layout_marginRight="10dp"
                android:textColor="@color/colorPrimary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />


        </RelativeLayout>

   </RelativeLayout>

    <RelativeLayout
        android:id="@+id/multiple_range_seekbar"
        android:layout_below="@+id/multiple_seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

      <TextView
            android:text="Multiple Range of SeekBar"
            android:id="@+id/title_range_multiple"
            android:gravity="center"
            android:textSize="15sp"
            android:layout_marginBottom="20dp"
            android:textColor="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <org.adw.library.widgets.discreteseekbar.DiscreteSeekBar
            android:layout_below="@+id/title_range_multiple"
            android:id="@+id/discrete_multiple_range"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:dsb_min="0"
            app:dsb_max="100"
            app:dsb_value="0"
            />

        <RelativeLayout
            android:layout_below="@+id/discrete_multiple_range"
            android:layout_marginBottom="20dp"
            android:layout_width="match_parent"
            android:padding="5dp"
            android:layout_height="wrap_content">

           <TextView
                android:text="Min:500"
                android:gravity="left"
                android:textSize="12sp"
                android:layout_marginLeft="10dp"
                android:textColor="@color/colorPrimary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <TextView
                android:text="Max:10000"
                android:gravity="right"
                android:textSize="12sp"
                android:layout_marginRight="10dp"
                android:textColor="@color/colorPrimary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />


        </RelativeLayout>

   </RelativeLayout>

    <RelativeLayout
        android:id="@+id/interval_multiple_range_seekbar"
        android:layout_below="@+id/multiple_range_seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:text="Interval Multiple Range of SeekBar"
            android:id="@+id/title_interval_range_multiple"
            android:gravity="center"
            android:textSize="15sp"
            android:layout_marginBottom="20dp"
            android:textColor="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <org.adw.library.widgets.discreteseekbar.DiscreteSeekBar
            android:layout_below="@+id/title_interval_range_multiple"
            android:id="@+id/discrete_interval_multiple_range"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:dsb_min="0"
            app:dsb_max="100"
            app:dsb_value="0"
            />

        <RelativeLayout
            android:layout_below="@+id/discrete_interval_multiple_range"
            android:layout_marginBottom="20dp"
            android:layout_width="match_parent"
            android:padding="5dp"
            android:layout_height="wrap_content">

           <TextView
                android:text="Min:500"
                android:gravity="left"
                android:textSize="12sp"
                android:layout_marginLeft="10dp"
                android:textColor="@color/colorPrimary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

           <TextView
                android:text="Max:10000"
                android:gravity="right"
                android:textSize="12sp"
                android:layout_marginRight="10dp"
                android:textColor="@color/colorPrimary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />


       </RelativeLayout>

    </RelativeLayout>

</RelativeLayout>

Thanks for reading this post.

Comments

  1. Thanks for your tutorial.
    I've a render problem: "Failed to find style 'discreteSeekBarStyle' in current theme"
    Do you know how to solve it? Thank you

    ReplyDelete

Post a Comment

Popular posts from this blog

NavigationView Drawer Expandable menu Item in ANdroid

Service LifeCycle