I have a progress drawable which does not work properly on devices running Android Lollipop.
Screenshot on M
Screenshot on Lollipop
circle_percentage_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/colorTranslucentBlack"/>
</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.5"
android:shape="ring"
android:thicknessRatio="25.0">
<gradient
android:centerColor="#android:color/holo_red_dark"
android:endColor="#android:color/holo_red_dark"
android:startColor="#android:color/holo_red_dark"
android:type="sweep"/>
</shape>
</rotate>
</item>
<item android:id="#android:id/secondaryProgress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270">
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thicknessRatio="25.0">
<gradient
android:centerColor="#android:color/holo_red_dark"
android:endColor="#android:color/holo_red_dark"
android:startColor="#android:color/holo_red_dark"
android:type="sweep"/>
</shape>
</rotate>
</item>
</layer-list>
This drawable is used as a background to ProgressView like this:
<ProgressBar
android:id="#+id/circle_progress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="70dp"
android:layout_height="70dp"
android:gravity="center"
android:progress="65"
android:indeterminate="false"
android:progressDrawable="#drawable/circle_percentage_drawable"
/>
The renders as a circle drawn to 65% show up on devices running Android M, KitKat, Jellybean. However, if the same code is run on Android Lollipop (API 21) the circle shows as 100%.
Full source code available here: https://github.com/slashrootv200/CircleProgressPercentage
Add android:useLevel=true" in your circular progressbar xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval"
android:useLevel="true">
<solid android:color="#color/colorTranslucentBlack"/>
</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.5"
android:shape="ring"
android:thicknessRatio="25.0"
android:useLevel="true">
<gradient
android:centerColor="#android:color/holo_red_dark"
android:endColor="#android:color/holo_red_dark"
android:startColor="#android:color/holo_red_dark"
android:type="sweep"/>
</shape>
</rotate>
</item>
<item android:id="#android:id/secondaryProgress">
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270">
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thicknessRatio="25.0"
android:useLevel="true">
<gradient
android:centerColor="#android:color/holo_red_dark"
android:endColor="#android:color/holo_red_dark"
android:startColor="#android:color/holo_red_dark"
android:type="sweep"/>
</shape>
</rotate>
</item>
</layer-list>
Related
I have seperated the background xml and the progress xml. but the background does not show up. I am trying to implement a custom circle progress bar. I want to show 2 progresses at the same time in the progress bar.
below code is the 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:innerRadiusRatio="2.6"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="true">
<gradient
android:centerColor="#333399"
android:endColor="#333399"
android:startColor="#333399"
android:type="sweep" />
</shape>
</item>
</layer-list>
below code is the progress layout
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/secondaryProgress">
<shape
android:innerRadiusRatio="2.6"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="true">
<gradient
android:centerColor="#714338"
android:endColor="#714338"
android:startColor="#714338"
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.6"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="true">
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
<gradient
android:centerColor="#FFFFFF"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF"
android:type="sweep" />
</shape>
</rotate>
</item>
</layer-list>
this is the progress bar code in activity.xml
<ProgressBar
android:id="#+id/sync_progress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="100dp"
android:layout_height="100dp"
android:indeterminate="false"
android:padding="1dp"
android:progressDrawable="#drawable/circular_progressbar"
android:background="#drawable/circular_progress_bg"/>
I am trying to draw the blue shape below.
I want my dialog to have this custom blue shape. But I can not figure out.
I have tried the below code.
I really appreciate your tips, Thanks
<item>
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="0">
<shape android:shape="rectangle">
<solid android:color="#color/red_color" />
</shape>
</rotate>
</item>
<item>
<rotate
android:fromDegrees="-10"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="-10">
<shape android:shape="rectangle">
<solid android:color="#color/gray_color" />
</shape>
</rotate>
</item>
To show the inclination
This is the result from my code above:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#android:color/white"/>
</item>
<item android:top="87dp"
android:bottom="-300dp"
android:left="0dp"
android:right="-300dp">
<rotate
android:fromDegrees="-10"
android:pivotX="0%"
android:pivotY="100%">
<shape
android:shape="rectangle">
<solid
android:color="#android:color/holo_blue_light"/>
</shape>
</rotate>
</item>
Using the above code you will achieve the inclination. Note: change the color code as you need.
Upvote the code if you find it useful.
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>
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
android:toDegrees="360">
<shape android:shape="ring" android:innerRadiusRatio="3"
android:thicknessRatio="8" android:useLevel="false">
<size android:width="48dip" android:height="48dip" />
<gradient android:type="sweep" android:useLevel="false"
android:startColor="#4c737373" android:centerColor="#4c737373"
android:centerY="0.50" android:endColor="#ffffd300" />
</shape>
</rotate>
This code creates a circle indicator and it will rotate it to show one color but I want it instead to display multi-colors.