Android progress indicator with add-on

Question

I want my progress bar to look something like this:

I do not want to use images, so I tried to do this using 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 can’t install the add-on for the green line (Ive tried to install it wherever possible), and I can’t make such round corners (it looks like the corners android:radius not working). Please help me

Answer 1

A simple workaround is to wrap the progress bar in a layout that has a rounded shape and the same background color as the progress bar.

Example progress bar (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> 

Execution 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 Form (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> 

Action Scheme:

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

The effect:

To increase the filling of the progress bar, you need to increase the indentation in the rounded_shape file.

Answer 2

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

Answer 3

Yes, perhaps it’s for sure that without using an image, as N. Nikakin suggested. In order to have padding and a rounded corner , to achieve progress you should use the list layer to advance the item.

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

Answer 4

Unfortunately, I did not find a solution to my problem. The only way to make round corners is to use a 9-step rounded image.

There is a good tutorial for this: http://blog.mediarain.com/2011/04/android-custom-progressbar-with-rounded-corners/