How to make custom progress bar with indicator image, like whatsapp?

Question

I created an XML file named customprogressbar.xml in your res->drawable folder:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Define the background properties like color etc -->
    <item android:id="@android:id/background">
    <shape>
        <gradient
                android:startColor="#000001"
                android:centerColor="#0b131e"
                android:centerY="1.0"
                android:endColor="#0d1522"
                android:angle="270"
        />
    </shape>
   </item>

  <!-- Define the progress properties like start color, end color etc -->
  <item android:id="@android:id/progress">
    <clip>
        <shape>
            <gradient
                android:startColor="#007A00"
                android:centerColor="#007A00"
                android:centerY="1.0"
                android:endColor="#06101d"
                android:angle="270"
            />
        </shape>
    </clip>
    </item>
</layer-list>

And

<ProgressBar
    android:id="@+id/progressBar1"
    style="?android:attr/progressBarStyleHorizontal"
    android:progressDrawable="@drawable/custom_progressbar"         
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Now I have the colors but I need to put indicator image, between in fill and remainig.

Any idea?

What exactly are you considering the indicator image to be? which indicator for what? — Nick Cardoso, Feb 23 '16 at 11:04
If you see the screenshot, you can see a point between in fill and remainig. — Cabezas, Feb 23 '16 at 11:07

score 7 · Accepted Answer · answered Feb 23 '16 at 11:11

7

What you are looking at is a Seekbar rather than a plain Progressbar. The circle indicator is called a thumb and you can add any image you like (as well as a custom progress bar also).

<SeekBar ...
    android:thumb="@drawable/your_thumb"
    android:progressDrawable="@drawable/progress_bar_layers"
 />

answered Feb 23 '16 at 11:11

Nick Cardoso

20,807
14
73
124

2

Thank you very much. That's perfect. I have to make a custom seekBar http://stackoverflow.com/questions/16163215/android-styling-seek-bar – Cabezas Feb 23 '16 at 11:16

score 1 · Answer 2 · answered Feb 23 '16 at 11:17

If "indicator image" means that round circle there, then I'm not sure if this can be done with ProgressBar.

This looks to me more like a SeekBar then a ProgressBar. They are practically the same except, SeekBar has the "thumb" attribute. This could work for you:

<SeekBar
   android:id="@+id/seekBar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:thumb="@drawable/thumb_image"
   android:progressDrawable="@drawable/customprogressbar.xml"
/>

How to make custom progress bar with indicator image, like whatsapp?

2 Answers2