Android learning notes 18: Custom Seekbar dragging Style

You can control the SeekBar and drag it. For example, you can use a drag bar to control the volume in an application.

1. Use of the SeekBar Control

1.1SeekBar common attributes

Common attributes of SeekBar include:

Android: max [integer] // you can specify the maximum value of a dragged bar.

Android: progress [integer] // sets the current progress Value

Android: secondaryProgress [integer] // sets the second progress. It is usually used to display the buffering effect of videos.

Android: thumb [drawable] // you can specify a slider.

Android: progressDrawable [drawable] // you can specify a progress bar.

1.2SeekBar event listener

When using SeekBar, we can set the event listener setOnSeekBarChangeListener to get the current status of SeekBar. In SeekBar, you usually need to listen to the following three events:

Public void onProgressChanged (SeekBar seekBar, int progress, boolean fromUser );

Public void onStartTrackingTouch (SeekBar seekBar );

Public void onStopTrackingTouch (SeekBar seekBar );

Here, onProgressChanged () is used to listen for changes to the SeekBar progress value; onStartTrackingTouch () is used to listen for SeekBar start dragging; onStopTrackingTouch () is used to listen for SeekBar stop dragging.

1.3 instance

In this example, a simple SeekBar case is implemented. The maximum value of the drag bar is 100, the current progress is 30, and the second progress is 50. Set the event listener of SeekBar to listen on changes to the Progress value of SeekBar, start dragging of SeekBar, stop dragging of SeekBar, and display the results in two TextView controls respectively.

In the xml layout file, you can set the layout of a SeekBar control and two TextView controls. The source code is as follows:

Xml layout File
1 <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
2 xmlns: tools = "http://schemas.android.com/tools"
3 android: orientation = "vertical"
4 android: layout_width = "match_parent"
5 android: layout_height = "match_parent">
6
7 <SeekBar
8 android: id = "@ + id/seekbar"
9 android: layout_width = "match_parent"
10 android: layout_height = "wrap_content"
11 android: max = "100"
12 android: progress = "30"
13 android: secondaryProgress = "50">
14 </SeekBar>
15
16 <TextView
17 android: id = "@ + id/textview1"
18 android: layout_width = "match_parent"
19 android: layout_height = "wrap_content">
20 </TextView>
21
22 <TextView
23 android: id = "@ + id/textview2"
24 android: layout_width = "match_parent"
25 android: layout_height = "wrap_content">
26 </TextView>
27 </LinearLayout>
The java code changes the progress value of SeekBar, starts to drag SeekBar, and stops to drag SeekBar. The source code is as follows:

Java code
1 package com. example. android_seekbar;
2
3 import android. OS. Bundle;
4 import android. widget. SeekBar;
5 import android. widget. SeekBar. OnSeekBarChangeListener;
6 import android. widget. TextView;
7 import android. app. Activity;
8
9 public class MainActivity extends Activity implements OnSeekBarChangeListener {
10
11 SeekBar mSeekBar; // SeekBar object, used to display progress bars
12 TextView mTextView1; // TextView object, used to display the current progress Value
13 TextView mTextView2; // TextView object, used to display the drag status
14
15 @ Override
16 public void onCreate (Bundle savedInstanceState ){
17 super. onCreate (savedInstanceState );
18 setContentView (R. layout. activity_main); // load the layout File
19
20 // load controls
21 mSeekBar = (SeekBar) this. findViewById (R. id. seekbar );
22 mTextView1 = (TextView) this. findViewById (R. id. textview1 );
23 mTextView2 = (TextView) this. findViewById (R. id. textview2 );
24
25 mSeekBar. setOnSeekBarChangeListener (this); // sets the SeekBar listener.
26}
27
28 // progress value change event listening
29 public void onProgressChanged (SeekBar seekBar, int progress,
30 boolean fromUser ){
31 mTextView1.setText ("Current Value:" + progress );
32}
33
34 // start dragging event listening
35 public void onStartTrackingTouch (SeekBar seekBar ){
36 mTextView2.setText ("tuning ");
37}
38
39 // stop dragging event listening
40 public void onStopTrackingTouch (SeekBar seekBar ){
41 mTextView2.setText ("Stop adjusting ");
42}
43}
The result 1 after the instance is running is shown in.

 

 

Figure 1 Seekbar

2. Custom SeekBar Style

The default SeekBar style provided by Android is very simple and cannot fully meet the development needs. How can I customize my SeekBar style?

It is easy to see that a SeekBar consists of a slider and a slider. Therefore, to implement a custom SeekBar style, you only need to implement the custom slider and slider respectively.

2.1 Implementation of custom Slider

It can be seen from the observation that the slider has two statuses: under and not under. When the slider is removed, the slider is highlighted. When the slider is not removed, the slider is dimmed.

Therefore, in our custom Seekbar, you can use two images to indicate the slide's place and not place. You can create a thumb. xml file in the res/drawable directory of the project to load the two images, and set the android: state_pressed attribute to select which image to display.

The specific source code of thumb. xml is as follows:

Thumb. xml source code
1 <? Xml version = "1.0" encoding = "UTF-8"?>
2 <selector xmlns: android = "http://schemas.android.com/apk/res/android">
3
4 <! -- When the slider is not pressed down -->
5 <item
6 android: state_pressed = "false"
7 android: drawable = "@ drawable/thumb_grey">
8 </item>
9
10 <! -- When the slider is pressed down -->
11 <item
12 android: state_pressed = "true"
13 android: drawable = "@ drawable/thumb_green">
14 </item>
15
16 </selector>
2.2 Implementation of custom slide Rods

To customize the slider style, you can set the slider background, progress bar style, and the second progress bar style. You can create a seekbarbackground. xml file in the res/drawable directory of the project, and set the android: drawable attribute to load three images to indicate the sliding rod background, progress bar style, and second progress bar style.

The specific source code of seekbarbackground. xml is as follows:

Seekbarbackground. xml source code
1 <? Xml version = "1.0" encoding = "UTF-8"?>
2 <layer-list xmlns: android = "http://schemas.android.com/apk/res/android">
3
4 <! -- Sliding rod background -->
5 <item
6 android: id = "@ android: id/background"
7 android: drawable = "@ drawable/seekbar_background">
8 </item>
9
10 <! -- Second progress bar style -->
11 <item
12 android: id = "@ android: id/secondaryProgress"
13 android: drawable = "@ drawable/seekbar_secondaryprogress">
14 </item>
15
16 <! -- Progress bar style -->
17 <item
18 android: id = "@ android: id/progress"
19 android: drawable = "@ drawable/seekbar_progress">
20 </item>
21 </layer-list>
2.3 Effect of custom SeekBar Style

After you have defined your own slider and slider style, you can load the slider and slider style you have defined in the main. xml file. The loading method is as follows:

Android: thumb = "@ drawable/thumb"

Android: progressDrawable = "@ drawable/seekbarbackground"

After running, you can see the Seekbar style you have defined, as shown in figure 2 and Figure 3. Figure 2 shows the Seekbar pattern when the slider is not taken down, and Figure 3 shows the Seekbar pattern when the slider is taken down and sliding.

 

Figure 2 custom SeekBar1

 

Figure 3 custom SeekBar2