Android implements custom Progressbar with arrows and androidprogressbar

Android implements custom Progressbar with arrows and androidprogressbar

1. Gossip:

The progress bar of Android native can have different visual effects based on different themes, but the progress bar of any topic is incompatible with the visual combination of applications, most of the time, we need to customize the Progressbar. The simplest thing is to change the background and progress image of the Progressbar through "android: progressDrawable" in the layout file. The effect after the change is similar to this:

 

However, you will find that the progress picture looks as bad as it is when it is truncated, so now many applications are playing tricks on the progress bar to make a variety of effects, this example describes how to add a halo arrow to the head of the progress bar. The final effect is similar to this. You know how to do this effect and other effects (an animation carries a progress bar, a rocket progress bar, etc) naturally:

 

 

II. Implementation principle:

Two things are required to implement the custom Progressbar:

1. Change the foreground and background image for ProgressBar. Set progressDrawableJ directly when defining Progressbar in the layout file. For example:

<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="100"android:progress="0"/>

Arrow_progress_bg.xml is 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. Add a halo arrow to the progress. In this example, an ImageView is defined in the layout file. When the progress of the ssssbar changes, the position of the ImageView is dynamically changed through LayoutParams.

 

Iii. Core code:

I encapsulate the above effect in a class to form a custom Progressbar, as shown below:

public class ArrowProgressBar extends RelativeLayout {public ArrowProgressBar(Context context, AttributeSet attrs, int defStyle) {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 )mArrowImg.getLayoutParams( );float leftPosition = ( ( mProgressBar.getWidth( )/PROGRESS_MAX ) * ( progress - 2 ) ) + mProgressBar.getLeft();arrowParams.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 static final float PROGRESS_MAX = 100.0f;}

Arrow_progress_bar_layout.xml is 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        android:id="@+id/progressLayoutId"        android:layout_width="fill_parent"        android:layout_height="43.0dp"        android: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="100"        android:progress="0"        />    <ImageView        android:id="@+id/arrowImgId"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/arrow_progress_bar_arrow"        android:contentDescription="@string/app_name"        />    </RelativeLayout>    <TextView        android:id="@+id/progressTxtId"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:gravity="center"        android:layout_below="@id/progressLayoutId"        android:layout_marginTop="10.0dp"        android:background="@drawable/arrow_progress_text_background"        android:textColor="@android:color/white"        android:textSize="30.0dp"        /></RelativeLayout>

4. Demo program:

Android custom ssbar with arrows

Android development: ProgressBar and Button

You can use the combination of Button and progesponar.

How to control the rotation speed of progressbar by Using shape in android programming

We recommend that you use a real machine. Generally, the simulator runs slowly than the real machine.