I download this code from internet (in the end I set the link)
for customize the color circular progress bar
But the circular progress bar is not rotating
Am I missing something?
the progress bar is "static"
<?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="3"
android:shape="ring"
android:useLevel="true"
android:thicknessRatio="14.0">
<gradient
android:startColor="#color/colorBlanco"
android:endColor="#color/colorBlanco"
android:centerColor="#color/colorBlanco"
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:useLevel="true"
android:thicknessRatio="14.0">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%" />
<gradient
android:startColor="#color/colorAzul"
android:endColor="#color/colorAzul"
android:centerColor="#color/colorAzul"
android:type="sweep" />
</shape>
</rotate>
</item>
</layer-list>
this code has my launcher
<ProgressBar
android:layout_gravity="center"
android:id="#+id/circularProgressbar"
android:layout_width="100dp"
android:layout_height="100dp"
style="?android:attr/progressBarStyleHorizontal"
android:indeterminate="false"
android:progress="80"
android:max="100"
android:secondaryProgress="100"
android:layout_below="#+id/img_logo_app_launcher"
android:progressDrawable="#drawable/custom_progressbar" />
Horizontal and Circular Progress Bar in Android
Set progressBar.setIndeterminateDrawable() to any drawable file it
will replace your moving loader to the defined moving image.
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 new in Kotlin and trying to make a progress bar that is a HALF CIRCLE in my app and shows how much someone has spend so far.
There are many solutions for round ones and normal ones, but I can't find one for a half circle.
IN MY activity_main.xml FILE:
...
<ProgressBar
android:id="#+id/circularProgressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="250dp"
android:layout_height="250dp"
android:max="100"
android:progress="50"
android:layout_centerInParent="true"
android:progressDrawable="#drawable/circular"
android:secondaryProgress="100"/>
<TextView
android:id="#+id/tv"
android:layout_width="250dp"
android:layout_height="250dp"
android:gravity="center"
android:text="25$"
android:layout_centerInParent="true"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
AND IN MY circular.xml FILE:
...
<item android:id="#android:id/secondaryProgress">
<shape
android:innerRadiusRatio="6"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="true">
<gradient
android:centerColor="#DADADA"
android:endColor="#999999"
android:startColor="#FFFFFF"
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="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="#03A9F4"
android:endColor="#0063B1"
android:startColor="#68CCFF"
android:type="sweep" />
</shape>
</rotate>
</item>
WHAT I WANT is a horizontally cut circle as a progress bar.
I don't know if I am even on the right track and also I don't know how to set the degrees and things in the circular.xml file to get what I want, I tried but every time I changed something the output made no sense.
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 want to create a circular ProgressBar animating within a custom shape, like this:
I already know how to create a basic circular ProgressBar:
<ProgressBar style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="80dp"
android:layout_height="80dp"
android:indeterminate="false"
android:max="6000"
android:progress="0"
android:progressDrawable="#drawable/shape_ring_blue_progress" />
shape_ring_blue_progress.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270">
<shape
android:shape="ring"
android:innerRadiusRatio="2.17391304"
android:thicknessRatio="25.0"
android:useLevel="true">
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
<solid
android:color="#color/style_color_blue" />
</shape>
</rotate>
</item>
</layer-list>
But I have no clue of how to use a more complex shape and a mask like I want to.
Thanks for your help!
I'm trying to do a circular progress bar run smoothly but I'm not having result. The progress bar should be update in function of a timer value.
Here is how I animate the progressbar,
int progress = (int)(this.mCurrentTimerValue/1000);
this.mProgressBarAnimation = ObjectAnimator.ofInt(this.mProgressBar,"progress",progress);
this.mProgressBarAnimation.setDuration(this.mCurrentTimerValue);
this.mProgressBarAnimation.setInterpolator( new LinearInterpolator());
where this.mCurrentTimerValue is the time in ml. For this example is 10000
And here is the result,
I want to show the progress smoothly but I can't. I tried with ObjectAnimator.ofFloat because the problem maybe is that I'm trying to progress in integer spaces but in that case animation doesn't work.
Here is how I customized the progress bar,
<?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/yellow"
android:endColor="#color/yellow"
android:startColor="#color/yellow"
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>
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:indeterminate="false"
android:progress="100"
android:progressDrawable="#drawable/custom_progress_bar" />
I read these questions but didn't help me,
question 1
question 2
question 3
If somebody need a solution for this situation, this answer helped me but I admit I don't think is the best.