Android multi-style progress bar

Source: Internet
Author: User


----The mark of the immature man was that he wants to die nobly for a causer while the mark of the mature man was that he w Ants to live humbly for one



1. Horizontal to right progress bar



1-1 define a graph showing progress indicators

Drawable directory under Progress_v_01.xml

For more information on shape usage, click to open link

<?xml version= "1.0" encoding= "Utf-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android"    android:shape= "Rectangle" >    <!--default graphics size--    <size        android:width= "500DP"        android: height= "50DP"/>    <!--fill Color--    <solid android:color= #6633CC/>    <!--border angle?-->    <corners android:radius= "20DP"/></shape>

1-1-1



1-2. Create a new clip tag file in the drawable directory
<?xml version= "1.0" encoding= "Utf-8"? ><clip xmlns:android= "Http://schemas.android.com/apk/res/android"    android:cliporientation= "Horizontal"    android:drawable= "@drawable/progress_v_01"    android:gravity= " Left "></clip>

cliporientation Setting the orientation to the horizontal direction

Gravity alignment is left during setup

drawable to display settings in a drawing


1-3. Use in the page layout file

Introducing the clip label file created in our 1-2 under the SRC attribute

<imageview        android:layout_margin= "10DP"        android:background= "#e6e6e6"        android:id= "@+id/iv_image_ Clip_left "        android:layout_width=" match_parent "        android:layout_height=" wrap_content "             android:src=" @ Drawable/clip_left_01 "/>   


1.4 Setting progress dynamically in Java code


