CODEWITHSUNDEEP
androidandroid-jetpack-composebottom-sheet
E I
E I

Reputation: 533

Show indicator of expandability on the top of BottomSheet in BottomSheetScaffold (Jetpack Compose)

Is it possible to add this small grey round-rectangular view on the top of collapsed bottomsheet (see the screenshot) in BottomSheetScaffold (Jetpack Compose)? Does it have the property for it?

enter image description here

Upvotes: 2

Views: 1513

Answers (3)

Danilo Bargen
Danilo Bargen

Reputation: 19472

To my knowledge there is no property for it in Compose 1.1, but it can be added to the sheetContent:

Column(
    modifier = Modifier.fillMaxWidth().padding(8.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    Box(
        modifier = Modifier
            .background(
                color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f),
                shape = RoundedCornerShape(50),
            )
            .size(width = 36.dp, height = 4.dp),

    )
}

(Credits to @uragiristereo for the initial suggestion, but .clip(RoundedCornerShape(radius = 50)) didn't seem to work in Compose 1.1. Maybe the behavior changed since the older versions.)

Upvotes: 3

uragiristereo
uragiristereo

Reputation: 874

You can create it easily inside your sheetContent, here is mine for example:

Box(
  modifier = Modifier
    .background(MaterialTheme.colors.onSurface.copy(alpha = 0.2f))
    .size(width = 48.dp, height = 4.dp)
    .clip(RoundedCornerShape(radius = 50))
)

Upvotes: 0

RaBaKa 78
RaBaKa 78

Reputation: 1455

I don't think there is an option or a property for that, but you can easily make it in sheetContent when you are creating your own Bottom Sheet Content.

Upvotes: 0

Related Questions