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