How to Customize a Progress Bar In Android

Question

I am working on an app in which I want to show a ProgressBar  but I want to replace the default Android ProgressBar   So how can I customize the ProgressBar   Do I need some graphics and animation for that   I read the following post but could not get it to work   Custom Progress bar Android

User · Answer

Creating Custom ProgressBar like hotstar.

Add Progress bar on layout file and set the indeterminateDrawable with drawable file.

activity_main.xml

<ProgressBar
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/player_progressbar"
    android:indeterminateDrawable="@drawable/custom_progress_bar"
    />

Create new xml file in res\drawable

custom_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
    <rotate  xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="1080" >

    <shape
        android:innerRadius="35dp"
        android:shape="ring"
        android:thickness="3dp"
        android:useLevel="false" >
       <size
           android:height="80dp"
           android:width="80dp" />

       <gradient
            android:centerColor="#80b7b4b2"
            android:centerY="0.5"
            android:endColor="#f4eef0"
            android:startColor="#00938c87"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

User · Answer

If you want to do this in code  here is a sample   pd   new ProgressDialog MainActivity this   pd setProgressStyle ProgressDialog STYLE SPINNER   pd getWindow   setBackgroundDrawable new ColorDrawable Color TRANSPARENT    pd getWindow   setGravity Gravity CENTER HORIZONTAL Gravity CENTER VERTICAL   TextView tv   new TextView this   tv setTextColor Color WHITE   tv setTextSize 20   tv setText  Waiting       pd setCustomTitle tv   pd setIndeterminate true   pd show      Using TextView gives you an option to change color  size  and font of your text  Otherwise you can just call setMessage    as usual

User · Answer

in your xml   lt ProgressBar         android id    id progressBar1          android layout width  fill parent          android layout height  wrap content          style   style CustomProgressBar           android layout margin  5dip    gt    And in res values styles xml    lt resources gt            lt style name  CustomProgressBar  parent  android Widget ProgressBar Horizontal  gt             lt item name  android indeterminateOnly  gt false lt  item gt             lt item name  android progressDrawable  gt  drawable custom progress bar horizontal lt  item gt             lt item name  android minHeight  gt 10dip lt  item gt             lt item name  android maxHeight  gt 20dip lt  item gt           lt  style gt              lt style name  AppTheme  parent  android Theme Light    gt   lt  resources gt    And custom progress bar horizontal is a xml stored in drawable folder which defines your custom progress bar  For more detail see this blog   I hope this will help you

User · Answer

Customizing the color of progressbar namely in case of spinner type needs an xml file and initiating codes in their respective java files   Create an xml file and name it as progressbar xml   lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      xmlns tools  http   schemas android com tools      android layout width  wrap content      android layout height  wrap content      android gravity  center      tools context   Radio Activity   gt        lt LinearLayout         android id    id progressbar          android layout width  wrap content          android layout height  wrap content   gt            lt ProgressBar             android id    id spinner              android layout width  wrap content              android layout height  wrap content   gt           lt  ProgressBar gt       lt  LinearLayout gt    lt  LinearLayout gt    Use the following code to get the spinner in various expected color Here we use the hexcode to display spinner in blue color   Progressbar spinner    ProgressBar  progrees findViewById R id spinner   spinner getIndeterminateDrawable   setColorFilter Color parseColor   80DAEB                    android graphics PorterDuff Mode MULTIPLY

User · Answer

Simplest way to create customize a progress bar in Android    Initialize and show dialog   MyProgressDialog progressdialog   new MyProgressDialog getActivity     progressdialog show     Create method   public class MyProgressDialog extends AlertDialog         public MyProgressDialog Context context              super context             getWindow   setBackgroundDrawable new ColorDrawable android graphics Color TRANSPARENT                    Override       public void show               super show              setContentView R layout dialog progress              Create layout XML    lt RelativeLayout xmlns android  http   schemas android com apk res android    xmlns tools  http   schemas android com tools    android layout width  match parent    android layout height  match parent    android background   android color transparent    android clickable  true  gt        lt RelativeLayout          android layout width  wrap content           android layout height  wrap content           android layout centerInParent  true  gt          lt ProgressBar          android id    id progressbarr           android layout width   dimen eightfive           android layout height   dimen eightfive           android layout centerInParent  true          android indeterminateDrawable   drawable progresscustombg    gt          lt TextView          android layout width  wrap content           android layout height  wrap content           android layout centerHorizontal  true           android layout below    id progressbarr           android layout marginTop   dimen  3sdp           android textColor   color white           android text  Please wait   gt       lt  RelativeLayout gt   lt  RelativeLayout gt   Create shape progresscustombg xml and put res drawable     lt  xml version  1 0  encoding  utf-8   gt   lt rotate xmlns android  http   schemas android com apk res android    android fromDegrees  0    android pivotX  50     android pivotY  50     android toDegrees  360   gt        lt shape        android innerRadiusRatio  3         android shape  ring         android thicknessRatio  20         android useLevel  false   gt           lt size             android height   dimen eightfive              android width   dimen eightfive    gt            lt gradient             android centerY  0 50              android endColor   color color green icash              android startColor   FFFFFF              android type  sweep              android useLevel  false    gt       lt  shape gt    lt  rotate gt

