Android Custom Seekbar drag bar style

Seekbar Drag bars can be controlled by the user and dragged. For example, the user in the application needs to control the volume, which can be achieved using a drag bar.

Use of 1.SeekBar controls

1.1SeekBar Common Properties

The common properties of Seekbar are as follows:

android:max[integer]//setting the maximum value of a drag bar

android:progress[integer]//setting the current progress value

android:secondaryprogress[integer]//set second progress, usually used as a buffer for displaying video, etc.

android:thumb[drawable]//Setting the pattern of a slider

android:progressdrawable[drawable]//Setting the pattern of the progress bar

1.2SeekBar Event Listener

When using Seekbar, we can get the current state of Seekbar by setting the event listener Setonseekbarchangelistener. The following 3 events are typically monitored in seekbar:

public void onprogresschanged (SeekBar SeekBar, int progress, Boolean fromuser);

public void Onstarttrackingtouch (SeekBar SeekBar);

public void Onstoptrackingtouch (SeekBar SeekBar);

Wherein, onprogresschanged () is used to monitor the change of Seekbar progress value, Onstarttrackingtouch () is used for listening seekbar start dragging; Onstoptrackingtouch () For listening Seekbar stop dragging.

1.3 Example

In this example, a simple Seekbar case is implemented, the maximum value of the drag bar is set to 100, the current progress value is 30, and the second progress is 50. The Seekbar event listener is set, the Seekbar progress value is changed, the Seekbar starts to drag, the Seekbar stops dragging, and the results are displayed in two TextView controls respectively.

In the XML layout file, the layout settings for a Seekbar control and two TextView controls are implemented, with the following source code:

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= "12   "       android:progress= "13        " Android: secondaryprogress= ">        14     </seekbar&Gt 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> </LinearLayout> in Java code , realizes the Seekbar progress value change, Seekbar starts to drag, Seekbar stops the drag the listener, the concrete 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 {Ten 11&NBSP;&NBSP;&NBSP;&N Bsp SeekBar mseekbar;                      //seekbar object for displaying the progress bar 12     TextView mtextview1;               //textview object for displaying the current progress value 13      TextView mtextview2;               //textview object for displaying the drag state 14     15     @Override 16      public void OnCreate (Bundle savedinstAncestate) {17         super.oncreate (savedinstancestate); 18          Setcontentview (R.layout.activity_main);                           //Load layout file 19         20         //Load control 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);         // Set the Seekbar listener 26&Nbsp;   } 28    //Progress Value Change event listener 29     public void Onprogresschanged (SeekBar SeekBar, int progress, 30              Boolean fromuser) {31         Mtextview1.settext ("Current value:" + Progress); 32    } 34    //Start drag event listener 35     public void Onstarttrackingtouch (SeekBar SeekBar) {36         Mtextview2.settext (" Being adjusted "); 37    } 39    //Stop drag event listener 40     public void Onstoptrackingtouch (SeekBar SeekBar) {41         mtextview2.settext ("Stop adjustment "); 42    } 43} The instance is running after the effect 1 is shown.

Figure 1 Seekbar

2. Custom Seekbar Style

The default Seekbar style provided by Android is very single, and does not fully meet the needs of development, how to customize its own seekbar style it?

It is not difficult to see that a seekbar is composed of two parts: the slider and the slider. So, to implement a custom Seekbar style, you only need to implement the custom sliders and slider separately.

2.1 Implementation of Custom Sliders

It can be seen from the observation that there are two states of the slider: the charge State and the non-remand state. The slider is highlighted when the slide is dropped, and the slider is grayed out when the slide is not in the position of the block.

So, in our custom seekbar, we can use two images to indicate the lower and the lower states of the sliders, respectively. Specifically, you can create a new Thumb.xml file in the Res/drawable directory of your project to load both of these images and choose which one to display by setting the Android:state_pressed property.

The specific Thumb.xml source code 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     <!--   Slider not pressed-- 5     <item  6          android:state_pressed= "false"  7         android:drawable= "@ Drawable/thumb_grey "    >       8     </ Item>  9     10     <!--slider down--11     <item 12         android:state_pressed= "true" 13          android:drawable= "@drawable/thumb_green"     >       14     </item> 15     </selector> 2.2 CustomThe realization of Slider

To implement a custom slider style, you can do this by setting the slider background, the progress bar style, and the second progress bar style. Specifically, you can create a new Seekbarbackground.xml file in the project's res/drawable directory and load three images by setting the Android:drawable property to represent the slider background, the progress bar style, and the second progress bar style, respectively.

The specific Seekbarbackground.xml source code 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     <!--slider background-- 5     <item  6          android:id= "@android: Id/background"  7         android: drawable= "@drawable/seekbar_background"     >      8      </item>  9     10     <!--second progress bar model--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> + < /layer-list> 2.3 Customizing the effect of the Seekbar style

Once you have defined your sliders and slider styles, you can load your own defined sliders and slider styles in the Main.xml file. The loading method is as follows:

android:thumb= "@drawable/thumb"

android:progressdrawable= "@drawable/seekbarbackground"

After running, you can see your own definition of the Seekbar style, shown in 2 and Figure 3. wherein, fig. 2 is the Seekbar style when the slider is not pressed, Figure 3 is the Seekbar style when the slide is pressed and slid.

Figure 2 Customizing the SEEKBAR1

Figure 3 Customizing the SEEKBAR2

Android Custom Seekbar drag bar style