Android control Seekbar Imitation Taobao sliding verification effect _android

Seekbar is a drag bar control, the simplest case is our adjust volume, as well as audio video playback, traditional Seekbar style, such as figure

The traditional implementation is too simple to be enough for us to be able to pretend to be forced. Originally is intended to achieve drop-drop trip to complete the effect of the order, but can not find the effect of the map, today also use Taobao sliding verification as an example

1.1 Implementation Analysis

SeekBar: Customizing SeekBar with the Progressdrawable attribute
Drag block: Using the Thumb property change, is actually a picture
Type: nested together using Relativelayout

1.2 Implementation Layout

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android=
"http://schemas.android.com/apk" /res/android "
  android:layout_width=" match_parent "
  android:layout_height=" Wrap_content "
  android: padding= "16DP" >

  <seekbar
    android:id= "@+id/sb"
    android:layout_width= "Match_parent"
    android:layout_height= "Wrap_content"
    android:max= "android:progress="
    0 "
    android: progressdrawable= "@drawable/seekbar_bg"
    android:thumb= "@drawable/thumb"
    android:thumboffset= "0DP"/ >

  <textview
    android:id= "@+id/tv"
    android:layout_width= "match_parent"
    android:layout_ height= "Wrap_content"
    android:layout_centerinparent= "true"
    android:gravity= "center"
    android: text= "Please hold down the slider and drag to the rightmost"
    android:textcolor= "#888888"
    android:textsize= "14DP"/>
</ Relativelayout>

The effect is

Introduction to Seekbar Properties

Android:max: Set the progress bar maximum progress value
Android:progress: Set the current progress value
Android:progressdrawable: Set the drawable style of the progress bar
Android:thumb: Set progress bar Slider
Android:thumboffset: Set the offset of the progress bar slider

1.3 Seekbar Style

This is the seekbar_bg.xml inside the android:progressdrawable.

<?xml version= "1.0" encoding= "UTF-8"?> <layer-list xmlns:android= "http://schemas.android.com/apk/res/"  Android "> <!--seekbar background--> <item android:id=" @android: Id/background "> <!--shape--> <shape
      Android:shape= "Rectangle" > <!--size--> <size android:height= "29DP"/> <!--fillet--> <corners android:radius= "2DP"/> <!--background--> <solid android:color= "#E7EAE9"/> <!-- Border--> <stroke android:width= "1DP" android:color= "#C3C5C4"/> </shape> </item
        > <!--seekbar progress bar--> <item android:id= "@android: id/progress" > <clip> <shape> <corners android:radius= "2DP"/> <solid android:color= "#7AC23C"/> <stroke an Droid:width= "1DP" android:color= "#C3C5C4"/> </shape> </clip> </item> </laye
 R-list>

1.4 Code Implementation Logic

The code is also very simple, Seekbar provides a listener event Onseekbarchangelistener, in the corresponding callback to achieve the appearance and disappearance of text, textual content modification

public class Mainactivity extends Appcompatactivity implements Seekbar.onseekbarchangelistener {private TextView TV;

  Private SeekBar SeekBar;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);

    Setcontentview (R.layout.activity_main);
    TV = (TextView) Findviewbyid (r.id.tv);
    SeekBar = (SeekBar) Findviewbyid (R.ID.SB);
  Seekbar.setonseekbarchangelistener (this); /** * SeekBar When Progress changes * * * @param SeekBar * @param progress * @param fromuser/@Override Pub LIC void onprogresschanged (SeekBar SeekBar, int progress, Boolean fromuser) {if (seekbar.getprogress () = = Seekbar.get
      Max ()) {tv.setvisibility (view.visible);
      Tv.settextcolor (Color.White);
    Tv.settext ("Complete Verification");
    else {tv.setvisibility (view.invisible); }/** * SeekBar start Touch callback * * @param seekBar/@Override public void Onstarttrackingtouch (SeekBar Kbar) {}/** *Kbar Stop Touch Callback * * @param seekBar/@Override public void Onstoptrackingtouch (SeekBar seekBar) {if (seekba
      R.getprogress ()!= Seekbar.getmax ()) {seekbar.setprogress (0);
      Tv.setvisibility (view.visible);
      Tv.settextcolor (Color.gray);
    Tv.settext ("Please hold down the slider, drag to the far right");


 }
  }
}

Well, today's use of Seekbar is here, and if you're interested in other basic controls, you can focus on my blog, the basic Control series, and welcome to the idea.

SOURCE Download: Http://xiazai.jb51.net/201611/yuanma/Androidseekbar (jb51.net). rar

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.