User · Answer

There are two types of progress bars called determinate progress bar  fixed duration  and indeterminate progress bar  unknown duration     Drawables for both of types of progress bar can be customized by defining drawable as xml resource  You can find more information about progress bar styles and customization at http   www zoftino com android-progressbar-and-custom-progressbar-examples   Customizing fixed or horizontal progress bar    Below xml is a drawable resource for horizontal progress bar customization     lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item android id   android id background          android gravity  center vertical fill horizontal  gt           lt shape android shape  rectangle              android tint   attr colorControlNormal  gt               lt corners android radius  8dp   gt               lt size android height  20dp    gt               lt solid android color   90caf9    gt           lt  shape gt       lt  item gt       lt item android id   android id progress          android gravity  center vertical fill horizontal  gt           lt scale android scaleWidth  100   gt               lt shape android shape  rectangle                  android tint   attr colorControlActivated  gt                   lt corners android radius  8dp   gt                   lt size android height  20dp    gt                   lt solid android color   b9f6ca    gt               lt  shape gt           lt  scale gt       lt  item gt   lt  layer-list gt    Customizing indeterminate progress bar  Below xml is a drawable resource for circular progress bar customization     lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt       lt item android id   android id progress          android top  16dp          android bottom  16dp  gt                   lt rotate                     android fromDegrees  45                      android pivotX  50                       android pivotY  50                       android toDegrees  315  gt                       lt shape android shape  rectangle  gt                           lt size                             android width  80dp                              android height  80dp    gt                           lt stroke                             android width  6dp                              android color   b71c1c    gt                       lt  shape gt                   lt  rotate gt                  lt  item gt   lt  layer-list gt

User · Answer

Customizing a ProgressBar requires defining the attribute or properties for the background and progress of your progress bar   Create an XML file named customprogressbar xml in your res- gt drawable folder   custom progressbar xml   lt layer-list xmlns android  http   schemas android com apk res android  gt        lt  -- Define the background properties like color etc -- gt       lt item android id   android id background  gt       lt shape gt           lt gradient                 android startColor   000001                  android centerColor   0b131e                  android centerY  1 0                  android endColor   0d1522                  android angle  270            gt       lt  shape gt      lt  item gt      lt  -- Define the progress properties like start color  end color etc -- gt     lt item android id   android id progress  gt       lt clip gt           lt shape gt               lt gradient                 android startColor   007A00                  android centerColor   007A00                  android centerY  1 0                  android endColor   06101d                  android angle  270                gt           lt  shape gt       lt  clip gt       lt  item gt   lt  layer-list gt     Now you need to set the progressDrawable property in customprogressbar xml  drawable   You can do this in the XML file or in the Activity  at run time    Do the following in your XML    lt ProgressBar     android id    id progressBar1      style   android attr progressBarStyleHorizontal      android progressDrawable   drawable custom progressbar               android layout width  wrap content      android layout height  wrap content    gt    At run time do the following     Get the Drawable custom progressbar                          Drawable draw res getDrawable R drawable custom progressbar      set the drawable as progress drawable     progressBar setProgressDrawable draw     Edit  corrected xml layout

User · Answer

