Circular Progress Indicator ignores width/height attributes and doesn't scale

Question

I need to fit 4 circular progress bars horizontally, like this:

so I decided to use new material component Circular Progress Indicator (https://material.io/components/progress-indicators/android). I spread chain these 4 progress bar in constrait layout, but them don't scale. It looks like they are still having deafult 24dp size. Even if I try to hardcode width and height to 200dp for example, the output is still small progress bar.

<com.google.android.material.progressindicator.CircularProgressIndicator
            android:id="@+id/progressBarCalories"
            style="@style/ProgressBarCircular"
            android:layout_marginTop="32dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="6dp"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintTop_toBottomOf="@id/wrapperCookingTime"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/progressBarProtein"
            tools:progress="75"/>

        <com.google.android.material.progressindicator.CircularProgressIndicator
            android:id="@+id/progressBarProtein"
            style="@style/ProgressBarCircular"
            android:layout_marginTop="32dp"
            android:layout_marginStart="6dp"
            android:layout_marginEnd="6dp"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintTop_toBottomOf="@id/wrapperCookingTime"
            app:layout_constraintStart_toEndOf="@id/progressBarCalories"
            app:layout_constraintEnd_toStartOf="@id/progressBarCarbs"
            tools:progress="75"/>

        <com.google.android.material.progressindicator.CircularProgressIndicator
            android:id="@+id/progressBarCarbs"
            style="@style/ProgressBarCircular"
            android:layout_marginTop="32dp"
            android:layout_marginStart="6dp"
            android:layout_marginEnd="6dp"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintTop_toBottomOf="@id/wrapperCookingTime"
            app:layout_constraintStart_toEndOf="@id/progressBarProtein"
            app:layout_constraintEnd_toStartOf="@id/progressBarFat"
            tools:progress="75"/>

        <com.google.android.material.progressindicator.CircularProgressIndicator
            android:id="@+id/progressBarFat"
            style="@style/ProgressBarCircular"
            android:layout_marginTop="32dp"
            android:layout_marginStart="6dp"
            android:layout_marginEnd="16dp"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintTop_toBottomOf="@id/wrapperCookingTime"
            app:layout_constraintStart_toEndOf="@id/progressBarCarbs"
            app:layout_constraintEnd_toEndOf="parent"
            tools:progress="75"/>

        <com.google.android.material.progressindicator.CircularProgressIndicator
            android:id="@+id/progressBar"
            style="@style/ProgressBarCircular"
            android:layout_marginTop="32dp"
            app:layout_constraintWidth_min="200dp"
            android:minWidth="200dp"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/progressBarFat"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            tools:progress="75"/>

https://stackoverflow.com/questions/21333866/how-to-create-a-circular-progressbar-in-android-which-rotates-on-it this might be helpful. — Rishabh Deep Singh, Jan 24 '21 at 13:57

score 42 · Answer 1 · answered Mar 23 '21 at 18:23

42

You have to use the indicatorSize attribute:

   <com.google.android.material.progressindicator.CircularProgressIndicator
            android:indeterminate="true"
            android:layout_width="100dp"
            android:layout_height="100dp"
            app:indicatorSize="90dp"
            app:indicatorColor="@color/colorPrimary"
            ../>

answered Mar 23 '21 at 18:23

Gabriele Mariotti

320,139
94
887
841

Is it possible to set the `indicatorSize` to match the parent? I'm trying to fill the parent `LinearLayout` with the `CircularProgressIndicator` – justadeveloper Mar 28 '21 at 09:10
1

@remotedeveloper You can use a `viewTreeObserver.addOnGlobalLayoutListener` to get parent view size and apply it to the `indicatorSize` – Gabriele Mariotti Apr 09 '21 at 09:06
1

this should be accepted answer – Ali Zarei Feb 20 '22 at 17:42

score 10 · Answer 2 · answered Jul 24 '21 at 08:50

In version:

implementation 'com.google.android.material:material:1.5.0-alpha01'

You can set size using the following attribute:

app:indicatorSize="180dp"
app:trackThickness="10dp"

Full xml item will look something like:

<com.google.android.material.progressindicator.CircularProgressIndicator
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:indicatorSize="180dp"
    app:trackThickness="10dp"
    app:trackColor="@color/colorPrimary"
    app:indicatorColor="@color/colorPrimaryDark"
    android:layout_gravity="center_horizontal"
    android:progress="80"
    app:trackCornerRadius="8dp"
    android:layout_marginTop="30dp"/>

Please Note: You need to set XML Display Theme to "MeterialTheme" inorder to see UI updates.

score 1 · Answer 3 · answered Apr 13 '21 at 19:44

For those using data-binding, you can use

@BindingAdapter("bindProgressSizeToViewWidth")
fun bindProgressSizeToViewWidth(circularProgressIndicator: CircularProgressIndicator, view: View?) {
view ?: LogEventUtils.logApiError("bindProgressSizeToViewWidth: null view").run { return } // safty line you can remove it

    view.post {
        circularProgressIndicator.indicatorSize = view.measuredWidth
    }
}

XML (just give the text padding 12dp & center it within the circularProgressIndicator)

                <androidx.appcompat.widget.AppCompatTextView
                    android:id="@+id/progressTv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="sans-serif"
                    android:lineSpacingExtra="4sp"
                    android:padding="12dp"
                    tools:text="4/15"
                    android:textColor="@color/pumpkin_orange"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    app:layout_constraintStart_toStartOf="@id/circularProgressIndicator"
                    app:layout_constraintBottom_toBottomOf="@+id/circularProgressIndicator"
                    app:layout_constraintEnd_toEndOf="@+id/circularProgressIndicator"
                    app:layout_constraintTop_toTopOf="@+id/circularProgressIndicator" />

                <com.google.android.material.progressindicator.CircularProgressIndicator
                    android:id="@+id/circularProgressIndicator"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="16dp"
                    android:indeterminate="false"
                    android:progress="@{40}"
                    app:bindProgressSizeToViewWidth="@{progressTv}"
                    app:indicatorColor="?colorPrimary"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:trackColor="@color/battleship_grey" />

Results

DrHowdyDoo · Answer 4 · 2021-01-26T07:13:54.303

0

I think that's because the maxHeight and maxWidth of the progressBar is set to 48dp in the style. You have to override it to make the bar scale.

edited Jan 26 '21 at 07:13

answered Jan 26 '21 at 06:42

DrHowdyDoo

2,327
2
7
21

Circular Progress Indicator ignores width/height attributes and doesn't scale

4 Answers4