How to add text below IconButton on TopAppBar?

user_14383106 0
Viewed 1531

I tried to put some text below IconButton, but I just can't find a way. Instead it just gets beside the IconButton TopAppBar

 Column {
        TopAppBar(
                modifier = modifier,
                elevation = 0.dp,
                contentColor = MaterialTheme.colors.onSurface,
                title = {
                    Text(text = "Jetpack Compose")
                },
                actions = {
                    IconButton(onClick = { }) {
                        Icon(Icons.Filled.Add, tint = Red)
                    }
                    Text(text = "Add")
                }
        )
    }
android-jetpack android-jetpack-compose android
1 Answers

TopAppBar action is aligned inside the Row, So If you add any component inside that it will grow horizontally, So you can add your text and button inside IconButton because the icon is just a Composable function(But instead you can use Button it will have more highlight ripple when we click)

Ex:

Column {
    TopAppBar(
        modifier = modifier,
        elevation = 0.dp,
        contentColor = MaterialTheme.colors.onSurface,
        title = {
            Text(text = "Jetpack Compose")
        },
        actions = {
            IconButton(onClick = {  }) {
                Column {
                    Icon(Icons.Filled.Add, Modifier.align(Alignment.CenterHorizontally), tint = Red)
                    Text("Add")
                }
            }
        }
    )
}

Note: I am using Column inside IconButton because again IconButton content will be in Box.

user_9001280
Related