Why is floating action button ttransparent even though it is colored and showing the list behind it Jetpack Compose

Question

I have lazy list and a floating action button in the bottom end, the FAB has a color. But the floating action button in jetpack compose is showing the list in the background even thought it has a color. Even after adding the elevation it is not working. How to solve it?

                   Box(
                        contentAlignment = Alignment.Center,
                        modifier = Modifier
                            .fillMaxSize()
                    ) {
                        androidx.compose.material3.FloatingActionButton(
                            containerColor = appColors.primary,
                            contentColor = appColors.primary,
                            elevation = FloatingActionButtonDefaults.elevation(8.dp),
                            shape = CircleShape,
                            onClick = {},
                            modifier = Modifier
                                .align(Alignment.BottomEnd)
                                .padding(16.dp),
                        ) {
                            Icon(Icons.Filled.Add, null, tint = Color.White)
                        }
                        if (viewModel.state.value.patientsList.isEmpty()) {
                            Text(
                                text = "No Patients Available",
                                style = FontLibrary.regularBody16(textAlign = TextAlign.Center)
                            )
                        } else {
                            LazyColumn(
                                modifier = Modifier
                                    .padding(start = 8.dp, end = 8.dp)
                                    .fillMaxSize()
                            ) {
                                items(
                                    items = viewModel.state.value.patientsList,
                                    key = { patient ->
                                        patient.id
                                    }
                                ) { patient ->
                                    PatientCard(patient)
                                    Divider(color = appColors.secondary, thickness = 1.dp)

                                }
                            }
                        }
                    }

Answer 1

In Jetpack compose UI components are placed in the order as you place them, so in box you have first placed Floating action button, and then the list. You should place FAB in the end, ie, move its code to the bottom.

Answer 2

            Box(
                        contentAlignment = Alignment.Center,
                        modifier = Modifier
                            .fillMaxSize()
                    ) {
                        if (viewModel.state.value.patientsList.isEmpty()) {
                            Text(
                                text = "No Patients Available",
                                style = FontLibrary.regularBody16(textAlign = TextAlign.Center)
                            )
                        } else {
                            LazyColumn(
                                modifier = Modifier
                                    .padding(start = 8.dp, end = 8.dp)
                                    .fillMaxSize()
                            ) {
                                items(
                                    items = viewModel.state.value.patientsList,
                                    key = { patient ->
                                        patient.id
                                    }
                                ) { patient ->
                                    PatientCard(patient)
                                    Divider(color = appColors.secondary, thickness = 1.dp)

                                }
                            }
                        }
                        androidx.compose.material3.FloatingActionButton(
                            containerColor = appColors.primary,
                            contentColor = appColors.primary,
                            shape = CircleShape,
                            onClick = {},
                            modifier = Modifier
                                .align(BottomEnd)
                                .padding(16.dp),
                        ) {
                            Icon(Icons.Filled.Add, null, tint = Color.White)
                        }
                    }