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:-
Related
This is the Progress indicator I need.
I took help from this answer. Gradient color Progress Indicator
This is what I achieved so far.
My Progressbar background drawable is:
<?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="#dimen/_11sdp" />
<solid android:color="#color/cultured" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip android:clipOrientation="horizontal">
<shape android:shape="rectangle">
<corners android:radius="#dimen/_11sdp" />
<gradient
android:endColor="#color/colorPrimary"
android:startColor="#color/deep_peach" />
</shape>
</clip>
</item>
</layer-list>
My Progressbar code is:
<ProgressBar
android:id="#+id/viewLinearProgress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="4dp"
android:layout_marginStart="#dimen/_6sdp"
android:layout_marginTop="#dimen/_19sdp"
android:layout_marginEnd="#dimen/_14sdp"
android:progress="60"
android:progressDrawable="#drawable/gradient_progressbar"
app:layout_constraintEnd_toStartOf="#id/tvProgress"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvMessage" />
The only problem is that - only the Progressbar indicator right side rounded corner is not resolved. The track is ok.
This is working
<?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:top="#dimen/size_6" android:bottom="#dimen/size_6">
<shape>
<solid android:color="#B5B6B5"/>
<corners android:radius="100dp" />
</shape>
</item>
<item android:id="#android:id/progress"
android:top="#dimen/size_4" android:bottom="#dimen/size_4">
<clip>
<scale android:scaleWidth="100%" android:scaleHeight="20">
<shape>
<gradient android:endColor="#FF7400" android:startColor="#FFA119" android:angle="180"/>
<corners android:radius="100dp" />
</shape>
</scale>
</clip>
</item>
</layer-list>
Use
<ProgressBar
android:id="#+id/progressbar_insurance"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="#dimen/_14sdp"
android:layout_marginTop="#dimen/_4sdp"
android:indeterminate="false" />
Hope this work for you, let me know if doesn't work... :)
this is my horizontal progress-bar->
<ProgressBar
android:id="#+id/pb"
style="#android:style/Widget.Holo.Light.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tv"
android:hapticFeedbackEnabled="true"
android:progressDrawable="#drawable/point_one_progress"
android:scaleY="0.80" />
this is my point_one_progress.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="12dp"/>
<solid android:color="#cccccc"/>
</shape>
</item>
<item android:id="#android:id/progress"
android:top="4dp"
android:bottom="4dp"
android:left="-1dp"
>
<scale android:scaleWidth="100%">
<shape>
<corners android:radius="12dp"/>
<solid android:color="#color/colorPrimaryDark"/>
</shape>
</scale>
</item>
</layer-list>
i am using horizontal progress-bar display progress based one point for more than 3 value progress coming perfect and within progress-bar but for 1,2,3 progress is coming outside the progress-bar please suggest me how to fix it how to keep progress within progress-bar for 1,2,3 value .
you can see in below image for value 1->
for 10 value you can see screen
Its the issue with ur drawable. remove top , bottom fields from the item tag. Your drawable file should look like this.Also remove scaleY from the progress bar view
<?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="12dp"/>
<gradient
android:startColor="#color/white"
android:endColor= "#color/white"
/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="12dp"/>
<solid android:color="#color/primaryDarkColor"/>
</shape>
</clip>
</item>
</layer-list>
It's issue with drawable padding. You need to make it 0dp for all four sides.
Here is xml code.
<ProgressBar
android:id="#+id/pb"
style="#android:style/Widget.Holo.Light.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:hapticFeedbackEnabled="true"
android:progress="2"
android:progressDrawable="#drawable/point_one_progress" />
Here is corrected drawable.
<?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="12dp" />
<solid android:color="#cccccc" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="12dp" />
<solid android:color="#color/colorPrimaryDark" />
</shape>
</clip>
</item>
</layer-list>
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.
I want to make my progress bar looks something like that:
I dont want to use images, so I have tried to make this with the shapes:
<item android:id="#android:id/background">
<shape>
<corners android:radius="50dp" />
<gradient
android:angle="270"
android:centerColor="#2a2723"
android:centerY="0.75"
android:endColor="#2a2723"
android:startColor="#2a2723" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="50dp" />
<gradient
android:angle="270"
android:centerColor="#16e61c"
android:centerY="0.75"
android:endColor="#9dfd6e"
android:startColor="#16e61c" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="50dp" />
<gradient
android:angle="270"
android:endColor="#9dfd6e"
android:startColor="#16e61c" />
</shape>
</clip>
</item>
But I cant set padding for the green line (Ive tried to set its everywhere where it was possible), and also I can't make such round corners (looks like corners android:radius isn't working). Please help me
<?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>
<solid android:color="#222" />
<corners android:radius="10dp" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<layer-list>
<item>
<color android:color="#00000000" />
</item>
<item
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp">
<shape>
<solid android:color="#00FF00" />
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
</clip>
</item>
</layer-list>
see my blog
A simple workaround is to wrap progress bar into layout which has rounded shape and same background color as progress bar.
Sample progress bar drawable (drawable/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="50dip" />
<solid android:color="#color/white"/>
<padding android:bottom="3dip" android:left="3dip" android:right="3dip" android:top="3dip" />
</shape>
</item>
<item android:id="#android:id/progress">
<bitmap android:src="#drawable/test_progress_bar_progress" android:tileMode="repeat"/>
</item>
</layer-list>
Progress bar style:
<resources>
<style name="ProgressBarStyle" parent="#android:style/Widget.ProgressBar.Horizontal">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">10dip</item>
<item name="android:max">100</item>
<item name="android:progressDrawable">#drawable/progress_bar</item>
</style>
</resources>
Layout shape (drawable/rounded_shape.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<padding android:top="2dip" android:left="2dip" android:right="2dip" android:bottom="2dip"/>
<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" android:topLeftRadius="7dp" android:topRightRadius="7dp"/>
<solid android:color="#color/white"/>
</shape>
Activity layout:
<!-- ... -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_shape"
android:layout_marginLeft="30dip"
android:layout_marginRight="30dip">
<ProgressBar
android:id="#+id/testSummaryProgressBar"
android:progress="10"
style="#style/ProgressBarStyle"/>
</LinearLayout>
<!-- ... -->
Effect:
To increase padding of progress bar you have to increase padding in rounded_shape file.
Yes it's possible to have exactly that without using image like #Nykakin has suggested. To have the padding and the rounded corner for the progress is to use list-layer for the item progress.
<item android:id="#android:id/progress">
<clip>
<layer-list>
<-- transparent background -->
<item>
<color android:color="#00000000" />
</item>
<-- padding -->
<item
android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp">
<shape>
<corners android:radius="50dp" />
<gradient
android:angle="270"
android:endColor="#9dfd6e"
android:startColor="#16e61c" />
</shape>
</item>
</layer-list>
</clip>
Unfortunately I didn't find solution for my problem. The only way I could make round corners was to use rounded 9-pitch image
There is a good tutorial to do that: http://blog.mediarain.com/2011/04/android-custom-progressbar-with-rounded-corners/
Hey,
I just wrote a horizontal progress bar. The progressbar gets this background resource:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/progress_bg" />
</item>
<item android:id="#android:id/progress" android:gravity="center">
<clip>
<shape>
<corners android:radius="5dip" />
<solid android:color="#FFF" />
</shape>
</clip>
</item>
This works fine, but the white progress has the same height as the background. But I want the progress to be smaller than the background of the progress bar, since thre background has a boarder that should not overlap.
Any ideas?
Thanks
There is also :
<item android:id="#android:id/secondaryProgress"></item>
Did you changed it too?
http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
You can try adding android:top, android:left,android:right, and android:bottom to the white progress bar item in order to add padding to the bar.
<item android:id="#android:id/progress" android:gravity="center"
android:top="2dp" android:left="2dp" android:right="2dp" android:bottom="2dp">
<clip>
<shape>
<corners android:radius="5dip" />
<solid android:color="#FFF" />
</shape>
</clip>
</item>
Hi actually I did not use it.
The full xml is:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/progress_bg" />
</item>
<item android:id="#android:id/secondaryProgress" android:gravity="center">
<clip>
<shape>
<corners android:radius="5dip" />
<solid android:color="#FFF" />
</shape>
</clip>
</item>
Cheers
hi try adding stroke that has no color (opacity is max)
I tried this code with my gradient progress bar:
<?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:angle="270"
android:centerColor="#f8d79b"
android:centerY="0.5"
android:endColor="#f8d79b"
android:startColor="#f8d79b" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<stroke
android:width="5px"
android:color="#00ffffff" />
<corners android:radius="10dip" />
<gradient
android:angle="0"
android:endColor="#ffac17"
android:startColor="#ffac17" />
</shape>
</clip>
</item>
</layer-list>
so your code should be like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/progress_bg" />
</item>
<item android:id="#android:id/secondaryProgress" android:gravity="center">
<clip>
<shape>
<stroke
android:width="5px"
android:color="#00ffffff" />
<corners android:radius="5dip" />
<solid android:color="#FFF" />
</shape>
</clip>
</item>
worked for me, hope it works for you :D