Shinoyakame
Shinoyakame

Reputation: 23

How to create a custom ProgressBar with drawables, without programming?

This is my custom white-transparent wheel ProgressBar

progressbar_circle.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="4dp"
    android:useLevel="false">
    <gradient
        android:type="sweep"
        android:startColor="@android:color/white"
        android:centerColor="@android:color/white"
        android:endColor="@android:color/transparent"
    />
</shape>


In the preview window of Android studio, this element has showed correctly.
But after debug testing in both emulator (Android 9) and device (Android 6), ProgressBar showed as @color/colorAccent wheel Progressbar.

I have tried to change android:shape, android:innerRadiusRatio, android:thickness, even change gradient to solid color. Nothing changed.


Here is my progress_task_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

<ImageView
    android:id="@+id/correct_icon"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:contentDescription="@string/correct_icon"
    android:padding="@dimen/padding_large"
    android:visibility="gone" />

<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="8dp"
    android:padding="@dimen/padding_large"
    android:progressDrawable="@drawable/progressbar_circle"
    android:visibility="gone" />

</RelativeLayout>


How to accomplish custom android ProgressBar on xml without dynamically programming in java?

Upvotes: 2

Views: 4005

Answers (1)

Masoud Mokhtari
Masoud Mokhtari

Reputation: 2474

Create progress.xml file in drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360">

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false">

        <size
            android:width="76dip"
            android:height="76dip" />

        <gradient
            android:angle="0"
            android:endColor="#1672B6"
            android:startColor="@android:color/transparent"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

Then use it like this:

<ProgressBar
                android:id="@+id/pbarLoading"
                android:layout_width="36dp"
                android:layout_height="36dp"
                android:indeterminateDrawable="@drawable/progress"/>

Upvotes: 5

Related Questions