Android SeekBar Example

SeekBar is similar to ProgressBar. The difference is that SeekBar has a slider that can be used by users to adjust the progress value manually. This example will show you how to use and customize the android SeekBar.

1. Android SeekBar Properties And Methods.

1. In this example, please note the below SeekBar properties.
2. android:thumb: This object will be shown in the slider part. It’s value can be a drawable object. It can be an image, a layer-list, or a selector. In this example, we use a selector as it’s value.
3. android:progressDrawable: This is the same as the progress bar. It’s value is a layer-list that defines seek bar’s background, progress, and secondary progress color. Please note the item order in the layer-list XML item.
4. setOnSeekBarChangeListener(): This method is used to set a listener object which listens to the seek bar progress change event.
5. OnSeekBarChangeListener: This is the listener class, you can override it’s onProgressChanged,  onStartTrackingTouch, and onStopTrackingTouch methods to add seek bar progress related code.

2. Android SeekBar Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/J8m3ibzOvU0

1. In this example, when the user slides the slider, the image’s alpha value will be changed. And the seek bar progress and secondary progress info will be displayed in a text view.
2. There are 7 core files in this example.
3. : This is the thumb image when the slider is pressed.
4. : This is the thumb image when the slider is unpressed.
5. You can use any image as the bottom image in the above gif.
6. seek_bar_thumb_selector.xml: This selector defines how the slider behavior.
7. seek_bar_layer.xml: This layer-list defines the seek bar background, progress, and secondary progress color.
8. activity_seek_bar.xml: This is the layout XML file that configures the UI component layout.
9. SeekBarActivity.java: This is the java file that contains logic code such as seek bar change listener code etc.
10. Before coding, you should add the above three images as drawable objects. They should be saved in the app/res/drawable folder. You can read How To Add Images In Android Studio Drawable Folder to learn more.

2.1 seek_bar_thumb_selector.xml

1. This file is saved in the app/res/drawable folder.

   <selector xmlns:android="http://schemas.android.com/apk/res/android">
   
       <!--When slider is pressed, show pressed image. -->
       <item android:state_pressed="true"
              android:drawable="@drawable/seekbar_pressed_thumb"/>
   
       <!--When slider is not pressed, show unpressed image. -->
       <item android:state_pressed="false"
              android:drawable="@drawable/seekbar_unpressed_thumb"/>
   
   </selector>

2.2 seek_bar_layer.xml

1. This file is saved in the app/res/drawable folder also. Please note the item order in the layer-list XML item.

   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   
       <item android:id="@android:id/background" android:drawable="@android:color/darker_gray"/>
   
       <item android:id="@android:id/progress">
           <clip>
               <color android:color="@android:color/holo_orange_light" />
           </clip>
       </item>
   
       <item android:id="@android:id/secondaryProgress">
           <clip>
               <color android:color="@android:color/holo_green_dark" />
           </clip>
       </item>
   
   </layer-list>

2.3 activity_seek_bar.xml

1. This file is saved in the app/res/layout folder. Please note SeekBar’s android:thumb and android:progressDrawable property value.

   <ScrollView
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="vertical"
           tools:layout_editor_absoluteY="8dp"
           tools:layout_editor_absoluteX="8dp">
   
           <SeekBar
               android:id="@+id/seekBar"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:layout_marginTop="20dp"
               android:thumb="@drawable/seek_bar_thumb_selector"
               android:progressDrawable="@drawable/seek_bar_layer"
               android:minHeight="5dp"/>
   
           <TextView
               android:id="@+id/seekBarInfoTextView"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:gravity="center"
               android:textSize="20dp"/>
   
           <ImageView
               android:id="@+id/seekBarControledImage"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               app:srcCompat="@drawable/img1" />
       </LinearLayout>
   </ScrollView>

2.4 SeekBarActivity.java

1. SeekBarActivity.java

   package com.dev2qa.example;
   
   import android.os.Bundle;
   import android.support.v7.app.AppCompatActivity;
   import android.widget.ImageView;
   import android.widget.SeekBar;
   import android.widget.TextView;
   import java.text.DecimalFormat;
   
   public class SeekBarActivity extends AppCompatActivity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_seek_bar);
   
           setTitle("dev2qa.com - SeekBar Example");
   
           // Get seek bar controled imageview and set it's initial alpha value.
           final ImageView seekBarControledImageView = (ImageView)findViewById(R.id.seekBarControledImage);
           seekBarControledImageView.setAlpha(0);
   
           // This text view will display seek bar progress info..
           final TextView seekBarInfoTextView = (TextView)findViewById(R.id.seekBarInfoTextView);
   
           // Get seek bar and set max progress value.
           SeekBar seekBar = (SeekBar)findViewById(R.id.seekBar);
           seekBar.setMax(255);
   
           // This listener listen to seek bar change event.
           seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
               @Override
               public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                   // When seek bar progress is changed, change image alpha value.
                   seekBarControledImageView.setAlpha(progress);
   
                   // Set seek bar secondary progress value. Just for demo.
                   int secondaryProgress = progress - 85;
                   seekBar.setSecondaryProgress(secondaryProgress);
   
                   DecimalFormat decimalFormat = new DecimalFormat("0.00%");
   
                   // Calculate progress value percentage.
                   float progressPercentageFloat = (float)progress / (float)seekBar.getMax();
                   String progressPercentage = decimalFormat.format(progressPercentageFloat);
   
                   // Calculate secondary progress value percentage.
                   float secondaryProgressPercentageFloat = (float)secondaryProgress / (float)seekBar.getMax();
                   String secondaryProgressPercentage = decimalFormat.format(secondaryProgressPercentageFloat);
   
                   // Show the percentage in text view.
                   StringBuffer strBuf = new StringBuffer();
                   strBuf.append("Current Progress is " + progressPercentage + ". Progress color is yellow.\r\n");
                   strBuf.append("Current Secondary Progress is " + secondaryProgressPercentage + ". Secondary Progress color is green.");
   
                   seekBarInfoTextView.setText(strBuf.toString());
               }
   
               @Override
               public void onStartTrackingTouch(SeekBar seekBar) {
                   // When seek bar start slip.
                   seekBarInfoTextView.setText("Start Slip.");
               }
   
               @Override
               public void onStopTrackingTouch(SeekBar seekBar) {
                   // When seek bar stop slip.
                   seekBarInfoTextView.setText("Stop Slip.");
               }
           });
       }
   }