Circular progress bar size alignment

Question

It's a while I am stuck with this issue. May be some one can help.

The problem is the background of my android circular progress bar has different sizes according to mobile screen sizes.

The screen shot should explain the issue.

The Blue incomplete circle is the circular progress bar(animating). It should actually run on top of the white circle. It works right only on a particular screen size.

The white circle is set as the background drawable of the progress bar.

Here are the codes. (I have put only needed code)

acivity_countdown.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:orientation="vertical"
    android:background="#FD4C0D"
    >
    <FrameLayout
        android:id="@+id/CountDownProress"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="#FD4C0D"
    >
        <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:indeterminate="false"
        android:progressDrawable="@drawable/circular_progress_bar"
        android:layout_alignParentBottom="true"
        android:background="@drawable/circular_shape"
        android:layout_centerHorizontal="true"
        android:max="500"
        android:progress="0"
        ></ProgressBar>
        <LinearLayout.../><!--this layout contains text inside circular progress -->
    </FrameLayout>
    <FrameLayout.../><!--this layout contains button under circular progress -->
</LinearLayout>

circular_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="0">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="3dp"
        android:useLevel="true">
        <gradient
            android:angle="0"
            android:endColor="#005B7F"
            android:startColor="#005B7F"
            android:type="sweep"
            android:useLevel="false">
        </gradient>
    </shape>
</rotate>

circular_shape.xml(The background drawable)

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:useLevel="false"
    android:innerRadius="145dp"
    android:shape="ring"
    android:thickness="0.8dp"
    >
    <solid android:color = "#ffffff"/>
</shape>

I have tried to make the circular_shape.xml (background of progress bar) scale according to screen size according to this https://stackoverflow.com/a/9362168/3929188. But creating a bitmap xml from drawable was challenging for me that I simply couldn't do it (noobie developer).

I have tried to put background for circular_progress_bar.xml so that blue circle animation goes on top of white circle, but failed.

Any ideas are welcomed!

score 1 · Accepted Answer · answered Aug 03 '16 at 06:31

Solved finally. I put the background drawable of circular progress as a separate view in FrameLayout.

acivity_countdown.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:orientation="vertical"
    android:background="#FD4C0D"
    >
    <FrameLayout
        android:id="@+id/CountDownProress"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="#FD4C0D"
    >
        <ImageView
            android:id="@+id/ProgressBackground"
            android:src="@drawable/circular_shape"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            ></ImageView>
        <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
            android:layout_gravity="center"
        android:indeterminate="false"
        android:progressDrawable="@drawable/circular_progress_bar"
        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"
        android:max="500"
        android:progress="0"
        ></ProgressBar>
        <LinearLayout.../><!--this layout contains text inside circular progress -->
    </FrameLayout>
    <FrameLayout.../><!--this layout contains button under circular progress -->
</LinearLayout>

circular_progress_bar.xml (drawable)

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="0">
    <shape
        android:shape="ring"
        android:thickness="3dp"
        android:useLevel="true">
        <gradient
            android:angle="0"
            android:endColor="#005B7F"
            android:startColor="#005B7F"
            android:type="sweep"
            android:useLevel="false">
        </gradient>
    </shape>
</rotate>

circular_shape.xml(The background drawable)

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:useLevel="false"
    android:shape="ring"
    android:thickness="0.8dp"
>
    <solid android:color="#ffffff"/>
</shape>

This made it scale according to mobile screen size. But the size was small. I had to get it little more big. So I added this code in OnCreate()

        FrameLayout frame=(FrameLayout) findViewById(R.id.CountDownProressFrame);
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(displaymetrics.widthPixels +150 , displaymetrics.heightPixels-300);
        lp.weight = 1;
        lp.gravity = Gravity.CENTER;
        frame.setLayoutParams(lp);
        ImageView img=(ImageView) findViewById(R.id.ProgressBackground);
        FrameLayout.LayoutParams FrameLP = new FrameLayout.LayoutParams(displaymetrics.widthPixels +155 , displaymetrics.heightPixels-280);
        FrameLP.gravity = Gravity.CENTER;
        img.setLayoutParams(FrameLP);

Hope it helps someone. :)

score 0 · Answer 2 · answered Aug 01 '16 at 14:07

0

i don't know why you rotate from fromDegrees 0 to toDegrees 0,may be caused by this

rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="0"

answered Aug 01 '16 at 14:07

lanniaoyidingying

101
5

no! actually the rotation animation is controlled from code. I think it has nothing to do with scaling of background image. – Anil P Babu Aug 01 '16 at 14:12
have you try this . view.setScaleType(ScaleType.FIT_XY); – lanniaoyidingying Aug 01 '16 at 15:47
i need more explanation. My question was how to scale background drawable. How can you get the background drawable (circular_shape.xml in this case) in code as view object so that it can be scaled? i am a noobie. kindly forgive if i had asked anything wrong. – Anil P Babu Aug 02 '16 at 04:56

Circular progress bar size alignment

2 Answers2