Develop Reference

How to set the secondary color of determinate circular progress bar

I want to change the primary and secondary colors of the determinate progress bar which are green and grey respectively. Android default progress bar does not even show the secondary progress. How can i achieve this? thanks !
<ProgressBar
android:id="#+id/progress_circular"
android:layout_width="256dp"
android:layout_height="256dp"
android:indeterminate="false"
style="?android:attr/progressBarStyleLarge"
android:layout_marginTop="18dp"
app:layout_constraintTop_toBottomOf="#id/textView2"
app:layout_constraintStart_toStartOf="#id/mainView"
android:progress="50"
app:layout_constraintEnd_toEndOf="#id/mainView"
/>

You can create custom progressbar style.
custom_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">
<shape
android:innerRadiusRatio="2.8"
android:shape="ring"
android:useLevel="false"
android:type="sweep"
android:thicknessRatio="18.0">
<solid android:color="#color/red"/>
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="-90"
android:toDegrees="-90">
<shape
android:innerRadiusRatio="2.8"
android:shape="ring"
android:angle="0"
android:type="sweep"
android:thicknessRatio="18.0">
<solid android:color="#color/blue"/>
</shape>
</rotate>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<solid android:color="#color/secondaryColor"/>
</shape>
</clip>
</item>
</layer-list>
and in xml:
<ProgressBar
android:layout_centerInParent="true"
android:id="#+id/winRateProgressBar"
android:layout_width="48dp"
android:layout_height="48dp"
style="?android:attr/progressBarStyleHorizontal"
android:indeterminate="false"
android:max="100"
android:progress="20"
android:progressDrawable="#drawable/custom_progress"/>

To customize progress bar do this
in xml.
<ProgressBar
android:id="#+id/progress_circular"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="256dp"
android:layout_height="256dp"
android:layout_marginTop="18dp"
app:layout_constraintTop_toBottomOf="#id/textView2"
app:layout_constraintStart_toStartOf="#id/mainView"
android:progress="50"
app:layout_constraintEnd_toEndOf="#id/mainView"
android:background="#drawable/circle_shape"
android:indeterminate="false"
android:progressDrawable="#drawable/circular_progress_bar" />
where circle_shape xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="2.5"
android:thickness="1dp"
android:useLevel="false">
<solid android:color="#CCC" /> // use your color here
</shape>
and circular_progress_bar xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thickness="2dp"
android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->
<gradient
android:angle="0"
android:endColor="#ffffff"
android:startColor="#ffffff"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>

Android Circle Button with 4 stripes