Private ImageView Mclipleftimageview;        @Override    protected void onCreate (Bundle savedinstancestate) {        super.oncreate (savedinstancestate);        Setcontentview (r.layout.activity_main);        Mclipleftimageview = (ImageView) Findviewbyid (r.id.iv_image_clip_left);        Mclipleftimageview.setimagelevel (10000);        Handler.postdelayed (runnable,2000);    }    private int munmber = 0;    Private Handler Handler = new Handler ();    Runnable Runnable = new Runnable () {        @Override public        void Run () {            if (munmber<=10000) {                Mclipleftimageview.getdrawable (). SetLevel (Munmber);                Handler.postdelayed (runnable,20);                munmber+=100;}}    ;


2. Horizontal to left progress bar


2-1 define a picture that shows progress, using the graph defined in 1-1

2-2 creating a clip tag file

<?xml version= "1.0" encoding= "Utf-8"? ><clip xmlns:android= "Http://schemas.android.com/apk/res/android"    android:cliporientation= "Horizontal"    android:drawable= "@drawable/progress_v_01"    android:gravity= " Right "    ></clip>

Cliporientation Setting the orientation to the horizontal direction

Gravity alignment is Right during setup (thus achieving a right-to-left implementation effect)

drawable to display settings in a drawing

2-3 using the same 1-3 in the layout file;

2-4 the settings in Java code are the same as 1-4;



3. Horizontal left-to-right progress bar


3-1 define a picture that shows progress, using the graph defined in 1-1

3-2 creating a clip tag file

<?xml version= "1.0" encoding= "Utf-8"? ><clip xmlns:android= "Http://schemas.android.com/apk/res/android"    android:cliporientation= "Horizontal"    android:drawable= "@drawable/progress_v_01"    android:gravity= " Center_horizontal "    ></clip>

Cliporientation Setting the orientation to the horizontal direction

Gravity Alignment for vertical center alignment (resulting in an implementation that extends the progress from the middle to the sides)

drawable to display settings in a drawing


3-3 using the same 1-3 in the layout file;

3-4 settings in Java code are the same as 1-4;





4. Horizontal-to-right circular progress bar


4-1 define the graphical Drawbale directory used to display the progress of Progress_oval_01.xml

<?xml version= "1.0" encoding= "Utf-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android"    android:shape= "Oval" >    <!--Set the night display size-    <size        android:width= "100DP"        android: height= "100DP"/>    <!--set Graphics color-    <gradient        android:centercolor= "#CC9933"        android: centerx= "0.5"        android:centery= "0.5"        android:endcolor= "#33FF33"        android:gradientradius= "45"        android:startcolor= "#FFFF33"        android:type= "radial"/>    <!--set graphics border--    <stroke        android:width= "2DP"        android:color= "#0000CC"/>    </shape>


4-2 creating a clip file to use

<?xml version= "1.0" encoding= "Utf-8"? ><clip xmlns:android= "Http://schemas.android.com/apk/res/android"    android:cliporientation= "Horizontal"    android:drawable= "@drawable/progress_oval_01"    android: Gravity= "left"    ></clip>

Cliporientation Setting the orientation to the horizontal direction

Gravity alignment is left aligned during setup (thus achieving progress from left-to-right extension of the implementation effect)

drawable to display settings in a drawing


3-3 using the same 1-3 in the layout file;

3-4 settings in Java code are the same as 1-4;




5. Center outward-expanding circular progress bar

5-1 Create a graph that shows progress here is a reference to the graphics created in 4-1

5-2 Creating a clip label file for the display

<?xml version= "1.0" encoding= "Utf-8"? ><clip xmlns:android= "Http://schemas.android.com/apk/res/android"    android:cliporientation= "horizontal|vertical"    android:drawable= "@drawable/progress_oval_01"    android:gravity= "Center"    ></clip>


Cliporientation Setting the orientation to the horizontal direction

Gravity alignment is centered during setup (thus achieving an extended implementation of progress from the middle to the sides)

drawable to display settings in a drawing


5-3 using the same 1-3 in the layout file;

Create ImageView tag, reference under SRC attribute

5-4 settings in Java code are the same as 1-4;



6. Vertical upward straight line progress bar

6-1 creating a graph showing progress

<?xml version= "1.0" encoding= "Utf-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android"    android:shape= "Rectangle"    >    <size android:width= "5DP"        android:height= "100DP"/>    <gradient        android:angle= "android:startcolor="        #FF9900 "        android:centercolor=" #FFFF00 "        Android:endcolor= "#66FF00"        />    <corners android:radius= "5DP"/></shape>


: 6-1-1



6-2 creating the corresponding clip tag file

<?xml version= "1.0" encoding= "Utf-8"? ><clip xmlns:android= "Http://schemas.android.com/apk/res/android"    android:cliporientation= "vertical"    android:drawable= "@drawable/progress_oval_01"    android:gravity= "Bottom"    ></clip>

Cliporientation Setting the orientation to the vertical direction

Gravity the alignment at the bottom of the setup process (thus achieving the effect of increasing the progress from the bottom up)

If set to top, then the progress will be from top to bottom

drawable to display settings in a drawing

6-3 using the same 1-3 in the layout file;

Create ImageView tag, reference under SRC attribute

6-4 settings in Java code are the same as 1-4;






7. Vertical Upward circular progress bar



8 Reviews
the clipdrawable represents a "picture fragment" from another bitmap. Use the <clip.../> element to define the Clipdrawable object in the XML file. The following three properties can be specified:
Android:drawable: Specifies the intercepted source drawable object, or you can specify a child label for the Drawable class
android:cliporientation: Specifies the direction of interception, which can be set to horizontal vertical
android:gravity: Specifies the alignment at intercept, can be set to top bottom right center_vertical fill_vertical center_horizontal Center fill Clip_ Vertaical start end and so on


You can use the Clipdrawable object to call the Setlevel (int level) method to set the size of the intercept, and when level is 0 o'clock, the captured picture fragment is empty, and when level is 10000, the entire picture is truncated.

You can use the CLIThis nature of pdrawable controls the size of the captured image area, allowing the program to constantly call the Setlevel method and change the level value, so that the image slowly expand the effect






Android multi-style progress bar

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.