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 :

You can use liabrary https://github.com/castorflex/SmoothProgressBar — Ajinkya, Jan 27 '16 at 04:56
check library you can reduce by using this fnc - strokeWidth(8f) OR In xml app:cpb_stroke_width="4dp" — Ajinkya, Jan 27 '16 at 05:06
But I want ring which is making by dot. I Hope you understand. — Harshad, Jan 27 '16 at 05:07
@Harshad https://github.com/Fichardu/CircleProgress this link lilttle bit match with your requirment — Vishal Thakkar, Feb 03 '16 at 10:02

score 11 · Accepted Answer · edited Feb 04 '16 at 06:10

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 :

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) — Ankit Bansal, Feb 05 '16 at 02:32
@AnkitBansal if you use an `AccelerateDecelerateInterpolator` it will animate with a slow-fast-slow pattern. — Xaver Kapeller, Feb 05 '16 at 04:45

JAAD · Answer 2 · 2016-02-05T06:02:05.520

5

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

edited Feb 05 '16 at 06:02

answered Feb 04 '16 at 15:27

JAAD

12,349
7
36
57

I try your answer but in output that give me left and right side arraow. – Harshad Feb 05 '16 at 05:57
– Harshad Feb 05 '16 at 06:00
please remove the android:background attribute – JAAD Feb 05 '16 at 06:02
also use the version 1.1.11 as 1.1.12 has some weird crash issue – JAAD Feb 05 '16 at 06:11

score 4 · Answer 3 · edited May 23 '17 at 12:32

4

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.

edited May 23 '17 at 12:32

Community

1
1

answered Jan 29 '16 at 20:33

Konstantin Loginov

15,802
5
58
95

that work fine +1 for that how to make round shape like my image I updated my question. – Harshad Jan 30 '16 at 04:06
Rect work fine in other activity but this give me error when I am using in Splash Activity. – Harshad Jan 30 '16 at 04:21

score 4 · Answer 4 · answered Feb 03 '16 at 02:13

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

answered Feb 03 '16 at 02:13

topcbl

799
6
20

score 1 · Answer 5 · answered Feb 19 '20 at 09:36

1

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.

answered Feb 19 '20 at 09:36

Milan Jurkulak

557
3
6

How to create Progress Bar like Image in Android

5 Answers5