How to create Custom Horizontal progress bar

Question

Please help to create horizontal progress bar like this enter image description here

here is a PSD file http://goo.gl/ANcyhs – Amon Olimov Nov 30 '13 at 23:09 — Amon Olimov, Nov 30 '13 at 23:09

score 41 · Answer 1 · edited May 23 '17 at 12:33

Set style for horizontal progress bar

        style="?android:attr/progressBarStyleHorizontal"

Create custom progress drawable: green_progress_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape>
        <corners android:radius="5dip" />
        <gradient
            android:startColor="#779d9e9d"
            android:centerColor="#995a5d5a"
            android:centerY="0.75"
            android:endColor="#ff747674"
            android:angle="270"
            />
    </shape>
</item>

<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:startColor="#80ffd300"
                android:centerColor="#80ffb600"
                android:centerY="0.75"
                android:endColor="#a0ffcb00"
                android:angle="270"
                />
        </shape>
    </clip>
</item>
<item
    android:id="@android:id/progress"
    >
    <clip>
        <shape>
            <corners
                android:radius="5dip" />
            <gradient
                android:startColor="#33FF33"
                android:endColor="#008000"
                android:angle="270" />
        </shape>
    </clip>
</item>
</layer-list>

My progressbar code:

 <ProgressBar
        android:progressDrawable="@drawable/green_progress_drawable"
        style="?android:attr/progressBarStyleHorizontal"

        android:id="@+id/mf_progress_bar"
        app:layout_widthPercent="80%"
        app:layout_heightPercent="8%"
        app:layout_marginTopPercent="5%"
        android:layout_gravity="center_horizontal"
        />

Code credit to @Ryan https://stackoverflow.com/a/5745923/3879847

My output:

I hope this post maybe helpful for someone..

You forgot to close layer-list tag in green_progress_drawable.xml — Alvi, Dec 01 '16 at 07:47

score 7 · Accepted Answer · answered Dec 01 '13 at 00:30

7

You do not need a custom progress bar. Use style="@android:style/Widget.ProgressBar.Horizontal" in your layout xml file. You will also need to use ProgressBar.incrementProgressBy(int progress);

See Android Developers|ProgressBar

answered Dec 01 '13 at 00:30

alpacahaircut

337
1
3
11

4

You may also want to look here: [Android change Horizonal Progress bar color](http://stackoverflow.com/questions/5745814/android-change-horizonal-progress-bar-color) – alpacahaircut Dec 01 '13 at 00:35

How to create Custom Horizontal progress bar

2 Answers2

Linked