How can I change TopAppBar position in the jetpack compose-CodePudding

I want to set the "Account" text to the center of TopAppBar and add an icon to the right of TopAppBar, how can I do it?

 Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = {
                    Text(
                        text = stringResource(R.string.account),
                        style = AppFont.PoppinsTypography.subtitle1
                    )
                },
                navigationIcon = {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_left),
                        contentDescription = "back", tint = AppColor.brandColor.BLUE_DE_FRANCE
                    )
                }, actions = {
                    viewModel.navigateUp()
                }, backgroundColor = AppColor.neutralColor.DOCTOR
            )
        },
    )

CodePudding user response：

To align the title text to the center of TopAppbar,

Change title to this,

title = {
    Text(
        text = stringResource(R.string.account),
        textAlign = TextAlign.Center,
        modifier = Modifier.fillMaxWidth(),
        style = AppFont.PoppinsTypography.subtitle1
    )
},

And actions attribute should have the compoosables to add at the end. Use that to add an icon to the right of TopAppBar.

Example,

actions = {
    IconButton(onClick = { /*TODO*/ }) {
        Icon(
            imageVector = Icons.Rounded.ShoppingCart,
            contentDescription = "cart",
        )
     }
 },

CodePudding user response：

You could also implement a custom layout


@Composable
fun TopBar() {
    Scaffold(
        topBar = {
            Layout(
                modifier = Modifier.fillMaxHeight(0.1f), //Fills one-tenth of the screen
                content = {
                    Text("Account")

                    Icon(
                        imageVector = Icons.Default.ArrowBack,
                        contentDescription = "back",
                        tint = Color.Blue,
                    )
                }
            ) { measurables, constraints ->

                val title = measurables[0].measure(constraints)
                val navigationIcon = measurables[1].measure(constraints)

                layout(constraints.maxWidth, constraints.maxHeight) {

                    title.place(
                        (constraints.maxWidth - title.width) / 2, //Midway
                        constraints.maxHeight / 2 // Usually Texts acquire maxHeight so we did not need t subtract
                    )

                    navigationIcon.place(
                        (constraints.maxWidth - 1.5 * navigationIcon.width).roundToInt(), //1.5 to add a bit of extra padding from the edge
                        (constraints.maxHeight - navigationIcon.height) / 2
                    )

                }
            }
        },
    ) {

    }
}