Android SeekBar Example

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

1. SeekBar Properties And Methods.

In this example, please note below seekbar properties.

  1. 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.
  2. android:progressDrawable : This is same as progress bar. It’s value is a layer-list which defines seek bar’s background, progress and secondary progress color. Please note the item order in layer-list.
  3. setOnSeekBarChangeListener() : This method is used to set a listener object which listen to the seek bar progress change event.
  4. OnSeekBarChangeListener : This is the listener class, you can override it’s onProgressChangedonStartTrackingTouch and onStopTrackingTouch methods to add seek bar progress related code.

2. SeekBar Example.

In this example, when use slide 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.

android seekbar example new

 

There are totally seven files in this example.

  1. seekbar_pressed_thumb : This is the thumb image when slider is pressed.
  2. seekbar_unpressed_thumb : This is the thumb image when slider is unpressed.
  3. You can use any image as the bottom image in the above gif.
  4. seek_bar_thumb_selector.xml : This selector defines how the slider behavior.
  5. seek_bar_layer.xml : This layer-list defines the seek bar background, progress and secondary progress color.
  6. activity_seek_bar.xml : This is the layout xml file which configure the UI component layout.
  7. SeekBarActivity.java : This is the java file which contain logic code such as seek bar change listener code etc.
READ :   How To Read String Value Array From strings.xml In Android

Before coding, you should add above three images as the drawable objects. They should be saved in 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

Saved in 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

Saved in app / res / drawable folder also. Please note the item order in layer-list.

<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

Saved in 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

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.");
            }
        });
    }
}
(Visited 629 times, 3 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *