Develop Reference

Progress bar with rounded corners?

I am trying to achieve this progress bar design:
The current code that I have produces this:
This is the code:
<item android:id="#android:id/background">
<shape>
<corners android:radius="8dp"/>
<solid android:color="#color/dirtyWhite"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="8dp"/>
<solid android:color="#color/colorPrimaryDark"/>
</shape>
</clip>
</item>
My progress bar:
<ProgressBar
android:id="#+id/activeProgress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:progress="10"
android:progressDrawable="#drawable/rounded_corners_progress_bar"/>
I tried adding <size> attribute on the <shape> in <clip to make the progress shape a bit smaller but it did not work. Also, the progress bar is flat and I want to be curved as per design. What I need to change in order to achieve the design?

How to make the progress shape a bit smaller?
You need to give the progress item a little padding, like so:
<item android:id="#android:id/progress"
android:top="2dp"
android:bottom="2dp"
android:left="2dp"
android:right="2dp">
How to make the progress bar to be curved as per design?
Replace the <clip></clip> element, with <scale android:scaleWidth="100%"></scale>. That will make the shape keep its form as it grows - and not cut off.
Unfortunately, it will have a little unwanted visual effect at the beginning - as the shape corners don't have enough space to draw. But it might be good enough for most cases.
Full code:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="8dp"/>
<solid android:color="#color/dirtyWhite"/>
</shape>
</item>
<item android:id="#android:id/progress"
android:top="1dp"
android:bottom="1dp"
android:left="1dp"
android:right="1dp">
<scale android:scaleWidth="100%">
<shape>
<corners android:radius="8dp"/>
<solid android:color="#color/colorPrimaryDark"/>
</shape>
</scale>
</item>
</layer-list>

With the Material Components Library you can use the LinearProgressIndicator and the app:trackCornerRadius attribute.
Something like:
<com.google.android.material.progressindicator.LinearProgressIndicator
android:indeterminate="true"
app:trackThickness="xxdp"
app:trackCornerRadius="xdp"/>
It works also for the determinate progress indicator removing the android:indeterminate="true" or using android:indeterminate="false"
Note: it requires at least the version 1.3.0.

Thanks to Georgi Koemdzhiev for a nice question and images. For those who want to make similar to his, do the following.
1) Create a background for a ProgressBar.
progress_bar_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<corners android:radius="3dp" />
<stroke android:color="#color/white" android:width="1dp" />
</shape>
2) Create a scale for the ProgressBar.
curved_progress_bar.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="2dp" />
<solid android:color="#color/transparent" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="2dp" />
<solid android:color="#ffff00" />
</shape>
</clip>
</item>
</layer-list>
3) In layout file add the ProgressBar.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="6dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:background="#drawable/progress_bar_background"
>
<ProgressBar
android:id="#+id/progress_bar"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_margin="1dp"
android:indeterminate="false"
android:progressDrawable="#drawable/curved_progress_bar"
/>
</FrameLayout>

You can achieve progress bar with both inner progress color ,border
color,empty progress with transparent color.
<?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="15dip" />
<stroke android:width="1dp" android:color="#color/black" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#color/black"
android:centerColor="#color/trans"
android:centerY="0.75"
android:endColor="#color/black"
android:angle="270"
/>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
>
<clip>
<shape>
<corners
android:radius="5dip" />
<gradient
android:startColor="#color/black"
android:endColor="#color/black"
android:angle="270" />
</shape>
</clip>
</item>
</layer-list>

<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="#+id/pb_team2"
android:layout_width="0dp"
android:layout_height="8dp"
android:layout_marginStart="55dp"
android:layout_marginEnd="15dp"
app:trackColor="#E0E0E0"
app:trackCornerRadius="6dp"
app:trackThickness="8dp"
android:progress="2"
app:indicatorColor="#color/red"
android:scaleX="-1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/tv_versus"
app:layout_constraintTop_toBottomOf="#id/tv_team2_score" />

add material dependencies in build.gradle(Module)
implementation 'com.google.android.material:material:1.6.0'
come back at activity_main.xml. Add
<com.google.android.material.progressindicator.LinearProgressIndicator>
...
app:trackCornerRadius="3dp"
</com.google.android.material.progressindicator.LinearProgressIndicator>
Hope it will do your work.

You can create a custom progressbar with Drawable.
1) create first drawable as a custom_progress_bar_horizontal.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>
<padding
android:bottom="2dip"
android:left="2dip"
android:right="2dip"
android:top="2dip" />
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#80385682"
android:centerY="0.50"
android:endColor="#80577AAF"
android:startColor="#80222F44" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="90"
android:endColor="#FF1997E1"
android:startColor="#FF0E75AF" />
</shape>
</clip>
</item>
</layer-list>
2) Create style in style.xml file.
<style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">#drawable/custom_progress_bar_horizontal</item>
<item name="android:minHeight">10dip</item>
<item name="android:maxHeight">20dip</item>
</style>
3) Use anywhere in your project.
<ProgressBar
android:id="#+id/mProgressBar"
style="#style/CustomProgressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Output:-

Progress bar does not fit the background drawable

I'm working on a horizontal progress bar and the progress does not seem to be fitting the drawable image. It starts after like 5dp.
This is my code.
<SeekBar
style="?android:attr/progressBarStyleHorizontal"
android:id="#+id/progress_bar"
android:layout_width="1070dp"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_gravity="center_vertical"
android:layout_weight="0.33"
android:background="#drawable/progress_bar"
android:max="100"
android:progressDrawable="#drawable/seekbar_style" />
My seekbar style.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="4dip" />
<gradient
android:angle="270"
android:endColor="#ff0a75b0"
android:startColor="#ff0a75b0" />
</shape>
</clip>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="4dip" />
<gradient
android:angle="270"
android:endColor="#ff0a75b0"
android:startColor="#ff0a75b0" />
</shape>
</clip>
</item>
What am I doing wrong?

Try this:
<SeekBar
android:id="#+id/slider"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:max="100"
android:progress="0"
android:progressDrawable="#drawable/progress_drawable" />
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="10dip" />
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
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
android:clipOrientation="horizontal"
android:gravity="left">
<shape>
<corners
android:radius="5dip" />
<gradient
android:startColor="#color/greenStart"
android:centerColor="#color/greenMid"
android:centerY="0.75"
android:endColor="#color/greenEnd"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>

How to set progressbar background

I have set the progressbar style using the below code.
I have declared the progressbar widget:
<ProgressBar
android:id="#+id/loadProgress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="20dip"
android:max="100"
android:progressDrawable="#drawable/load_progress"
android:progress="0" />
defined the "#drawable/load_progress"
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#android:id/background"
android:drawable="#drawable/background_bk">
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/progress_bk">
</item>
</layer-list>
defined the "#drawable/background_bk" (it is red)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="0"
android:endColor="#ff0000"
android:startColor="#ff0990" />
<stroke
android:width="1dp"
android:color="#ff0000" />
</shape>
defined the #drawable/progress_bk (it is green)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="0"
android:endColor="#00ff00"
android:startColor="#00ff00" />
<stroke
android:width="1dp"
android:color="#00ff00" />
</shape>
The progressbar always shows totally green (which is how it should appear when the progress value is 100), even if I set the progress value to less than 100. Any input would be appreciated.

Here is what I did to have a progress bar that was green with clear background:
android:background="#color/white"
android:progressBackgroundTint="#color/white"
android:progressTint="#color/green_light"

Finally, I find a easy solution.
1
you can find the default drawable xml file in your folder
"SDK_path\platforms\android19\data\res\drawable"
Overthere you can find many default style of many widgets.
2
and get the file "progress_horizontal.xml".
the codes in that file is:
<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="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
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="#ffffd300"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
3
you can easily change the color of the "progress color" and "background color".

How to create Custom Horizontal progress bar

Please help to create horizontal progress bar like this

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 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

Progressbar with three sections in Android

I have figured out that we can set a secondary progress for a progress bar in android by defining a custom style like following xml code:
res/drawable/custom_profressbar_horizontal.xml:
<?xml version="1.0" encoding="UTF-8"?>![enter image description here][1]
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#android:id/background">
<shape>
<corners android:radius="15dip" />
<gradient
android:startColor="#ffffffff"
android:centerColor="#ffdddddd"
android:centerY="0.50"
android:endColor="#ffffffff"
android:angle="270" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="15dip" />
<solid android:color="#ec3910"/>
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="15dip" />
<gradient android:startColor="#ff0e75af"
android:endColor="#ff1997e1"
android:angle="90" />
</shape>
</clip>
</item>
</layer-list>
and in the layout of my Activity i have this:
activity_maib.xml:
<ProgressBar
style="#style/CustomProgressBar"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:layout_margin="7dp"
android:max="100"
android:progress="50"
android:secondaryProgress="80" />
and i have this progress bar:
But i need to have a third progress. how can i do this?
Thanx in advance.