CODEWITHSUNDEEP
androidprogress-bar
DJhon
DJhon

Reputation: 1518

Custom Circular Progress Bar with solid circles

i want to have one circular progress bar like this

enter image description here

I tried this but it not look like circular and how to put animation along with fades , because currently i am using same xml for all six circles.

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

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginRight="15dp"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:src="@drawable/circle_shape_big_custom_search" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:src="@drawable/circle_shape_big_custom_search" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="72dp"
        android:src="@drawable/circle_shape_big_custom_search" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="72dp"
        android:src="@drawable/circle_shape_big_custom_search" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginLeft="15dp"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         android:layout_marginBottom="5dp"
        android:src="@drawable/circle_shape_big_custom_search" />

    <ImageView
        android:layout_width="wrap_content"
         android:layout_marginTop="5dp"
        android:layout_height="wrap_content"
        android:src="@drawable/circle_shape_big_custom_search" />
</LinearLayout>

Any help would be really appreciated.

Upvotes: 3

Views: 1759

Answers (1)

KOTIOS
KOTIOS

Reputation: 11194

Define progress bar like beloew code snip :

<ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:indeterminateDrawable="@drawable/my_progress_indeterminate"
        android:visibility="gone" >
    </ProgressBar>

my_progress_indeterminate.xml [Place this file in drawable]

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

Place this Image file attched here in drawale : image_to_be_place_in_drawable

Upvotes: 3

Related Questions