In case of complex ProgressBar like this     use ClipDrawable       NOTE   I ve not used ProgressBar here in this example  I ve achieved   this using ClipDrawable by clipping image with Animation    A Drawable that clips another Drawable based on this Drawable s current level value  You can control how much the child Drawable gets clipped in width and height based on the level  as well as a gravity to control where it is placed in its overall container  Most often used to implement things like progress bars  by increasing the drawable s level with setLevel        NOTE   The drawable is clipped completely and not visible when the level is 0   and fully revealed when the level is 10 000    I ve used this two images to make this CustomProgressBar   scall png    ballon progress png    MainActivity java  public class MainActivity extends ActionBarActivity    private EditText etPercent  private ClipDrawable mImageDrawable      a field in your class private int mLevel   0  private int fromLevel   0  private int toLevel   0   public static final int MAX LEVEL   10000  public static final int LEVEL DIFF   100  public static final int DELAY   30   private Handler mUpHandler   new Handler    private Runnable animateUpImage   new Runnable           Override     public void run             doTheUpAnimation fromLevel  toLevel             private Handler mDownHandler   new Handler    private Runnable animateDownImage   new Runnable           Override     public void run             doTheDownAnimation fromLevel  toLevel              Override protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout activity main        etPercent    EditText  findViewById R id etPercent        ImageView img    ImageView  findViewById R id imageView1       mImageDrawable    ClipDrawable  img getDrawable        mImageDrawable setLevel 0      private void doTheUpAnimation int fromLevel  int toLevel        mLevel    LEVEL DIFF      mImageDrawable setLevel mLevel       if  mLevel  lt   toLevel            mUpHandler postDelayed animateUpImage  DELAY         else           mUpHandler removeCallbacks animateUpImage           MainActivity this fromLevel   toLevel           private void doTheDownAnimation int fromLevel  int toLevel        mLevel -  LEVEL DIFF      mImageDrawable setLevel mLevel       if  mLevel  gt   toLevel            mDownHandler postDelayed animateDownImage  DELAY         else           mDownHandler removeCallbacks animateDownImage           MainActivity this fromLevel   toLevel           public void onClickOk View v        int temp level     Integer parseInt etPercent getText   toString       MAX LEVEL    100       if  toLevel    temp level    temp level  gt  MAX LEVEL            return            toLevel    temp level  lt   MAX LEVEL    temp level   toLevel      if  toLevel  gt  fromLevel               cancel previous process first         mDownHandler removeCallbacks animateDownImage           MainActivity this fromLevel   toLevel           mUpHandler post animateUpImage         else              cancel previous process first         mUpHandler removeCallbacks animateUpImage           MainActivity this fromLevel   toLevel           mDownHandler post animateDownImage               activity main xml   lt LinearLayout xmlns android  http   schemas android com apk res android  xmlns tools  http   schemas android com tools  android layout width  match parent  android layout height  match parent  android paddingLeft  16dp  android paddingRight  16dp  android paddingTop  16dp  android paddingBottom  16dp  android orientation  vertical  tools context   MainActivity  gt    lt LinearLayout     android layout width  match parent      android layout height  wrap content      android orientation  horizontal  gt        lt EditText         android id    id etPercent          android layout width  0dp          android layout height  wrap content          android layout weight  1          android inputType  number          android maxLength  3    gt        lt Button         android layout width  wrap content          android layout height  wrap content          android text  Ok          android onClick  onClickOk    gt    lt  LinearLayout gt    lt FrameLayout     android layout width  wrap content      android layout height  wrap content      android layout gravity  center  gt        lt ImageView         android id    id imageView2          android layout width  match parent          android layout height  match parent          android src   drawable scall    gt        lt ImageView         android id    id imageView1          android layout width  wrap content          android layout height  wrap content          android src   drawable clip source    gt    lt  FrameLayout gt      clip source xml   lt  xml version  1 0  encoding  utf-8   gt   lt clip xmlns android  http   schemas android com apk res android      android clipOrientation  vertical      android drawable   drawable ballon progress      android gravity  bottom    gt    In case of complex HorizontalProgressBar just change cliporientation in clip source xml like this   android clipOrientation  horizontal    You can download complete demo from here

User · Answer

For using custom drawable    lt  xml version  1 0  encoding  utf-8   gt   lt rotate xmlns android  http   schemas android com apk res android  android fromDegrees  0  android toDegrees  360  android drawable   drawable my drawable  android pivotX  50   android pivotY  50     gt     add under res drawable progress xml   my drawable may be xml  png  Then in your layout use   lt ProgressBar         android id    id progressBar          android indeterminateDrawable   drawable progress circle        gt

[android] How to Customize a Progress Bar In Android

Examples related to android

Examples related to android-progressbar