How to Create a Custom image as a rotating Progress Bar Kotlin?

Here we’ll see how to create a custom progress bar in which we can add our own logo as a rotating progress bar.

Custom progress bar in the android app gives it a personal touch. we’ll create a custom progress bar by implementing a spinning logo icon in our app. Mostly, we end up using a ProgressBar as the loading icon while the data gets loaded. Going by the current trend, most of the app like Facebook, Google, UBER, and Twitter have replaced the commonly used Progress Bar with their app’s icon as the loading icon. This gives their application as well as logo brand a touch that makes them stand out from the rest.

Currently, our default progress bar looks like this

Default Code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

   <ProgressBar
       android:id="@+id/progressBar"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintBottom_toBottomOf="parent">

   </ProgressBar>

</androidx.constraintlayout.widget.ConstraintLayout>

Custom Progress-Bar Android Studio Project Structure

Step 1 :-

• First, add your logo to the resource drawable folder

in the below image I have added an icon.png in the drawable folder.

The ProgressBar class contains an attribute indeterminateDrawable that replaces the default indicator with the drawable specified. Let’s see what happens when we place an icon in the ProgressBar.

The output that the above layout reflects in our application is given below.

Output in the left screen and the code highlighted on the right side.

<ProgressBar
    android:id="@+id/progressBar"
    android:indeterminateDrawable="@drawable/icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent">

</ProgressBar>

Step 2:-

Now for Rotating, we’ll have to set a RotateDrawable as the value of the attribute.

A RotateDrawable is defined in the XML by encapsulating the current drawable and assigning it the angle and degrees of rotation. The tag <rotate> is used to do so in the XML as shown below.

For this, we have to create a new drawable resource file and write the defined code for the rotating logo.

Write the below code inside the rotating_icon.xml that we have created new resource file.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <rotate
            android:drawable="@drawable/icon"
            android:fillAfter="true"
            android:fromDegrees="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="360" />
    </item>
</layer-list>

The attribute android:fillAfter shows that the transformation is applied after the animation is over.

android:toDegrees value can be increased or decreased to change the speed of rotation. Generally, it’s recommended to set it in multiples of 360.

Step:- 3

Now, add that style in the progress bar XML code. This will rotate the icon of our logo.

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyle"
    android:indeterminateDrawable="@drawable/rotating_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent">

</ProgressBar>