SeekBar in Android – Implementation and Overview

SeekBar in Android – Implementation and Overview

SeekBar in android is another useful View. It is an extension of ProgressBar, and derives the class to override the methods.We will see the attributes and properties needed to create a Seek Bar.

SeekBar – XML implementation

<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

Seek Bar takes the default attribute layout_width and layout_height for it. We will also see some of the additional attributes of seek Bar below

SeekBar – Important Attributes

Seek Bar takes following attributes:

  • android:progress: progress is an attribute of Seek Bar used to define the default progress value, between 0 and max. It must be an integer value.
  • android:progressDrawable: progress drawable attribute is used in Android to set the custom drawable xml for the progress mode of a seek Bar.
  • android:indeterminate: indeterminate is an attribute used in android to enable the indeterminate mode of a seek Bar. Animation is shown when trying to change the value. We will see the example below.
  • android:thumb: Draws a thumb representing Seek Bar to the user

SeekBar – Activity Implementation

If you have read about progressbar, it is clear that we can access the progress value by making use of a listener. We will be using the SeekBar.OnSeekBarChangeListener call back to attach the listener for our view.

The default methods associated with OnSeekBarChangeListener are onProgressChanged(Seekbar, int, Boolean),  onStartTrackingTouch(SeekBar), onStopTrackingTouch(SeekBar). This provides all the necessary methods to perform on the Seekbar. We will see how to manipulate the value of a seekbar below.

Example 1 – Using a determinate Seek Bar to calculate the progress

Make sure to use a relative layout and position the textview below the Seek Bar.

We will additionally use another TextView to show the Value.

Seek_bar.xml layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="horizontal">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:progress="50"
        android:max="1000"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/seekBarProgress"
            android:layout_below="@+id/seekBar"
            android:textSize="80sp"
            android:gravity="center"
            android:textColor="@color/colorAccent"/>

</RelativeLayout>
SeekBar.Activity

 

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

public class SeekBarActivity extends AppCompatActivity {
    SeekBar sb;
    TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.seek_bar);

        sb = (SeekBar) findViewById(R.id.seekBar);
        textView = (TextView) findViewById(R.id.seekBarProgress);
        sb.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            int pChange = 0;
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                //Perform action to store the progresschange
                pChange = progress;
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                textView.setText(String.valueOf(pChange));
            }
        });

    }
}

Once that is done, below is the resulting application:

""</pre

Result:

"Continuous

 

Setting a Vertical Seek Bar with Thumb attribute

Playing around with the View, you can make the Seek Bar vertical, by making it a child of the LinearLayout and making the orientation as vertical. Change the rotation of the Seek Bar to 270 to get a proper vertical alignment. Check below for the implementation.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:progress="50"
        android:max="1000"
        android:rotation="270"
        android:layout_centerInParent="true"
        android:thumb="@drawable/roundedrect"/>
</LinearLayout>

Result:

"Vertical
Vertical SeekBar

Seek Bar – Material Design ideas

Seek Bar is a pretty powerful view, but has to be used at right places to provide good UI exposure.Check this project here for better Material Design ideas,

Drop in any comments you have below.

“Learn and Be Curious”

 

Leave a Comment