changing CircularProgressIndicator width or height not applied

Question

I would like to use CircularProgressIndicator from Material Library width custom size, but when I set any width or height to the view, just view Itself changing not circle inside it. what I want to achieve is fill progress to image view as I shown in below image

and this is my code

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/circleBackground"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="H,1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.5"
        app:shapeAppearanceOverlay="@style/circleImageView"
        tools:src="@tools:sample/avatars" />

    <com.google.android.material.progressindicator.CircularProgressIndicator
        android:id="@+id/progressBar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:max="100"
        android:progress="50"
        app:indicatorColor="@color/green_true"
        app:indicatorDirectionCircular="clockwise"
        app:layout_constraintBottom_toBottomOf="@id/circleBackground"
        app:layout_constraintLeft_toLeftOf="@id/circleBackground"
        app:layout_constraintRight_toRightOf="@id/circleBackground"
        app:layout_constraintTop_toTopOf="@id/circleBackground"
        app:trackColor="#50ffffff"
        app:trackCornerRadius="90dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Bowerbird

it is possible that the Shapeable image view gets its source set after the view was created? if so you may need to requestLayout() again so CL can re-compute the actual width/height of the views, given they are tied to each other (aka: the progress indicator's size will depend on the imageview size, which is not known when the view is inflated, so it takes the default size of the progress indicator (as if it was wrapped). By the time the new image comes in (for the shapeable) the progress indicator is already measured/laid out. (This is a theory) :) – Baeza

Using tools:src is fine for the editor, but at runtime that does zero/nothing :) – Baeza

I just use tools to show what I want to achieve. I used ShapeableImageView with app:layout_constraintDimensionRatio="H,1:1" and android:layout_width="0dp" and android:layout_height="0dp" that's will defined view size at start. I think it does not matter to ShapeableImageView. if I change it to any other view result will be same – Bowerbird

Answer 1

To change the dimension of the ProgressIndicator you have to use the indicatorSize attribute:

<com.google.android.material.progressindicator.CircularProgressIndicator
            app:indicatorSize="100dp"

In your case you have to change it programmatically.
Something like:

    circleBackground.viewTreeObserver.addOnGlobalLayoutListener(
    object : ViewTreeObserver.OnGlobalLayoutListener {
        override fun onGlobalLayout() {
            circleBackground.viewTreeObserver.removeOnGlobalLayoutListener(this);
            progressBar.indicatorSize = circleBackground.height
            
        }
    });

Stammer

sure, but I would like to use it in constraint layout to auto fit based another view – Bowerbird

@vahid in this case you can't assign the value in the xml, but programmatically measuring the right dimension. In any case you have to use the progressBar.indicatorSize method. The android:layout_height and android:layout_width don't change the progress bar/indicator dimension. – Stammer

I thought there was a way to apply it through xml but seems there is no way. anyway thanks for your response. and also I didn't know should I accept your answer or no :) . it is not what I looking for but can help someone else in case of fixed size – Bowerbird

@vahid No problem. Just added an example how to change the indicatorSize programmatically. – Stammer

Tip: Use doOnLayout from core-ktx instead of addOnGlobalLayoutListener. – Drennan

This is just another blsht from Google. Other views properly fits in their holder but CircularProgressIndicator fails like a cr*p. I mean what if you don't wanna give your progress bar a fixed size?! Doing it with addOnGlobalLayoutListener is nothing but a lame workaround that we are stuck with – Indihar

Just to justify why this is a cr*ppy design; if you do it with addOnGlobalLayoutListener then all your padding/margin params you have set to the progress bar will be lost and progress bar will appear cut. Of course, this can resolved. But everything can be resolved with workarounds. Just wonder which genius at google decied this is the way to go :) – Indihar

Answer 2

[]

must set indicatorSize and trackThickness at the same time.

Ratable

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Horrendous