Hi, i am trying to place a transparant topbar over the main contents and not on top of the contents ...

# compose

[Jrichards1408]

Hi, i am trying to place a transparant topbar over the main contents and not on top of the contents using scafflding but it does not work.

Below is a snippt:

Scaffold(
  
        topBar = {
            // top bar text and nav button and should be transparant background
        },
        bottomBar = {
            Column {
                Column(
                    Modifier
                        .navigationBarsPadding()
                        .imePadding()
                        .padding(horizontal = myTheme.paddings.horizontalContentPadding)
                        .fillMaxWidth()
                ) {
                    bottomContent?.invoke()
                }
            }
        },
        content = { contentPadding ->
            Box(modifier = Modifier.padding(contentPaddingOverride ?: contentPadding)) {
                content()
            }
        }
    )

I want the contents of the topbar to sit over a full screen height of the content but instead,it shifts the content down and the topbar takes its own area by default as seen on many android apps.

[dorche]

Could you visually illustrate what you want to achieve?

If the above is all you use in your Scaffold, perhaps it will make it easier for you to reason about it by swapping it to a Column instead (and/or Box if I correctly understand what you're trying to do)

[Jrichards1408]

i will try to explain

[Jrichards1408]

I basically want the topbar to be a transparant overlay taht sits on top of the main content

[Jrichards1408]

LIke how the botton bar does

[Alex Vanyo]

Is this a material3 or material Scaffold? The behavior in this area differs slightly between them.

For a material3 Scaffold, the height of the top app bar will be passed inside the contentPadding , which you can then use however you’d like inside the content.

[Jrichards1408]

i found a way

[Jrichards1408]

dont set a topbar in the scaffold but instead just place it in the content part of the scaffold