Android Circular Progress bar size

Question

I have a custom circular progress bar, this progress bar is from other website. I have tried many methods to adjust it's size, but the circular bar doesn't change. I just want to enlarge the circular bar.

My .xml that contains the bar:

<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.hangsproduction.algebragames.MainActivity$PlaceholderFragment">

<ProgressBar

    android:id="@+id/circularProgressbar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="false"
    android:max="100"
    android:progress="50"
    android:progressDrawable="@drawable/circular"
    android:secondaryProgress="100"
    android:layout_marginBottom="110dp"
    android:maxHeight="600dip"
    android:minHeight="600dip"

    android:minWidth="600dip"
    android:maxWidth="10dip"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<ImageView
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:background="@drawable/whitecircle"
    android:id="@+id/imageView3"
    android:layout_alignTop="@+id/tv"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="76dp" />

<TextView
    android:id="@+id/tv"
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:gravity="center"
    android:text="25%"
    android:textColor="#ffffff"
    android:textSize="25sp"
    android:layout_alignBottom="@+id/circularProgressbar"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="54dp" />


</RelativeLayout>

My custom circular bar:

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/secondaryProgress">
    <shape
        android:innerRadiusRatio="6"
        android:shape="ring"
        android:thicknessRatio="20.0"
        android:useLevel="true">


        <gradient
            android:centerColor="#dddfe1"
            android:endColor="#dddfe1"
            android:startColor="#dddfe1"
            android:type="sweep" />
    </shape>
</item>

<item android:id="@android:id/progress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270">

        <shape
            android:innerRadiusRatio="6"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true">


            <rotate
                android:fromDegrees="0"
                android:pivotX="50%"
                android:pivotY="50%"
                android:toDegrees="360" />

            <gradient
                android:centerColor="#00FF00"
                android:endColor="#00FF00"
                android:startColor="#00FF00"
                android:type="sweep" />

        </shape>
    </rotate>
</item>
</layer-list>

Change the style of your progress bar to this : style="?android:attr/progressBarStyleLarge" You can also define the specific width or height (like 150dp or 100dp) instead of wrap_content in android:layout_width and android:layout_height attributes — Alvi, Mar 05 '17 at 10:37

score 0 · Answer 1 · edited May 23 '17 at 10:30

0

You can try this Circle Progress library.

Or you could use the code in this answer:

https://stackoverflow.com/a/27269329/6049176

edited May 23 '17 at 10:30

Community

1
1

answered Mar 05 '17 at 10:32

Angelo Parente

796
2
6
15

score 0 · Answer 2 · answered Mar 05 '17 at 10:38

Have you try :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/secondaryProgress">
        <shape
            android:innerRadiusRatio="6"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true">

            <stroke
                android:width="mydp" /> // add this line


            <gradient
                android:centerColor="#dddfe1"
                android:endColor="#dddfe1"
                android:startColor="#dddfe1"
                android:type="sweep" />
        </shape>
    </item>

    <item android:id="@android:id/progress">

        <rotate
            android:fromDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="270">

            <shape
                android:innerRadiusRatio="6"
                android:shape="ring"
                android:thicknessRatio="20.0"
                android:useLevel="true">

                <stroke
                    android:width="mydp" /> // add this line


                <rotate
                    android:fromDegrees="0"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:toDegrees="360" />

                <gradient
                    android:centerColor="#00FF00"
                    android:endColor="#00FF00"
                    android:startColor="#00FF00"
                    android:type="sweep" />

            </shape>
        </rotate>
    </item>
</layer-list>

Hope this helps

score 0 · Answer 3 · answered Nov 18 '21 at 21:59

You can now use the Android Material Design component CircularProgressIndicator, which removes the need to implement a custom drawable. It also resizes easily!

XML:

<com.google.android.material.progressindicator.CircularProgressIndicator
    android:id="@+id/progress_bar"
    android:layout_width="match_parent" <--- Can also be static size (e.g. 48dp)
    android:layout_height="match_parent" <--- Can also be static size (e.g. 48dp)
    android:layout_gravity="center"
    android:indeterminateTint="@color/colorPrimary"
    android:progressTint="@color/colorPrimary" />

Android Circular Progress bar size

3 Answers3