If my CenterAlignedTopAppBar always has a bottomBo...

# compose-android

[bryankeltonadams]

If my CenterAlignedTopAppBar always has a bottomBorder of 1dp on it, is there anything better than having the "MyTopAppBarComposable" be a Column which has a CenterAlignedTopAppBar plus a Box with max width + 1.dp size?

Can't seem to be able to apply a modifier on the CenterAlignedTopAppBar that will actually have a visible border appear.

Currently have

Column {
        CenterAlignedTopAppBar(
            navigationIcon = {
            },
            title = {
       
            },
            actions = actions,
            colors = TopAppBarDefaults.mediumTopAppBarColors(containerColor = MaterialTheme.fbColors.backgroundPrimary),
        )
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .size(1.dp)
                .background(Color.Red)
        )
    }

[Stylianos Gakis]

Do you care for that extra 1 dp or do you just need that divider to exist there even if it is part of the TopAppBar itself?

[bryankeltonadams]

@Stylianos Gakis Just needs to be a divider. on Figma it shows up as a 1px border. The Top App bar exists on every screen except for Modal Bottom sheet styled screens, and the divider exists below the top app bar in every instance. So instead of adding it to the top of every screen I was thinking of just adding it to the "CustomTopAppBar" composable that I'm using. Just not sure if there's a better way than what I have already.

[Albert Chang]

is there anything better than having the "MyTopAppBarComposable" be a Column which has a CenterAlignedTopAppBar plus a Box with max width + 1.dp size?

This seems good enough to me. What's your concern?

If you want to use modifier, you can use something like this:

Modifier
    .drawWithContent {
        drawContent()
        drawRect(color = Color.Red, topLeft = Offset(0f, size.height - 1.dp.toPx()))
    }
    .padding(bottom = 1.dp)

[bryankeltonadams]

@Albert Chang I suppose the concern is simply that the Composable is "MyTopAppBarComposable" but the top most child of the composable is a Column which has a Material3 CenterAlignedTopAppBar plus a 1.dp Box. But I suppose that probably shouldn't matter. Just wasn't sure if there was a way to add it to the CenterAlignedTopAppBar itself. I'll give what you've got a shot.