Android's SeekBar (drag bar)

Introduction to this section:

In this section, we will continue to learn the drag bar in the basic UI controls of Android - SeekBar. I believe everyone is familiar with him. The most common places are music players or video players, volume control or playback progress control. Using this SeekBar, let's take a look at the class structure of SeekBar first, and come to the official document: SeekBar

Hey, this thing is a subclass of ProgressBar, that is, all properties of ProgressBar can be used! And he also has an attribute of his own: android:thumb , which allows us to customize the slider~ Okay, let's start this section!

---

1. Basic usage of SeekBar

Well, the basic usage is actually very simple. Commonly used attributes are nothing more than the following commonly used attributes. You only need to setXxx in Java code:

android:max ="100" //The maximum value of the slider

android:progress ="60" //The current value of the slider

android:secondaryProgress ="70" //The progress of the secondary slider

android:thumb  = "@mipmap/sb_icon" //The drawable of the slider

Next, let’s talk about SeekBar events. For SeekBar.OnSeekBarChangeListener  , we only need to rewrite three corresponding methods:

onProgressChanged : Triggered when the progress changes

onStartTrackingTouch : Triggered when the SeekBar is held down

onStopTrackingTouch : Triggered when the SeekBar is released

Simple code example:

Renderings:

Implementation code:

public class MainActivity extends AppCompatActivity {

    private SeekBar sb_normal;
    private TextView txt_cur;
    private Context mContext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = MainActivity.this;
        bindViews();
    }

    private void bindViews() {
        sb_normal = (SeekBar) findViewById(R.id.sb_normal);
        txt_cur = (TextView) findViewById(R.id.txt_cur);
        sb_normal.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                txt_cur.setText("Current progress value: " + progress + " / 100 ");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                Toast.makeText(mContext, "触碰SeekBar", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                Toast.makeText(mContext, "放开SeekBar", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

---

2. Simple SeekBar customization:

At first I thought about customizing the SeekBar, but after thinking about it, forget it. Some things related to customizing View may not be understood by beginners, and it seems a bit difficult. About customizing View, I should put it in advanced There, so here is just a simple customization of the SeekBar! Customizable content includes sliders, as well as tracks!

Code example:

Running effect diagram:

Code implementation:  1. Slider state Drawable: sb_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@mipmap/seekbar_thumb_pressed"/>
    <item android:state_pressed="false" android:drawable="@mipmap/seekbar_thumb_normal"/>
</selector>

Paste the material:

2. Drawable of Bar Bar: sb_bar.xml

A layer-list drawable resource is used here! In fact, it is a stack of pictures, in order: background, secondary progress bar, current progress:

<?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>
            <solid android:color="#FFFFD042" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="#FFFFFFFF" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="#FF96E85D" />
            </shape>
        </clip>
    </item>
</layer-list>

3. After the layout is introduced into the SeekBar, set the progressDrawable and thumb!

<SeekBar
        android:id="@+id/sb_normal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxHeight="5.0dp"
        android:minHeight="5.0dp"
        android:progressDrawable="@drawable/sb_bar"
        android:thumb="@drawable/sb_thumb"/>