Decorating SeekBar in Android

Decorating SeekBar in Android Android 05.02.2018

A SeekBar is an extension of ProgressBar that adds a draggable thumb. Basically SeekBar has a thumb that you can slide to choose a value between 0 and some maximum that you set. A typical usage of Seekbar is your device brightness control and volume control.

Now let’s we discuss important attributes that helps us to configure a SeekBar in xml file (layout).

android:max property is basically used to set a maximum integer value for selection using SeekBar.
android:progress property is basically used to set a integer value for SeekBar progress.
android:background is used to set the background.
thumb is used in seekbar to draw a thumb on a seekbar.

Clients of the SeekBar can attach a SeekBar.OnSeekBarChangeListener to be notified of the user's actions.

Basically SeekBar.OnSeekBarChangeListener is a public static interface that is used to listen the SeekBar events. The SeekBar.OnSeekBarChangeListener interface allows us to override the below methods.

onProgressChanged() – Used to notify that the progress level has changed.
onStartTrackingTouch() – Used to notify that the user has started a touch gesture.
onStopTrackingTouch() – Used to notify that the user has finished a touch gesture.

public class MainActivity extends AppCompatActivity {
    private TextView tv;
    private SeekBar seekBar;

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

        seekBar = findViewById(R.id.seekBar);
        tv = findViewById(R.id.textView);

        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {}

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {}

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                tv.setText(String.valueOf(seekBar.getProgress()));
            }
        });
    }
}

Below is a layout for MainActivity

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:textSize="24sp"
        android:text="0"
        tools:text="90"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="368dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:max="100"
        android:progress="3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"/>
</android.support.constraint.ConstraintLayout>

Result

Decorating progressDrawable and thumb properties

<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="368dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:max="100"
    android:progress="3"
    android:splitTrack="false"
    android:progressDrawable="@drawable/seekbar_drawable_progress"
    android:thumb="@drawable/seekbar_drawable_thumb"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView"
    />

Below is content of drawable/seekbar_drawable_progress.xml file

<?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:shape="rectangle">
            <stroke android:color="#dadbdc" android:width="2dp" />
            <solid android:color="#b7b7b7"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip android:clipOrientation="horizontal" android:gravity="left">
            <shape android:shape="rectangle">
                <stroke android:color="#C24C47" android:width="2dp" />
                <solid android:color="#D83731"/>
                <corners android:radius="10dp"/>
            </shape>
        </clip>
    </item>
</layer-list>

Below is content of drawable/seekbar_drawable_thumb.xml file

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#585eff"/>
            <stroke android:color="#99c8f7" android:width="3dp"/>
            <size android:height="30dp" android:width="30dp"/>
        </shape>
    </item>
</selector>

Result

Useful links

Decorating SeekBar in Android Android 05.02.2018

Quote

Categories

Archive ↓