How to create Progress Bar like Image in Android

Question

How to create below Image type of Progress ring in my Android app. I Want to show it 10 second before my whole app is loading on device. and also I want to rotate it. like window device rotate. Any Help be appreciated. I am new to Andorid.

Image :

Protoplast

You can use liabrary github.com/castorflex/SmoothProgressBar – Awildaawkward

I Want ring like windows device not ProgressBar.. – Protoplast

CircularProgressBar thickness is more in this library.. – Protoplast

check library you can reduce by using this fnc - strokeWidth(8f) OR In xml app:cpb_stroke_width="4dp" – Awildaawkward

But I want ring which is making by dot. I Hope you understand. – Protoplast

@Protoplast github.com/Fichardu/CircleProgress this link lilttle bit match with your requirment – Convent

did u see my answer harshad – Hukill

@VishalHalani I don't won't that type CircleProgress. – Protoplast

Answer 1

I got the perfect answer.

Using this link I found the round progress ring.

progress_bar.gif

Then I Use this code :

animation.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/progress_bar"
    android:pivotX="50%"
    android:pivotY="50%" />

In My main xml file.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"          android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">


    <ProgressBar
        android:id="@+id/progressbar1"
        android:layout_marginTop="80dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminateDrawable="@anim/animation"/>


</RelativeLayout>

and finally output is :

Protoplast

But with this answer you won't get this Slow-Fast-Slow-... rotation effect just like in this GIF. I would suggest you to use this GIF only and show it for your desired time (for this I believe you already have written the code) – Vorticella

@AnkitBansal if you use an AccelerateDecelerateInterpolator it will animate with a slow-fast-slow pattern. – Strobilaceous

@XaverKapeller Yes, almost forgot that – Vorticella

Answer 2

u Can use the gifView library :https://github.com/koral--/android-gif-drawable

use this is your .xml:-

<pl.droidsonroids.gif.GifImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/src_anim"
    />

where src_anim is your loader gif file

Hukill

I try your answer but in output that give me left and right side arraow. – Protoplast

<pl.droidsonroids.gif.GifImageView android:layout_width="50dp" android:layout_height="40dp" android:layout_marginTop="200dp" android:src="@drawable/progress_bar" android:background="@anim/animation" /> – Protoplast

please remove the android:background attribute – Hukill

also use the version 1.1.11 as 1.1.12 has some weird crash issue – Hukill

Answer 3

Modifying the resource image of Progress Bar - this question recently has been discussed here. Check it out.

In short - you can use

• custom drawable
• animation-list

Both approaches allows to create progress bar like yours.

Hasdrubal

that work fine +1 for that how to make round shape like my image I updated my question. – Protoplast

Rect work fine in other activity but this give me error when I am using in Splash Activity. – Protoplast

Answer 4

You can use this library to do it in a easier way. Furthermore, so many intuitive progressBar's type is available for you as well.

https://github.com/81813780/AVLoadingIndicatorView

Auramine

Answer 5

Use Lottie animation. See: https://github.com/airbnb/lottie-android The LottieDrawable from library contains method progress(), which sets right frame if loaded image is progress image.

Telescopium