Back to Home

Customization ProgressBar in Android

development for android · android · ProgressBar

Customization ProgressBar in Android

    Periodically, there is a need to replace the standard circular ProgressBar with one of your own.

    Usually people’s visual perception is sharpened, so I’ll immediately give an example of several options for ProgressBar. Several resources for generating preloaders



    were discussed on the Habr. You can use them to create an image that later gets into the ProgressBar. To customize the ProgressBar, you need to follow some quite trivial steps: 1. Create an Android project 2. Add a file containing loader (for example res / drawable / loader1.png) to the project 3. Create an animation file (for example res / drawable / loader1_progress.xml )







    1. schemas.android.com/apk/res/android »
    2.   android: drawable = "@ drawable / loader1"
    3.   android: pivotX = "50%"
    4.   android: pivotY = "50%" />

    4. Place the ProgressBar in Activity and tell us to use our animation resource created in the previous step (for example res / layouts /)

    1. schemas.android.com/apk/res/android »
    2.   android: layout_width = "fill_parent"
    3.   android: layout_height = "fill_parent"
    4.   android: orientation = "vertical">  
    5.     
    6.       android: indeterminateDrawable = "@ drawable / loader1_progress"
    7.       android: layout_height = "50dp"
    8.       android: layout_width = "50dp">   
    9.     

    In addition to using ready-made images of loaders, you can also use the android functionality to create a loader manually (for example, /res/drawable/custom_progress.xml)
    Consider the ring shape as an example. Colors are in #aarrggbb format, where aa indicates alpha (transparency).

    1. schemas.android.com/apk/res/android »
    2.   android: pivotX = "50%"
    3.   android: pivotY = "50%">
    4.   
    5.     android: innerRadiusRatio = "5"
    6.     android: thicknessRatio = "6"
    7.     android: useLevel = "false">
    8.     
    9.       android: type = "sweep"
    10.       android: useLevel = "false"
    11.       android: centerY = "0.10"
    12.       android: startColor = "# 0020ffcc"
    13.       android: centerColor = "# 8820ffcc"
    14.       android: endColor = "# ff20ffcc" />
    15.   
    16.     
    17.        android: height = "18dip" />
    18.   


    If we have several images of one ProgressBar,

    then you can use the following method (for example /res/drawable/custom_progress_blue.xml):

    1.  xmlns: android = " schemas.android.com/apk/res/android ">
    2.     
    3.         
    4.     
    5.     
    6.         
    7.     
    8.     
    9.         
    10.     
    11.     
    12.         
    13.     
    14.     
    15.         
    16.     
    17.     
    18.         
    19.     
    20.     
    21.         
    22.     
    23.     
    24.         
    25.     
    26.     
    27.         
    28.     
    29.     
    30.         
    31.     
    32.     
    33.         
    34.     
    35.     
    36.         
    37.     

    Sample code is available on github .
    If you have any suggestions how else you can implement your plan, do not hesitate to write.

    Read Next