androidkotlinandroid-jetpack-compose

How can I create ModalBottomSheetLayout with line on the top of in Compose


How can I create ModalBottomSheetLayout with line on the top of in Compose? It has the solution for XML but how can I do it in Compose?

Something like this

I tried to get a line by adding Box on BottomSheet but it didn't work. I tried as in this code:

Box(
    modifier = Modifier.fillMaxSize()
) {
    Divider(
        Modifier
            .size(width = 50.dp, height = 4.5.dp)
            .align(Alignment.TopCenter)
            .clip(CircleShape),
        color = MaterialTheme.colors.onBackground,
        thickness = 2.dp
    )
    ModalBottomSheetLayout(
        modifier = Modifier.fillMaxSize(),
        sheetShape = RoundedCornerShape(topStart = 25.dp, topEnd = 25.dp),
        sheetState = sheetState,
        sheetContent = {
            BasketBottomSheetContent()
        },
    ) {}
}
    ModalBottomSheetLayout(
        modifier = Modifier.fillMaxSize(),
        sheetShape = RoundedCornerShape(topStart = 25.dp, topEnd = 25.dp),
        sheetState = sheetState,
        sheetContent = {
            Column(Modifier
                .navigationBarsPadding()
                .padding(10.dp)
            ) {
                LazyColumn(Modifier.fillMaxHeight(0.85f).fillMaxWidth()) {
                    items(3) {
                        Row(Modifier.fillMaxWidth()) {
                            Box(Modifier.fillMaxWidth()) {
                                Box {
                                    AsyncImage(
                                        modifier = Modifier
                                            .width(getWidth(divisionValue = 2.7))
                                            .padding(15.dp)
                                            .clip(RoundedCornerShape(10.dp)),
                                        model = ImageRequest.Builder(LocalContext.current)
                                            .data(imageURL)
                                            .scale(Scale.FIT)
                                            .build(),
                                        contentDescription = ""
                                    )
                                }

                                Text(
                                    text = "test",
                                    modifier = Modifier.align(Alignment.Center)
                                )
                                Text(
                                    text = "4.5 $",
                                    modifier = Modifier.align(Alignment.CenterEnd)
                                )
                                Divider(Modifier.align(Alignment.BottomCenter))
                            }
                        }
                    }
                }
            }
        } {}

Solution

  • There is an example like this, maybe it will be useful for you, you can edit the codes according to you.

    https://developersbreach.com/modal-bottom-sheet-jetpack-compose-android/