How to Align the Icon to the End in TopAppBar jetpack compose

Question

Now the icon always in the start, what should I do to align the icon to the end? I tried to use modifier but doesn't work. Thank you in advance.

Answer 1

If you want an Icon aligned at the end in the TopAppBar use the actions parameter instead of the navigationIcon.

Something like:

TopAppBar(
    title = { Text("Simple TopAppBar") },
    backgroundColor = Red,
    actions = {
        // RowScope here, so these icons will be placed horizontally
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Close, contentDescription = null)
        }
    }
)

Answer 2

App top bar example

make sure added M3 dependencies :

implementation 'androidx.compose.material3:material3:1.1.0-rc01'

---

Created seprate function for topbar

 @OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBarApp(context: Context, title: String, navigationIconClick: () -> Unit) {
    TopAppBar(
        title = {
            Text(text = title)
        },
        navigationIcon = {
            IconButton(onClick = navigationIconClick) {
                Icon(
                    imageVector = Icons.Filled.ArrowBack,
                    contentDescription = "Navigation icon"

                )
            }

        },
        actions = {
            // RowScope here, so these icons will be placed horizontally
            IconButton(onClick = { context.showToast("you clicked search icon") }) {
                Icon(Icons.Filled.Search, contentDescription = null)
            }
            IconButton(onClick = { context.showToast("you clicked share icon") }) {
                Icon(Icons.Filled.Share, contentDescription = null)
            }
            IconButton(onClick = { context.showToast("you clicked setting icon") }) {
                Icon(Icons.Filled.Settings, contentDescription = null)
            }
        },

        colors = topAppBarColors(
            containerColor = Purple80,
            scrolledContainerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(5.dp)
        )
    )

}

Call it from View :

// add top bar
                        TopBarApp(context = baseContext, "User List"){
                            baseContext.showToast("u clicked arrow back")
                        }

Output :

hope it will work for you, have a good day.