I am trying to create a circle button in Android that has 4 diagonal stripes in it.
(Sorry for my poor photo editing skills.
The circle should be full and not cut off as shown.
Tried to use the layer-list and added a background button didn't work.
Any idea how to do it?

1. Create a custom drawable using <layer-list> and <shape> with <rotate> element.
bg_striped_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<size
android:width="200dp"
android:height="200dp" />
<solid
android:color="#android:color/white" />
</shape>
</item>
<!-- RED Stripe -->
<item
android:left="-200dp"
android:bottom="100dp">
<rotate
android:fromDegrees="140">
<shape
android:shape="line">
<stroke android:color="#android:color/holo_red_dark"
android:width="40dp"/>
</shape>
</rotate>
</item>
<!-- GREEN Stripe -->
<item
android:left="-100dp"
android:right="-100dp"
android:bottom="90dp">
<rotate
android:fromDegrees="140">
<shape
android:shape="line">
<size
android:width="200dp" />
<stroke android:color="#android:color/holo_green_dark"
android:width="40dp"/>
</shape>
</rotate>
</item>
<!-- BLUE Stripe -->
<item
android:left="-100dp"
android:right="-100dp"
android:top="90dp">
<rotate
android:fromDegrees="140">
<shape
android:shape="line">
<stroke android:color="#android:color/holo_blue_dark"
android:width="40dp"/>
</shape>
</rotate>
</item>
<!-- ORANGE Stripe -->
<item
android:top="140dp"
android:bottom="-50dp"
android:left="50dp"
android:right="-50dp">
<rotate
android:fromDegrees="140">
<shape
android:shape="line">
<stroke android:color="#android:color/holo_orange_dark"
android:width="40dp"/>
</shape>
</rotate>
</item>
</layer-list>
OUTPUT:
2. For circle shape, you can use 3rd party library CircleImageView and set custom drawable bg_striped_circle using attribute android:src="#drawable/bg_striped_circle".
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:padding="16dp"
android:background="#android:color/darker_gray">
<!-- CIRCLE -->
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/bg_striped_circle"
app:civ_border_width="0dp"
app:civ_border_color="#FFFF" />
<!-- SQUARE -->
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="16dp"
android:src="#drawable/bg_striped_circle" />
</LinearLayout>
OUTPUT:
FYI, I have used different stripe color for better understanding about custom drawable XML.
Hope this will help~

How can I draw circular progress bar as shown in image below?

Progress bar xml is as:
<ProgressBar
android:id="#+id/progressBarCircular"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignTop="#id/squareView_3"
android:layout_toRightOf="#id/squareView_3"
android:layout_marginTop="-105dp"
android:layout_marginLeft="40dp"
android:indeterminate="false"
android:max="100"
android:progress="0"
android:background="#color/BlackText"
android:progressDrawable="#drawable/circular_progressbar" />
circular_progressbar.xml is as:
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/background">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8.0">
<solid android:color="#color/DarkGrey" />
</shape>
</item>
<item android:id="#+id/progress">
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thicknessRatio="12.0">
<solid android:color="#color/green" />
</shape>
</item>
</layer-list>
and for setting progress:
ProgressBar pb = (ProgressBar)view.FindViewById(Resource.Id.progressBarCircular);
pb.Progress = 75;
This is not giving me progress bar as shown below, How can I draw progress bar as below image:
Any help will be heartly appreciated. Thankyou, Happy Coding.

Try this solution, I think you will get your desired output
<?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:angle="0"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#eeeeee" />
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:angle="0"
android:shape="ring"
android:thickness="10dp"
android:useLevel="true">
<solid android:color="#81ca33" />
</shape>
</rotate>
</item>
</layer-list>
And for the rotation, I adjusted attributes in ProgressBar view as:-
<ProgressBar
android:id="#+id/progressBarView"
android:layout_width="200dp"
android:layout_height="200dp"
style="?android:attr/progressBarStyleHorizontal"
android:indeterminateOnly="false"
android:rotation="-90"
android:max="100"
android:progressDrawable="#drawable/circular_progressbar" />

How can I set a custom seekbar's ProgressDrawable size to be smaller than the ProgressBackground

I have a custom seekbar that's not quite working.
I want the seekbar to look like this:
But this is as close as I have been able to get
Ignoring the slight coloring and size issues, the problem I'm having is with the green progress size. Is there some way to make this smaller than the background? I've tried size and padding tags in the XML, and even tried fiddling with two rectangles on top of each other with clip gravity, but no luck yet.
Here is my Seekbar 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 android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#color/fofo_grey" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#color/signup_green" />
</shape>
</clip>
</item>
</layer-list>
And the Seekbar in the layout fragment
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBar"
android:layout_below="#+id/textView6"
android:layout_centerHorizontal="true"
android:splitTrack="false"
android:progressDrawable="#drawable/custom_seekbar"
android:thumb="#drawable/thumb_seekbar"
android:max="100"
android:progress="50"
android:indeterminate="false" />

for change height progress drawble just add android:minHeight="2dp" and android:maxHeight="2dp" to layout.
UPDATE:
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:max="100"
android:minHeight="2dp"
android:maxHeight="2dp"
android:background="#android:color/transparent"
android:progressDrawable="#drawable/sb_progress_drawable"
android:progress="0"
android:secondaryProgress="0"
android:thumbOffset="0dp"
android:thumb="#drawable/sb_thumb" />
sb_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 android:shape="rectangle">
<solid android:color="#26FFFFFF"/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<scale
android:scaleWidth="100%" >
<shape android:shape="rectangle">
<solid android:color="#26FFFFFF"/>
</shape>
</scale>
</item>
<item android:id="#android:id/progress">
<scale
android:scaleWidth="100%" >
<shape android:shape="rectangle">
<solid android:color="#FFFFFF"/>
</shape>
</scale>
</item>
</layer-list>
sb_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<size android:width="20dp" android:height="20dp" />
<solid android:color="#FFFFFF" />
</shape>

<?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="20dp"/>
<solid android:color="#color/fofo_grey" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners android:radius="20dp"/>
<solid android:color="#color/signup_green" />
<stroke android:width="6dp"
android:color="#color/fofo_grey" />
</shape>
</clip>
</item>
</layer-list>
just add stroke attribute in seekbar drawable

Managed to fix this. Can't believe it took me so long to think of the solution...
<clip>
<shape android:shape="rectangle">
<stroke android:color="#color/fofo_grey" android:width="6dp"/>
<corners android:radius="20dp" />
<solid android:color="#color/signup_green" />
</shape>
</clip>
Added a stroke with the same colour as the background element, and tweaked the stroke width to achieve the desired effect.

Background style doesn't show up on Progress Bar

I'm trying to do something like this:
This is what my code does:
I've this code in my drawable file:
progress_bar_layout.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:innerRadius="70dp"
android:shape="ring"
android:thickness="18dp">
</shape>
</item>
<item android:id="#android:id/progress">
<shape
android:innerRadius="70dp"
android:shape="ring"
android:thickness="18dp">
<gradient
android:endColor="#ff0f315f"
android:startColor="#ff005563"
android:type="sweep" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<shape
android:innerRadius="70dp"
android:shape="ring"
android:thickness="18dp">
<gradient
android:endColor="#ff1490e4"
android:startColor="#ff00c0dd"
android:type="sweep" />
</shape>
</item>
</layer-list>
layout:
<ProgressBar
android:id="#+id/bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="180dp"
android:layout_height="180dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:max="100"
android:progress="99"
android:progressDrawable="#drawable/progress_bar_layout"
android:secondaryProgress="30" />
The problem is that my background style doesn't show up. That's why i'm using progress to do background's job, but as you can see, it doesn't work pretty well bcs the maximum size is 99, and there's a space in the end. Am i missing some code?

Basically, i had to split progress_bar_layout.xml drawable file for each element, so, one file with the progress settings, and another for background settings.
And then, i added them to the respective elements.
android:background="#drawable/circle_shape"
android:progressDrawable="#drawable/circular_progress_bar" />
Using layer list, the project didn't find the background setting, so this approach solved my problem.
circle_shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="60dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#color/blue"></solid>
</shape>
circular_progress_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:innerRadius="60dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="true">
<solid android:color="#color/blue"></solid>
</shape>
</rotate>