Android implementation of custom ProgressBar with arrows

First, gossip:

Android native progress bar can be different depending on the theme of the visual effect, but any one of the theme of the progress bar and the application of the visual fit together is incompatible, so most of the time we need to customize the Progressbar, The simplest isto change the background and progress picture in the layout file by "android:progressdrawable" for Progressbar , and the effect is similar to this:

But you will find that the progress picture is truncated and looks equally unattractive, so now a lot of applications will play tricks on the progress bar, to make a variety of effects, this example is in the head of the progress bar with the effect of the Halo arrow, the final effect similar to this, know how to do this effect and, Other effects (an animation with a progress bar run, a rocket progress bar, etc.) will naturally be:

Second, the realization principle:

There are two things you need to do to achieve the Progressbar customization:

1, to ProgressBar for the foreground and background map, this in the layout file defined ProgressBar The time directly set its Progressdrawablej Yes,eg:

<progressbar        android:id= "@+id/downloadprogressid" style= "? Android:attr/progressbarstylehorizontal" Android:layout_width= "893.0DP" android:layout_height= "14.0DP" android:layout_centerinparent= "true" Android: progressdrawable= "@drawable/arrow_progress_bg" android:max= "android:progress=" 0 "/>

Arrow_progress_bg.xml as follows:

<?xml version= "1.0" encoding= "UTF-8"? ><layer-list xmlns:android= "http://schemas.android.com/apk/res/ Android >    <!--background--    <item        android:id= "@android: Id/background"        android:drawable= "@ Drawable/arrow_progress_bar_bottom_layer "        />    <!--progress--    <item        android:id=" @android: Id/progress "        android:drawable=" @drawable/arrow_progress_bar_top_layer "        /></layer-list>

2, give the progress with the Halo arrow effect, this example is by defining a ImageViewin the layout file, when the Progressbar Progress changes, through Dynamically changes The position of the ImageView when Layoutparams.

Third, the core code:

I encapsulate the above effects in a class, forming a custom Progressbar, as follows:

public class Arrowprogressbar extends Relativelayout {public Arrowprogressbar (context context, attributeset attrs, int de Fstyle) {Super (context, attrs, Defstyle); Initarrowprogressbar (context);} Public Arrowprogressbar (context context, AttributeSet Attrs) {Super (context, attrs); Initarrowprogressbar (context);} Public Arrowprogressbar (Context context) {super (context); Initarrowprogressbar (context);} private void Initarrowprogressbar (context context) {Layoutinflater Layoutinflater = layoutinflater.from (context); View view = Layoutinflater.inflate (r.layout.arrow_progress_bar_layout, null); Mprogressbar = (ProgressBar) View.findviewbyid (r.id.downloadprogressid); mprogresstxt = (TextView) View.findviewbyid (R.id.progresstxtid); Marrowimg = (ImageView) View.findviewbyid (R.id.arrowimgid); marrowimg.setvisibility (Imageview.gone); AddView (view);} public void setprogress (int progress) {if (Progress < Progress_max) {Layoutparams arrowparams = (layoutparams) marrow Img.getlayoutparams ( ) Float leftposition = ((Mprogressbar.getwidth ()/progress_max) * (progress-2)) + Mprogressbar.getleft (); Arrowpar Ams.leftmargin = (int) math.ceil (leftposition); Marrowimg.setlayoutparams (arrowparams);} Else{marrowimg.setvisibility (Imageview.gone);} Mprogressbar.setprogress (progress); Mprogresstxt.settext (progress + "%");} Private ProgressBar Mprogressbar = null;private TextView mprogresstxt = null;private ImageView marrowimg = Null;private St atic final float Progress_max = 100.0f;}

Arrow_progress_bar_layout.xml as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><relativelayout xmlns:android= "http://schemas.android.com/apk/res/ Android "Android:layout_width=" Fill_parent "android:layout_height=" fill_parent "> <relativelayout and Roid:id= "@+id/progresslayoutid" android:layout_width= "fill_parent" android:layout_height= "43.0DP" and Roid:layout_centerhorizontal= "true" > <progressbar android:id= "@+id/downloadprogressid" style= "?        Android:attr/progressbarstylehorizontal "android:layout_width=" 893.0DP "android:layout_height=" 14.0DP " Android:layout_centerinparent= "true" android:progressdrawable= "@drawable/arrow_progress_bg" android:max= "1 XX "android:progress=" 0 "/> <imageview android:id=" @+id/arrowimgid "Android:layout_wi Dth= "Wrap_content" android:layout_height= "wrap_content" android:background= "@drawable/arrow_progress_bar_arr ow "Android:contentdescription= "@string/app_name"/> </RelativeLayout> <textview android:id= "@+id/progresstxtid" Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" Android:layout_centerhorizon Tal= "true" android:gravity= "center" android:layout_below= "@id/progresslayoutid" Android:layout_margin top= "10.0DP" android:background= "@drawable/arrow_progress_text_background" android:textcolor= "@android: Color /white "android:textsize=" 30.0DP "/></relativelayout>

Four, the demo program:

Android Custom ProgressBar with arrows

Android implementation of custom ProgressBar with arrows