How can I change TopAppBar position in the jetpack compose

Question

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
            )
        },
    )

Check https://stackoverflow.com/questions/67497414/how-to-align-title-at-layout-center-in-topappbar/67499847#67499847 — Gabriele Mariotti, Oct 28 '21 at 11:30

Abhimanyu · Accepted Answer · 2022-08-04T01:06:43.970

7

To align the title text to the center of TopAppbar,

Update

Using Material 3

CenterAlignedTopAppBar( title = { Text( text = stringResource(R.string.account), 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",
        )
     }
 },

The old answer, using Material 2

Change title to this,

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

edited Aug 04 '22 at 01:06

answered Oct 28 '21 at 11:36

Abhimanyu

11,351
7
51
121

My problem is solved but when I use SVG for icons, the icon is black and with color, while the icon is colered. painterResource(id = R.drawable.ic_left) – Saeed Noshadi Oct 28 '21 at 11:46
I found the solution for changing the icon SVG color : https://stackoverflow.com/questions/68234441/painterresource-paints-my-vector-in-black – Saeed Noshadi Oct 28 '21 at 12:02
did that really work? because I don't think align would actually work here. That is what I tried before implementing a custom layout as I've posted below. Can you post an image? – Richard Onslow Roper Oct 28 '21 at 13:21
@MARSK, It is not at the exact center of the app bar if that is the expectation. This centers within the text label space, which seems to be good enough for me. We have to use a custom layout for exact center. – Abhimanyu Oct 28 '21 at 15:22
Even if it was close to the center, maybe I'd consider it (no I won't), but it is almost at the edge in my case. – Richard Onslow Roper Oct 28 '21 at 17:36
Hope this helps someone, the textAlign only worked for me when I added Modifier.weight(1f) – Android Dev Aug 04 '22 at 00:22

Richard Onslow Roper · Answer 2 · 2021-10-29T11:01:30.913

You could just 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
                    )

                }
            }
        },
    ) {

    }
}

How can I change TopAppBar position in the jetpack compose

2 Answers2

Update

Using Material 3

The old answer, using Material 2