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