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!
Related
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'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.
I have a custom Circular Progressbar. This is the drawable I have for it to be determinate:
<?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="6"
android:shape="ring"
android:thicknessRatio="20.0"
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="6"
android:shape="ring"
android:thicknessRatio="20.0"
android:useLevel="true">
<rotate
android:fromDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="0" />
<gradient
android:centerColor="?attr/colorAccent"
android:endColor="?attr/colorAccent"
android:startColor="?attr/colorAccent"
android:type="sweep" />
</shape>
</rotate>
</item>
</layer-list>
I want it to show the progress in a clockwise direction, but now it's showing counterclockwise.
How do I change it?
I guess you're using an rtl language? You can force the progress bar to an ltr or clockwise direction by setting the layoutDirection property on your ProgressBar.
<ProgressBar
...
android:layoutDirection="ltr" />
By using latest versions of material design library, you can achieve this:
in the layout with this attribute
app:indicatorDirectionCircular
or programmatically with this method
setIndicatorDirection()
Refer here for more info.
Change this
<rotate
android:fromDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="0" />
to
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
I'm not sure if it will work, but just try to set android:toDegrees="-360" like this :
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="-360" />
you can change rotation on Y axis by 180 degrees
android:rotationY="180"
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.
I have a custom animation to my ProgressDialog which is set this way:
pd.setIndeterminateDrawable(c.getResources().getDrawable(R.anim.progress_animation));
The progress_animation is like this:
<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:toDegrees="358" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8"
android:useLevel="false" >
<size
android:height="48dip"
android:width="48dip" />
<gradient
android:centerColor="#4c737373"
android:centerY="0.50"
android:endColor="#E66A0F"
android:startColor="#4c737373"
android:type="sweep"
android:useLevel="false" />
</shape>
</animated-rotate>
This will give me an orange spinning wheel, but this seems to be "slower" or more laggy than the default spinning wheel in the ProgressDialog. I've tried setting the android:toDegrees from 360 to 358, but with no luck. I have also enabled hardware acceleration. Is there anyway I can make this animation smoother, or faster?
Thanks!
Use "rotate" instead of "animated-rotate" and change android:toDegrees should make it go faster.
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="2160" />
This works for me:
Create my_progress_indeterminate.xml at drawable(created).
The load_spool.png is the Image to rotate.
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/load_spool"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="2160">
</rotate>
The Layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateDrawable="#drawable/my_progress_indeterminate" />
</LinearLayout>
try android:toDegrees="1080" i my case it works .... just try this