I have a OutlinedTextField with a trailing icon which changes according to a state. Let's say, idling state in the beginning and then when trailing icon is pressed goes to loading and when the task is , state success, icon is a cross/cancel which cleans the text field. What I want is to have a progressbar like an icon when the state is loading. I currently use a CircularProgressbar composable but it does not look/feel like an icon.

Question

Is there a way to make the CircularProgressbar look like an icon in a generic way which works for any phones and sizes? Or is there an easier way to do it?

Animating some icon could also be interesting.

Here is what I have done:

trailingIcon = {
                when(status) {
                    Status.IDLING -> IconButton(
                        onClick = {
                            viewModel.filterData(iNeedInput)
                        }
                    ) {
                        Icon(imageVector = Icons.Outlined.Search, contentDescription = "search")
                    }
                    Status.SUCCESS -> IconButton(
                        onClick = {
                            viewModel.updateSearchUi("")
                        }
                    ) {
                        Icon(imageVector = Icons.Outlined.Clear, contentDescription = "clear")
                    }
                    Status.LOADING ->
                        IconButton(
                            onClick = {
                                viewModel.updateSearchUi("")
                            }
                        ) {
                            CircularProgressIndicator()
                        }
                    Status.FAILED ->  Icon(imageVector = Icons.Outlined.Info, contentDescription = "error")
                }
            }

I have a OutlinedTextField with a trailing icon which changes according to a state. Let's say, idling state in the beginning and then when trailing icon is pressed goes to loading and when the task is , state success, icon is a cross/cancel which cleans the text field. What I want is to have a progressbar like an icon when the state is loading. I currently use a CircularProgressbar composable but it does not look/feel like an icon.

Question

Is there a way to make the CircularProgressbar look like an icon in a generic way which works for any phones and sizes? Or is there an easier way to do it?

Animating some icon could also be interesting.

Here is what I have done:

trailingIcon = {
                when(status) {
                    Status.IDLING -> IconButton(
                        onClick = {
                            viewModel.filterData(iNeedInput)
                        }
                    ) {
                        Icon(imageVector = Icons.Outlined.Search, contentDescription = "search")
                    }
                    Status.SUCCESS -> IconButton(
                        onClick = {
                            viewModel.updateSearchUi("")
                        }
                    ) {
                        Icon(imageVector = Icons.Outlined.Clear, contentDescription = "clear")
                    }
                    Status.LOADING ->
                        IconButton(
                            onClick = {
                                viewModel.updateSearchUi("")
                            }
                        ) {
                            CircularProgressIndicator()
                        }
                    Status.FAILED ->  Icon(imageVector = Icons.Outlined.Info, contentDescription = "error")
                }
            }

• android
• kotlin
• android-jetpack-compose
• icons
• outlined-text-fields

• One thing I do not understand is that why have you wrapped the CircularProgressIndicator() inside an IconButton? You could have just used CircularProgressIndicator(). – Ahsan Zia Commented Nov 20, 2024 at 15:38
• The reason was to make sure that the paddings and sizes are not affected by the IconButton composable. I removed it and it still looks the same. – msc87 Commented Nov 21, 2024 at 9:04

1 Answer 1

Icon uses LocalContentColor to draw, so you can use it too to set the color of the CircularProgressIndicator. Trailing icon size is 24dp by specs, you can also add padding(2.dp) to make it match the size of the other icons.

CircularProgressIndicator(
    color = LocalContentColor.current,
    strokeWidth = 2.dp,
    modifier = Modifier.size(24.dp),
)

Default:

Error:

Disabled:

Dark: