Is there any way to create circle with gradient like this ?
As far as i get is this:
<shape
android:innerRadiusRatio="3"
android:thicknessRatio="10"
android:shape="ring">
<gradient
android:endColor="#color/cyan_dark"
android:startColor="#color/red"
android:type="radial"
android:gradientRadius="340"
android:centerX="50%"
android:centerY="0" />
</shape>
XML
<ProgressBar
android:id="#+id/yourId"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="89dp"
android:layout_height="89dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:max="100"
android:progress="70"
android:progressDrawable="#drawable/shapering" />
shapering drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="10" >
<gradient
android:centerColor="#D6DE47"
android:centerX="50%"
android:centerY="0"
android:endColor="#DE47A7"
android:gradientRadius="340"
android:startColor="#6D47DE"
android:type="sweep" />
</shape>
Result
use this
<ProgressBar
android:id="#+id/progressWheel"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="152dp"
android:layout_height="152dp"
android:layout_centerInParent="true"
android:progress="100"
android:indeterminate="false"
android:progressDrawable="#drawable/circular_progress_bar" />
in drawable circular_progress_bar (change color according to your need)
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:toDegrees="270"
android:pivotX="50%"
android:pivotY="50%" >
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thicknessRatio="25.0" >
<gradient
android:centerColor="#color/red"
android:endColor="#color/gray"
android:startColor="#color/gray"
android:type="sweep" />
</shape>
</rotate>
</item>
<item android:id="#android:id/secondaryProgress">
<rotate
android:fromDegrees="270"
android:toDegrees="270"
android:pivotX="50%"
android:pivotY="50%" >
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thicknessRatio="25.0" >
<gradient
android:centerColor="#color/green"
android:endColor="#color/green"
android:startColor="#color/green"
android:type="sweep" />
</shape>
</rotate>
</item>
</layer-list>
use this
<ProgressBar
android:id="#+id/progressWheel"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="152dp"
android:layout_height="152dp"
android:layout_centerInParent="true"
android:progress="100"
android:indeterminate="false"
android:progressDrawable="#drawable/circular_progress_bar" />
in drawable circular_progress_bar (change color according to your need)
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:toDegrees="270"
android:pivotX="50%"
android:pivotY="50%" >
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thicknessRatio="25.0" >
<gradient
android:centerColor="#color/red"
android:endColor="#color/gray"
android:startColor="#color/gray"
android:type="sweep" />
</shape>
</rotate>
</item>
<item android:id="#android:id/secondaryProgress">
<rotate
android:fromDegrees="270"
android:toDegrees="270"
android:pivotX="50%"
android:pivotY="50%" >
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thicknessRatio="25.0" >
<gradient
android:centerColor="#color/green"
android:endColor="#color/green"
android:startColor="#color/green"
android:type="sweep" />
</shape>
</rotate>
</item>
</layer-list>
You should use type="sweep" instead of "radial" to create gradient like on the pic. For example:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="7.0">
<gradient
android:startColor="#FF0000"
android:centerColor="#00FF00"
android:endColor="#0000FF"
android:type="sweep" />
</shape>
</item>
Related
I have a progress bar, it looks like in image 1 and it should look like image 2. Below is my code for the progress bar. Please advise how to do that. Attached images are links cause it won't allow me to upload images directly.
MyProgressBar
Requirement
Below is the code in Layout:
<ProgressBar
android:id="#+id/percentage_circle"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="161dp"
android:layout_height="161dp"
android:max="100"
android:progress="0"
android:progressDrawable="#drawable/xml_custom_circular_progress" />
Below is the code in drawable
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background" >
<shape
android:innerRadiusRatio="2.5"
android:thicknessRatio="25"
android:shape="ring"
android:useLevel="false">
<solid android:color="#color/black_50" />
<stroke android:color="#color/text_white"/>
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:toDegrees="270"
android:pivotX="50%"
android:pivotY="50%" >
<shape
android:innerRadiusRatio="2.5"
android:thicknessRatio="25"
android:shape="ring"
>
<gradient
android:endColor="#color/history_graph_gradient_end"
android:angle="90"
android:startColor="#color/history_graph_gradient_start"
android:centerColor="#0033C2"
android:type="sweep" />
</shape>
</rotate>
</item>
<item android:id="#android:id/secondaryProgress">
<rotate
android:fromDegrees="270"
android:toDegrees="270"
android:pivotX="50%"
android:pivotY="50%" >
<shape
android:innerRadiusRatio="2.5"
android:thicknessRatio="25"
android:shape="ring"
>
<gradient
android:endColor="#color/history_graph_gradient_end"
android:angle="90"
android:startColor="#color/history_graph_gradient_start"
android:centerColor="#0033C2"
android:type="sweep" />
</shape>
</rotate>
</item>
</layer-list>
I don't have inner borders showing up and the background of the progressbar. I really need help with it.
I would like to fill the inside of a circular progress bar without any external library. I have already create a custom circular progress to handle background/progress/secondaryProgress, but now I want to fill the inside of the ring with an oval.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/backgroundCenter">
<shape android:shape="oval">
<solid android:color="#color/orange_dark" />
</shape>
</item>
<item android:id="#android:id/background">
<!--Background progress-->
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="15"
android:useLevel="false">
<solid android:color="#color/light_grey" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="15"
android:useLevel="true">
<gradient
android:centerColor="#999999"
android:endColor="#999999"
android:startColor="#999999"
android:type="sweep" />
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="15"
android:useLevel="true">
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
<solid android:color="#color/cyan_light" />
</shape>
</rotate>
</item>
</layer-list>
layout :
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">
<ProgressBar
android:id="#+id/statusProgressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="50dp"
android:layout_height="50dp"
android:backgroundTint="#CCC"
android:max="100"
android:progress="50"
android:progressDrawable="#drawable/circular_progress"
android:progressTint="#color/red"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
But the result is (ovale is bigger than the ring):
I can't add any white stroke to hide the oval because I need transparence arround the ring.
I solve the issue if someone has the same problem, I play with ratio to make the ring just at the border of the ovale :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingBottom="20dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="20dp">
<item
android:id="#+id/backgroundCenter">
<shape android:shape="oval">
<solid android:color="#color/orange_dark" />
</shape>
</item>
<item android:id="#android:id/background">
<!--Background-->
<shape
android:innerRadiusRatio="2.31"
android:shape="ring"
android:thicknessRatio="15"
android:useLevel="false">
<solid android:color="#CCC" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<shape
android:innerRadiusRatio="2.31"
android:shape="ring"
android:thicknessRatio="15"
android:useLevel="true">
<gradient
android:centerColor="#999999"
android:endColor="#999999"
android:startColor="#999999"
android:type="sweep" />
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270">
<shape
android:innerRadiusRatio="2.31"
android:shape="ring"
android:thicknessRatio="15"
android:useLevel="true">
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
<solid android:color="#000" />
</shape>
</rotate>
</item>
</layer-list>
I want to create a circular progress bar for that I created a drawable, but I can't integrate a background color for the unprogressed part.
this is the drawable code :
<?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 xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="3"
android:shape="ring"
android:thickness="8dp"
android:useLevel="true">
<solid android:color="#color/second_grey"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thickness="8dp"
android:useLevel="true">
<gradient android:type="sweep"
android:useLevel="false"
android:startColor="#color/blue"
android:centerColor="#color/green"
android:endColor="#color/magenta"
android:angle="0"/>
</shape>
</clip>
</item>
</layer-list>
Background view not displaying properly.
Change android:useLevel to false in first shape:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="3"
android:shape="ring"
android:thickness="8dp"
android:useLevel="false">
<solid android:color="#color/second_grey" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thickness="8dp"
android:useLevel="true">
<gradient
android:angle="0"
android:centerColor="#color/green"
android:endColor="#color/magenta"
android:startColor="#color/blue"
android:type="sweep"
android:useLevel="false" />
</shape>
</clip>
</item>
</layer-list>
Try this
<?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="3"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="false">
<solid android:color="#color/colorLightOrange" />
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="true">
<solid android:color="#color/colorOrange" />
</shape>
</rotate>
</item>
</layer-list>
XML
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<ProgressBar
android:id="#+id/cmll_progrssbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="70dp"
android:layout_height="70dp"
android:indeterminate="false"
android:layoutDirection="rtl"
android:max="100"
android:progress="100"
android:progressDrawable="#drawable/circle_progressbar" />
<TextView
android:id="#+id/cmll_completed_per"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/cmll_progrssbar"
android:layout_alignLeft="#id/cmll_progrssbar"
android:layout_alignRight="#id/cmll_progrssbar"
android:layout_alignTop="#id/cmll_progrssbar"
android:layout_gravity="center"
android:gravity="center"
android:padding="10dp"
android:text="100%" />
</RelativeLayout>
I'm trying to get my progress circle to have rounded edges but it seems like the corner radius attribute does not do anything.
What I have
What I want
content_main.xml:
<ProgressBar
android:id="#+id/circularProgressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_marginTop="16dp"
android:indeterminate="false"
android:max="500"
android:onClick="reverseCount"
android:progress="0"
android:progressDrawable="#drawable/circular_progress"
android:secondaryProgress="500"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
circular_progress.xml drawable:
<solid
android:color="#color/progressBackground"/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="14.0"
android:useLevel="true">
<gradient
android:centerColor="#color/progressSecondary"
android:endColor="#color/progressSecondary"
android:startColor="#color/progressSecondary"
android:type="sweep" />
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="14.0"
android:useLevel="true">
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
<gradient
android:centerColor="#color/colorPrimary"
android:endColor="#color/colorPrimaryDark"
android:startColor="#color/colorPrimaryDark"
android:type="sweep" />
<corners
android:radius="20dp"
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"/>
</shape>
</rotate>
</item>
Help would be greatly appreciated as I've been looking at this for too long.
This is my style_circular_fill.xml file
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="14.0"
android:useLevel="true">
<gradient
android:centerColor="#A9E2F3"
android:endColor="#A9E2F3"
android:startColor="#A9E2F3"
android:type="sweep" />
</shape>
</rotate>
</item>
<item android:id="#android:id/background">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="14.0"
android:useLevel="false">
<gradient
android:centerColor="#FFF"
android:endColor="#FFF"
android:startColor="#FFF"
android:type="sweep" />
</shape>
</item>
And here is the progressbar in my activity.xml file
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="300dp"
android:layout_height="300dp"
android:indeterminate="false"
android:progressDrawable="#drawable/style_circular_fill"
android:max="100"
android:progress="10" />
And here is the result:
I don't know why the white circle background is not showing up...
Are there anything that I did wrong in either of the .xml file?
You can use this library for your material design progress bar.
eg:
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
app:mpb_progressStyle="horizontal"
style="#style/Widget.MaterialProgressBar.ProgressBar.Horizontal" />
I have split your selector into 2 different drawables and set one for background and the other one for progressDrawable and it seems to work fine.
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="300dp"
android:layout_height="300dp"
android:indeterminate="false"
android:progressDrawable="#drawable/style_circular_fill"
android:background="#drawable/background_circular"
android:max="100"
android:progress="20" />
in style_circular_fill :
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="14.0"
android:useLevel="true">
<gradient
android:centerColor="#A9E2F3"
android:endColor="#A9E2F3"
android:startColor="#A9E2F3"
android:type="sweep" />
</shape>
</rotate>
in background_circular :
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="14.0"
android:useLevel="false">
<gradient
android:centerColor="#FFF"
android:endColor="#FFF"
android:startColor="#FFF"
android:type="sweep" />
</shape>