Custom loading spinner icon

Question

I've implemented a loading spinner icon using the layout below:

<RelativeLayout
    android:id="@+id/spinner"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:layout_marginTop="50dp">

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        />

</RelativeLayout>

But this uses the default Android spinner. I want to replace the spinner with a loading icon I got from preloaders.net that looks like this:

How can I replace the default Android spinner with this custom spinner?

Answer 1

If you want to make your PNG image rotate and act as a Progress Bar, you can simply create a rotate layout and insert your PNG on that layout

Inside res ->drawable, create a new file called rotate.xml.

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/pokeball"       <--Insert your image here
    android:fillAfter="false"
    android:fromDegrees="0"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:startOffset="0"
    android:toDegrees="718" />

After that you can insert your rotate.xml to a progress bar so that your PNG file able to rotate and you just need to maintain it's visibility

<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="16dp"
    android:layout_height="16dp"
    android:layout_margin="16dp"
    android:alpha="0.5"
    android:indeterminateDrawable="@drawable/rotate"
    android:visibility="gone"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Answer 2

this is what I used in my project:

    <ProgressBar
        android:id="@+id/updateProgressBar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:drawingCacheQuality="high"
        android:indeterminateDuration="2000"
        android:indeterminateDrawable="@drawable/splash_spinner"
        />

simply override indeterminateDrawable with your custom image