androidandroid-layoutshapeslayer-list

Make background part of the shape change opposite of progress part


I make animating donut progress bar for my app. Before this moment, I used my class for drawing, but users told me that app crashes on this moment since Android 8.

I said "OK", let me change the type of ProgressBar. I found solution like this (other element, which looks like previous). And set half-transparent colors to see collisions of each layer. As You can see, there are no free pixels (between Orange and Green) in the New. Orange part is just like a background of green (progress) part:

enter image description here

My ProgressBar on Activity:

        <ProgressBar
        android:id="@+id/pb"
        android:layout_width="150dp"
        android:layout_height="150dp"
        style="?android:progressBarStyleHorizontal"
        android:progressDrawable="@drawable/circle"/>

And shape of this PB:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="ring"
            android:thicknessRatio="10"
            android:useLevel="false">
            <solid android:color="#55ffa500" />
        </shape>
    </item>
    <item>
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%">
            <shape
                android:shape="ring"
                android:thicknessRatio="10"
                android:useLevel="true">
                <solid android:color="#5589c154" />
            </shape>
        </rotate>
    </item>
</layer-list>

And easy animations:

ProgressBar progressBar = findViewById(R.id.pb);
        ObjectAnimator progressAnimator = ObjectAnimator.ofInt(progressBar, "Progress", 0,80);
        progressAnimator.setStartDelay(500);
        progressAnimator.setDuration(1000);
        progressAnimator.start();

It seems like I should set progress for orange part with spaces (100%-progress-spaces).


Solution

  • Problem can be solved with two "clock-arrow" lines as dividers:

    enter image description here

    Which can be desined to background color:

    enter image description here

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape
                android:shape="ring"
                android:thicknessRatio="10"
                android:useLevel="false">
                <solid android:color="@color/orange" />
            </shape>
        </item>
        <item>
            <rotate
                android:fromDegrees="270"
                android:toDegrees="270"
                android:pivotX="50%"
                android:pivotY="50%">
                <shape
                    android:shape="ring"
                    android:thicknessRatio="10"
                    android:useLevel="true">
                    <solid android:color="@color/green" />
                </shape>
            </rotate>
        </item>
        <item android:left="75dp" android:gravity="center">
            <rotate android:pivotX="0%" android:fromDegrees="270" android:toDegrees="270">
                <shape
                    android:shape="line"
                    android:useLevel="false">
    
                    <size android:width="75dp" android:height="75dp"/>
                    <stroke android:width="3dp" android:color="@color/material"/>
                </shape>
            </rotate>
        </item>
        <item android:left="75dp" android:gravity="center">
            <rotate android:pivotX="0%" android:fromDegrees="270" android:toDegrees="630">
                <shape
                    android:shape="line"
                    android:useLevel="false">
    
                    <size android:width="75dp" android:height="75dp"/>
                    <stroke android:width="3dp" android:color="@color/material"/>
                </shape>
            </rotate>
        </item>
    </layer-list>