Hi, i am trying to place a transparant topbar over...
# compose
j
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:
Copy code
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.
d
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)
j
i will try to explain
I basically want the topbar to be a transparant overlay taht sits on top of the main content
LIke how the botton bar does
a
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.
j
i found a way
dont set a topbar in the scaffold but instead just place it in the content part of the scaffold