Clever Geek Handbook

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 doesn't look like circular and how to add animation along with fades because I am currently using the 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.

+3


source to share


1 answer


Define a progress bar, for example a beloew code snapshot:

<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 filled here in drawale: image_to_be_place_in_drawable

+3


source






More articles:


All Articles