How to remove the start padding of Appbar in Jeptack compose

Question

I'm working on a custom TopAppBar for my app using Jetpack Compose, and I've encountered an issue where there's an unexpected start padding that I can't seem to remove. I've tried adjusting the padding and modifiers on the TopAppBar and its content, but the padding persists.

class HomeActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)

       setContent {
           VoxTheme {

               // A surface container using the 'background' color from the theme
                   Scaffold(topBar = {
                       CustomBar()
                   },
                   ) { it ->
                       Surface(
                           modifier = Modifier.fillMaxSize(),
                           color = MaterialTheme.colorScheme.background
                       ) {
                           Box(
                               modifier = Modifier
                                   .fillMaxSize()
                                   .background(Color.Red),
                               contentAlignment = Alignment.Center,
                           ) {
                               Text(text = "Hello, App!")
                           }
                       }

                   }


           }
       }
   }
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomBar() {
   TopAppBar(
       modifier = Modifier
           .fillMaxWidth()
           .background(Color.Green)
           .padding(0.dp),
   title = {
       Row(
           modifier = Modifier
               .fillMaxSize()
               .background(Color.Blue)
                           ,
           verticalAlignment = Alignment.CenterVertically,
       ) {

               Text(
                   text = "App",
                   maxLines = 1,
                   overflow = TextOverflow.Ellipsis,
               )

       }
   },
   )
}

Yet it makes some kind of start padding that I cannot remove

What I've tried so far: Adjusting Modifier.padding settings on both the TopAppBar and its child elements.

Reviewing the TopAppBar documentation for any default padding that I might need to override.

Questions:

How can I remove the start padding to allow the green background of the TopAppBar to fill the entire screen width?

Is there a specific modifier or property of TopAppBar that controls this padding?

Any suggestions or insights would be greatly appreciated.

Answer 1

Composables from material libraries follow material design guidelines and not all of their parameters can be adjusted, so sometimes you have to create your own composable or hack around.

You cannot set background of TopBar with modifier (TopAppBar(Modifier.background(Color.Green)) - this won't work, because that modifier is applied to Surface and overriden by its color argument. To change the color of top app bar, you have to change the colors argument:

TopAppBar(
    colors = TopAppBarDefaults.topAppBarColors(
        containerColor = Color.Green,
    )
)

Since the TopAppBar takes the whole screen width, this green background will actually fill the whole screen width too, so you might be done here.

If you need the Row inside title to fill the whole width too, you will have to do some hacking, since that padding is applied in TopAppBarLayout and you cannot change it. It's the TopAppBarTitleInset and TopAppBarHorizontalPadding.

If you want to hack around it, you can do something like this:

TopAppBar(
    modifier = Modifier.fillMaxWidth(),
    title = {
        Row(
            modifier = Modifier
                .fillMaxSize()
                .layout { measurable, constraints ->
                    val paddingCompensation = 16.dp.toPx().roundToInt()
                    val adjustedConstraints = constraints.copy(
                        // not a good idea inside horizontal scroll view,
                        // but I guess we can assume that's not the case here
                        maxWidth = constraints.maxWidth + paddingCompensation
                    )
                    val placeable = measurable.measure(adjustedConstraints)
                    layout(placeable.width, placeable.height) {
                        placeable.place(-paddingCompensation / 2, 0)
                    }
                }
                .background(Color.Blue),
            verticalAlignment = Alignment.CenterVertically,
        ) {
        }
    },
)

this is obviously not great, since the library can get updated and the values changed, which will break your layout... but it works now.