android-do a personalized scroll bar

1. Case studies

2. Prepare the material

                              

Progress1.png (78*78) progress2.png (78*78)

3. Principle

Use a picture as the background image of the ProgressBar ( usually using a lighter color ). The other one is a picture of the scroll bar ( generally with a darker image ). Progress in the scrolling is: scrolling pictures gradually display, background image gradually hidden, to achieve the above effect.

4. Inspiration from the source code provided by Android control

4.1 Default scroll bar with progress, as

    <progressbar    android:id= "@+id/progressbar2"   style= "@android: Style/widget.progressbar.horizontal"    android:layout_width= "268DP"    android:layout_height= "wrap_content"    android:progress= "/>"

Note: The key is that the style property is in effect

4.2 Find the location of the style definition

Hover over the Style property value, hold down the CTRL key, and click the hyperlink to jump to the defined position of the style.

The contents of the style definition are as follows

Key research:

android:progressdrawable: style of scroll bar

@android:d rawable/progress_horizontal: style-defined files

Search for progress_horizontal.xml files in android-sdk-windows\platforms\android-14\data\res , with the following results:

Open a Progress_horizontal.xml file with the following content

<layer-listxmlns:android= "Http://schemas.android.com/apk/res/android" > <itemandroid:id= "@android: ID/                   Background "> <shape> <cornersandroid:radius=" 5dip "/> <gradient Android:startcolor= "#ff9d9e9d" android:centercolor= "#ff5a5d5a" android:centery= "0.7 5 "android:endcolor=" #ff747674 "android:angle="/> &LT;/SHAPE&G   T               </item> <itemandroid:id= "@android: id/secondaryprogress" > <clip> <shape> <cornersandroid:radius= "5dip"/> <gradient android:startcolor= "#80ffd                       "Android:centercolor=" #80ffb600 "android:centery=" 0.75 "       Android:endcolor= "#a0ffcb00" android:angle= "/>" </shape> </clip> </itEm> <itemandroid:id= "@android: id/progress" > <clip> <shape> <cor                       nersandroid:radius= "5dip"/> <gradient android:startcolor= "#ffffd300" Android:centercolor= "#ffffb600" android:centery= "0.75" ANDROID:ENDC Olor= "#ffffcb00" android:angle= "/>" </shape> </clip&gt   ; </item></layer-list>

Interpretation:

<item android:id= "@android: Id/background";: defines the background style of the scroll bar

<item android:id= "@android: id/secondaryprogress";: style of the second scroll bar

<item android:id= "@android: id/progress";: style of scroll bar

Think: What if I want to do a vertical scroll bar?

The key is to modify the attributes of the clip element.

<clip
android:cliporientation = "Vertical" defines the direction of the scroll vertical in the vertical direction
android:drawable= "@drawable/progress1" defines a scrolling picture
android:gravity= "Bottom" > Define where to start scrolling
</clip>

5. Define Style file Progress_vertical.xml

The progress_vertical.xml file code is as follows

<?xmlversion= "1.0" encoding= "Utf-8"? ><layer-listxmlns:android= "http://schemas.android.com/apk/res/ Android ">   <itemandroid:id=" @android: id/progress ">       <clip           android:cliporientation=" Vertical "           android:drawable=" @drawable/progress1 "           android:gravity=" Bottom ">       </clip>   </item></layer-list>

6. Apply a custom style

   <button       android:id= "@+id/btstart"       android:layout_width= "fill_parent"       android:layout_height= " Wrap_content "       android:layout_margintop=" 150DP "       android:text=" Start "/>    <progressbar       android: Id= "@+id/pbpic"       style= "@android: Style/widget.progressbar.horizontal"       android:layout_width= "50DP"       android:layout_height= "68DP"       android:background= "@drawable/progress2"       android:max= "       android" :p rogress= "0"       android:progressdrawable= "@drawable/progress_vertical"/><!--apply on this property-    < TextView       android:id= "@+id/txtprogress"       android:layout_width= "wrap_content"       android:layout_ height= "Wrap_content"/><span style= "font-family:arial, Helvetica, Sans-serif; Background-color:rgb (255, 255, 255); " > </span>

7. Click the button to simulate the effect of scrolling

Publicclass Progressactivity extends Activity {          ProgressBar pb =null;     TextView txtprogress;     Handler Handler =new Handler ();     @Override     publicvoid onCreate (bundlesavedinstancestate) {          super.oncreate (savedinstancestate);          Setcontentview (r.layout.main);          System.out.println ("subject =" + gettheme () + "");          PB = (ProgressBar) Findviewbyid (r.id.pbpic);

<pre code_snippet_id= "609749" snippet_file_name= "blog_20150301_5_812240" name= "code" class= "Java" ><span Style= "White-space:pre" ></span>   //button

Button btnstart = (button) Findviewbyid (R.id.btstart);

<pre code_snippet_id= "609749" snippet_file_name= "blog_20150301_5_812240" name= "code" class= "Java" > <span Style= "White-space:pre" ></span>   //Show Progress

Txtprogress = (TextView) Findviewbyid (r.id.txtprogress);

<pre code_snippet_id= "609749" snippet_file_name= "blog_20150301_5_812240" name= "code" class= "Java" ><span Style= "White-space:pre" ></span>   //button click event

Btnstart.setonclicklistener (New Onclicklistener () {publicvoid OnClick (VIEWV) {

<pre code_snippet_id= "609749" snippet_file_name= "blog_20150301_5_812240" name= "code" class= "Java" ><span Style= "White-space:pre" ></span>    //Create and start threads, use threads to perform simulated tasks

New Thread (New Runnable () {publicvoid run () {for (inti = 0; i < 100;i++) {//Loop 100 times try {handler.post (new Runnable () {//Update interface Data publicvoid run () {Pb.incrementprogressby (1);//Increase Progress

<pre code_snippet_id= "609749" snippet_file_name= "blog_20150301_5_812240" name= "code" class= "Java" ><span Style= "White-space:pre" ></span>  //Show progress on completion

Txtprogress.settext (pb.getprogress () + "%"); } }); Thread.Sleep (100); } catch (Interruptedexceptione) {}}}). Start (); } }); }}

android-do a personalized scroll bar