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

Answer 1

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)

Answer 2

try this

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