So, I am trying to display the Card elements using LazyVerticalGrid. The elements are getting displayed in two columns as I want but the last element is getting displayed only partially above the BottomNavigation like shown in the picture this is how it's displaying Below is the code of my Composable DayScreen
`@SuppressLint("UnusedMaterialScaffoldPaddingParameter") @Composable fun DaysScreen() {
lateinit var wordsList: List<WordsModel> wordsList = ArrayList() // var savedCards by remember{ mutableStateOf(emptyList()) } val context = LocalContext.current
wordsList = wordsList + WordsModel("Sunday", " रविवार(Raviwar)", R.drawable.sunday, R.drawable.save) wordsList = wordsList + WordsModel("Monday", "सोमवार(Somvar)", R.drawable.monday, R.drawable.save) wordsList = wordsList + WordsModel("Tuesday", "मंगलवार(Mangalwar)", R.drawable.tuesday, R.drawable.save) wordsList = wordsList + WordsModel( "Wednesday", "बुधवार (Budhwar)", R.drawable.wednesday, R.drawable.save ) wordsList = wordsList + WordsModel("Thursday", "गुरुवार(Guruwar)", R.drawable.thursday, R.drawable.save) wordsList = wordsList + WordsModel("Friday", "शुक्रवार(Shukrawar)", R.drawable.friday, R.drawable.save) wordsList = wordsList + WordsModel("Saturday", "शनिवार(Shaniwar)", R.drawable.saturday, R.drawable.save) var searchText by remember { mutableStateOf("") } var filteredList by remember { mutableStateOf(wordsList) } fun filteredList(query:String){ searchText=query filteredList = wordsList.filter { it.englishName.contains(query,ignoreCase = true)||it.hindiName.contains(query,ignoreCase = true) } } val navController = rememberNavController() //For using the object on ArrowBack Icon val onBackPressedDispatcher = LocalOnBackPressedDispatcherOwner.current?.onBackPressedDispatcher Scaffold(topBar = { Box(modifier = Modifier .fillMaxWidth() .background( brush = Brush.linearGradient( colors = listOf( Color(0xFF7bd596), Color(0xFF71d29c), Color(0xFF49c5ac) ) ) )) TopAppBar(title = { Text(text = "Days") }, modifier = Modifier.height(100.dp), navigationIcon = { IconButton(onClick = { navController.popBackStack() }) { Icon( Icons.Default.ArrowBack, contentDescription = "Back", modifier = Modifier .padding(16.dp) .clickable { onBackPressedDispatcher?.onBackPressed() } ) } }, actions = { searchView1(languageList = wordsList,filteredList=filteredList){quer-> filteredList = wordsList.filter { it.englishName.contains(quer,ignoreCase = true) } } }, backgroundColor = Color(0xFF71d29c), elevation = 0.dp ) } ) { Box(modifier = Modifier.fillMaxSize()) { LazyVerticalGrid( columns = GridCells.Fixed(2) ) { items(filteredList.size) { Card( shape = RoundedCornerShape(30.dp), modifier = Modifier .padding(top = 10.dp) .width(180.dp) .height(200.dp) .clip(RoundedCornerShape(16.dp)) .navigationBarsPadding(), elevation = 6.dp, ) { Box{ Column( Modifier .fillMaxSize() .padding(5.dp) .background( brush = Brush.linearGradient( colors = listOf( Color(0xFF7bd596), Color(0xFF71d29c), Color(0xFF49c5ac) ) ) ) .clip(RoundedCornerShape(20.dp)), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center, ) { Image( painter = painterResource(id = wordsList[it].imageId), contentDescription = "Images" ) Spacer(modifier = Modifier.padding(bottom = 5.dp)) Text( text = wordsList[it].englishName, color = Color(0xFF0e63b0), fontWeight = FontWeight.Bold ) Spacer(modifier = Modifier.padding(bottom = 5.dp)) Text( text = wordsList[it].hindiName, color = Color(0xFF0e63b0), fontWeight = FontWeight.Bold ) } Image(painter = painterResource(id = wordsList[it].saveImageId), contentDescription = "Save data", modifier = Modifier .padding(8.dp) .padding(top = 10.dp) .align(Alignment.TopEnd) ) } } } } Spacer(modifier = Modifier.fillMaxWidth().height(30.dp).align(Alignment.BottomCenter)) } } } `
I have added a Spacer below but the result is same and then I also put the LazyVerticalGrid inside a Box but nothing changes. I am expecting the bottom card from list to be completely above the BottomNavigation when I scroll the list.
