How do I round off the end of the progress bar. In the image below is what i currently have. As you can see the border, the start and the end is rounded. I would like to also round off where the progress ends. How can i do that?
My custom_progressbar.xml
<?xml version="1.0" encoding="utf-8"?>
<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>
<corners android:radius="8dp" />
<solid android:color="#color/progressBarStrokeColor" />
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="8dp" />
<gradient
android:angle="180"
android:centerColor="#color/purple_700"
android:centerY="1.0"
android:endColor="#000000"
android:startColor="#color/red" />
</shape>
</clip>
</item>
</layer-list>
Please Try with this I changed the <clip/> tag to <scale/> and I set scaleWidth to 100%:
consult the official documentation
<?xml version="1.0" encoding="utf-8"?>
<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>
<corners android:radius="8dp" />
<solid android:color="#android:color/darker_gray" />
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%">
<shape>
<corners android:radius="8dp" />
<gradient
android:angle="180"
android:centerColor="#color/purple_700"
android:centerY="1.0"
android:endColor="#000000"
android:startColor="#android:color/holo_red_light" />
</shape>
</scale>
</item>
</layer-list>
And this is the output:
Related
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'm using a custom drawable for my progress bar:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="15dp" />
<solid android:color="#color/light_grey" />
</shape>
</item>
<item android:id="#android:id/progress" >
<clip>
<shape>
<corners android:radius="15dp" />
<solid android:color="#color/indigo" />
</shape>
</clip>
</item>
</layer-list>
and it looks like:
Now, the background appears with a round corner, but the progress (inside) is straight, and I want to make it round too, like this:
I googled but didn't find any solution.
Any ideas on how can I achieve this round corner on progress?
Thanks!
you can see example of view here
you can modify the color and size of the thumb and seekbar to do what you want.
This solution was the only way i could do this.
Hope this help
this is my seekbar :
<SeekBar
android:id="#+id/simpleProgressBar"
android:layout_width="fill_parent"
android:layout_height="12dp"
android:max="100"
android:progress="0"
android:background="#null"
android:shape="oval"
android:splitTrack="false"
android:progressDrawable="#drawable/progress_background"
android:secondaryProgress="0"
android:thumbOffset="10dp"
android:thumb="#drawable/oval_seekbar_thumb" />
this is (progress_background.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 android:shape="rectangle">
<corners android:radius="5dp" />
<gradient
android:angle="270"
android:endColor="#color/grey_line"
android:startColor="#color/grey_line" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape android:shape="oval">
<corners android:radius="5dp" />
<gradient
android:angle="270"
android:endColor="#color/blue"
android:startColor="#color/blue" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners android:radius="90dp" />
<gradient
android:angle="90"
android:endColor="#color/colorPrimaryDark"
android:startColor="#color/colorPrimary" />
</shape>
</clip>
</item>
and this is the thumb (oval_seekbar_thumb.xml) :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#ffffff" />
<stroke android:color="#color/colorPrimaryDark" android:width="3dp"/>
<size android:height="12dp" android:width="12dp"/>
</shape>
</item>
</selector>
The height of the thumb should be same as the height of the seekbar to look properly.
Replace the <clip> tag with <scale android:scaleWidth="100%">. This should give the curved edges to secondary progress
I know maybe it is obsolete question,but, just remove <clip> tag.
I need a seek bar which color need this
I made an xml file in drawable and its gradient is set below
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#808080"
android:centerY="0.75"
android:endColor="#808080"
android:startColor="#808080" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="2dip" />
<gradient
android:angle="270"
android:centerColor="#09488D"
android:centerY="0.75"
android:endColor="#09488D"
android:startColor="#09488D" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#09488D"
android:centerY="0.75"
android:endColor="#09488D"
android:startColor="#09488D" />
</shape>
</clip>
</item>
</layer-list>
Then this xml use it in seekbar's background
But the color does not change :(
Include this in seek bar:
<SeekBar
android:progressDrawable="#drawable/progress"
android:thumb="#drawable/thumb"/>
where progress.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"
android:drawable="#drawable/background_fill" />
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/progress_fill" />
</item>
</layer-list>
and thumb.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/thumb_fill" />
</selector>
Also you can refer this link - http://www.mokasocial.com/2011/02/create-a-custom-styled-ui-slider-seekbar-in-android/ and http://www.anddev.org/seekbar_progressbar_customizing-t6083.html
If you want to change the color of the progress you have to provide a 9patch drawable for your progressDrawable.
You can find the one currently being used in android-sdk/platforms/(the-api-your-app-is-targeting)/data/res/drawable/scrubber_primary_holo.9
(that's for api 15)
Ive found that the easiest way is to simple open that image, edit the colors, save the image as a 9patch image and put in your applications /drawable folder.
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