6

see image,Card overlapping the appbar

im still learning compose.in this prototype im buiding,my Column containing the card views,in this case 1 dummy card,is overlapping with the appbar. i have tried using scaffold too,same result

here is the Card code:

@Composable fun DiaryCard(){ val bs = "filler text,strings,anything "+ "jadsjjadj adsnjasjd d saasd" +" sadsad asdasd adsasda" + "sasdasdas dsa d" Column { Spacer(modifier = Modifier.padding(top = 6.dp)) Card(modifier = Modifier .fillMaxWidth() .padding(13.dp), shape = MaterialTheme.shapes.small, elevation = 5.dp, backgroundColor = Color.White){ Row(modifier = Modifier.padding(bottom = 2.dp)){ Text(text = "29 Sept. 2019", modifier = Modifier .fillMaxWidth(0.75F) .padding(start = 1.5.dp),color = Color.Black) } Divider() Spacer(modifier = Modifier.padding(bottom = 3.dp,top = 2.dp)) Column(modifier = Modifier.fillMaxWidth()) { Text(text = "today was a good day",color = Color.Black) Spacer(modifier = Modifier.padding(bottom = 3.dp)) Text(text = bs, color = Color.Black) } } } }

The Appbar:

 @Composable fun topAppbar(){ TopAppBar(backgroundColor = Color.DarkGray) { } }
Improve this question

4 Answers 4

Reset to default
16

You can use innerPadding,

 Scaffold( topBar = { TopAppBar( title = { Text( ... ) }, navigationIcon = { IconButton(onClick = { }) { Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu Icon" ) } }, backgroundColor = colorResource(id = R.color.purple_200), contentColor = Color.White, elevation = 12.dp ) }, ){ innerPadding -> Box(modifier = Modifier.padding(innerPadding)){ DiaryCard() } }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I was wondering what those padding values are for. Thanks a lot. Google has made things so complicated
8

Since Compose 1.2.0 it's required to use padding parameters, passed into Scaffold content composable. You should apply it to the topmost container/view in the content

@Composable fun MainScreen() { Scaffold(topBar = { AppBar() }) { Surface(modifier = Modifier .fillMaxSize() .padding(it)) // Add this to fix it { Content() } } }
Improve this answer

1 Comment

That approach has worked.
2

ATTACHING A CODE SNIPPET FROM MY CODE

Scaffold( topBar = {Top(onNavigationIconClick = {scope.launch {drawerState.open()}})}, bottomBar = { Bottom(navController = navController) }, content= { Column(modifier = Modifier.padding(it)) { // THE MODIFIER PARAMETER DOES THE MAGIC Navigation(navController) } } )
Improve this answer

1 Comment

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community?
1

You can:

  • Add a Scaffold with topBar = { topAppbar() }
  • Add a Column() to wrap all the content of the Card

Something like:

Scaffold(topBar = { topAppbar() }, ) { DiaryCard() }

with:

@Composable fun DiaryCard(){ val bs = "filler text,strings,anything "+ "jadsjjadj adsnjasjd d saasd" +" sadsad asdasd adsasda" + "sasdasdas dsa d" Column { Spacer(modifier = Modifier.padding(top = 6.dp)) Card( modifier = Modifier .fillMaxWidth() //.background(Color.Red) .padding(13.dp), shape = MaterialTheme.shapes.small, elevation = 5.dp, backgroundColor = Color.White ) { Column() { //It is important to avoid overlap inside the Card Row(modifier = Modifier.padding(bottom = 2.dp)) { Text( text = "29 Sept. 2019", modifier = Modifier .fillMaxWidth(0.75F) .padding(start = 1.5.dp), color = Color.Black ) } Divider() Spacer(modifier = Modifier.padding(bottom = 3.dp, top = 2.dp)) Column(modifier = Modifier.fillMaxWidth()) { Text(text = "today was a good day", color = Color.Black) Spacer(modifier = Modifier.padding(bottom = 3.dp)) Text(text = bs, color = Color.Black) } } } } }

and:

@Composable fun topAppbar(){ TopAppBar(backgroundColor = Color.DarkGray) { Text("AppBar") } }

enter image description here

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.