Jetpack Compose Circular Progress Indicator background color missing

Question

I am trying to implement the circular progress indicator using jetpack compose (docs for reference Cirular Progress Indicator Docs) in the docs they have mentioned the backgroundColor property, but inside the source code of CircularProgressIndicator this property is missing

I have the latest compose bom dependency and using material 2

    // https://developer.android.com/jetpack/compose/setup#setup-compose
    def composeBom = platform('androidx.compose:compose-bom:2023.01.00')
    implementation composeBom
    androidTestImplementation composeBom

    // COMPOSE UI
    implementation 'androidx.compose.ui:ui'

    // MATERIAL 2
    implementation 'androidx.compose.material:material'

Is this property missing?. how can i add a background color to the circular progress indicator

score 0 · Answer 1 · answered Feb 03 '23 at 16:53

0

try this

CircularProgressIndicator(
        modifier = Modifier
        .background(Color.Blue)
        .padding(16.dp) // increase it as much you want to expand it's background area
)

answered Feb 03 '23 at 16:53

Zaki Shaikh

71
3
9

backgroundColor property of CircularProgressIndicator is for The color of the background behind the indicator, Your code adds background to entire composable. – Chandra Shekhar Feb 04 '23 at 02:30
Refer Docs link for reference – Chandra Shekhar Feb 04 '23 at 02:31

score 0 · Accepted Answer · answered Feb 10 '23 at 13:37

You need to update the compose-material dependency compose-materail Version 1.4.0-alpha04 change log(refer point 3)

If you update your library to compose-material 1.4.0-alpha04, the background property is now available for circular progress indicators under the param name of backgroundColor (for Material 2) or trackColor (for Material 3)

Jetpack Compose Circular Progress Indicator background color missing

2 Answers2