Android simulates the effect of the slider of the Samsung mobile system slide when the sliders become larger

Samsung mobile phone in the process of the discovery of the Samsung mobile system comes with a slider bar has a special effect, such as adjusting the brightness of the slider, in the process of sliding slide, the slider will become larger, the function is very small but the experience is very good, so decided to do a such effect out, good nonsense not much to say, the following began to achieve

We know that there are two important properties in the Seekbar control, one is the progress bar (that is, the Android:progressdrawable property), one is the slider (that is, the Android:thumb property), we mainly use the slider effect, Here is the configuration of the progress bar a little introduction, first on the code:

Create the Seekbar_progress.xml file under the Res/xml folder:

<?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> <corners Android:radi                us= "0dip"/> <gradient android:angle= "android:centercolor=" #999999 " android:centery= "0.75" android:endcolor= "#999999" android:startcolor= "#999999" /> </shape> </item> <item android:id= "@android: id/secondaryprogress" > <clip&gt            ; <shape> <corners android:radius= "1dip"/> <gradient androi                    D:angle= "android:centercolor=" #88803990 "android:centery=" 0.75 "        Android:endcolor= "#88803990" android:startcolor= "#88803990"/> </shape> </clip> </item> <item android:id= "@android: id/progress" > <clip> <shape> <c Orners android:radius= "1dip"/> <gradient android:angle= "a"                    Ndroid:centercolor= "#803990" android:centery= "0.75" android:endcolor= "#803990" Android:startcolor= "#803990"/> </shape> </clip> </item></layer -list>

The content of the code is very simple, mainly to set the progress bar of the first progress, the second progress and background color, here do not do a specific introduction.

Next Start our slider property, to achieve the effect of Samsung, we have to deal with the normal state and press events, we should all think of the state selector, here we create the slider in the Res/drawable directory State selector thum_ Selector.xml, and then set to set some of its item properties, but this time found that our slider has not yet been created, the slider here we do not use the picture, but by drawing the way to achieve (as to how to create a specific, we can find in the Android source Thum configuration files, change on the line), Create the Seekbar_thum_normal.xml file under the XML folder:

<?xml version= "1.0" encoding= "UTF-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android"    android:shape= "Rectangle" >    <gradient        android:angle= "android:endcolor="        #ff585858 "        android:startcolor= "#ffffffff"/>        <size        android:height= "15DP"        android:width= "15DP"/>    <stroke          android:width= "5DP"          android:color= "#00000000"/>    <corners          android: radius= "8DP"/>    <solid android:color= "#dcdcdc"/></shape>

Profile Seekbar_thum_pressed.xml of the sliding block of the pressing state:

<?xml version= "1.0" encoding= "UTF-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android"    android:shape= "Rectangle" >    <gradient        android:angle= "android:endcolor="        #ff585858 "        android:startcolor= "#ffffffff"/>        <size        android:height= "15DP"        android:width= "15DP"/>    <corners          android:radius= "8DP"/>    <solid android:color= "#dcdcdc"/></shape>

Looking closely, you will find that the main difference between the two files is that the previous file has a stroke property, which indicates a stroke around the outside of the slider, we set the background to transparent, so that the effect is to make the slider size consistent so that the progress bar jumps up and down during the slide.

Next up is the layout of our slider's state selector thum_selector.xml

<?xml version= "1.0" encoding= "Utf-8"?> <selector xmlns:android= "http://schemas.android.com/apk/res/ Android ">      <item android:state_pressed=" true "          android:state_window_focused=" true "          Android: drawable= "@xml/seekbar_thum_pressed"/>      <item android:state_focused= "true"          Android:state_window_ Focused= "true"          android:drawable= "@xml/seekbar_thum_pressed"/>      <item android:state_selected= "true"          android:state_window_focused= "true"          android:drawable= "@xml/seekbar_thum_pressed"/>      <item android:drawable= "@xml/seekbar_thum_normal"/> </selector>

Finally, post a Seekbar layout file that explains what you can do by adjustingAndroid:thumboffset property to make progress bar progress at the center point of the slider

<seekbar             android:id= "@+id/seekbar1"             android:layout_width= "fill_parent"             android:layout_height= " Wrap_content "             android:progressdrawable=" @xml/seekbar_progress "             android:thumb=" @drawable/thum_selector "             android:thumboffset= "10DP"             android:minheight= "5DP"             android:maxheight= "5DP"             >         </ Seekbar>

Here, the effect of our imitation is over, on the Samsung phone

Android simulates the effect of the slider of the Samsung mobile system slide when the sliders become larger