Input Selection Using Bottom Sheet in Jetpack Compose

If we have multiple options out of which we want the user to select one, there are a few approaches we can take.

1. Using Dialog

Source: Google Play Store app

2. Using a new Screen

Source: Netflix app

3. Using a dropdown menu

Source: LinkedIn

4. Using Bottom Sheet

Source: LinkedIn

We are going to see how to build the option selection UI using the Bottom Sheet with Jetpack Compose.

End result

To start, we need a TextField that is clickable, but not focusable or editable. Using a TextField so that the UI looks similar when this component is used in a Form.

We are using a Box placed on top of the TextField to capture the click events.

The TextField can be replaced with any component as per requirement.

Bottom Sheet UI

The bottom sheet content here is a simple List of Texts. It can be customized to add Radio Button, Icons, selected item state, etc.

Please comment with your valuable feedback. It would help me to improvise.

Kindly 👏👏👏 if this was useful.

Please follow if you would like to see more content related to Android Jetpack Compose.