Android Jetpack Compose BottomSheet with Material-3

Jetpack compose material-3 bottom sheet

Introduction:

In this tutorial, we will explore how to implement a bottom sheet in Android Jetpack Compose using Material-3. The bottom sheet is a common UI component that can enhance user experience by providing additional content or options within an app. We will leverage the Material-3 library to create a sleek and modern bottom sheet design.

Prerequisites:

Before we begin, make sure you have the following dependency added to your project’s build.gradle file:

implementation 'androidx.compose.material3:material3:1.2.0-alpha02'

Implementation:

First, let’s set up the MainActivity class and the necessary dependencies:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.BottomSheetDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            var showSheet by remember { mutableStateOf(false) }

            if (showSheet) {
                BottomSheet() {
                    showSheet = false
                }
            }

            JCBottomNavigationDemoTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Button(onClick = {
                            showSheet = true
                        }) {
                            Text(text = "Show BottomSheet")
                        }
                    }
                }
            }
        }
    }
}

In the above code, we define the MainActivity class and set up the basic structure of our app. We have a showSheet variable that tracks whether the bottom sheet should be shown or not. When the user clicks the "Show BottomSheet" button, the showSheet variable is set to true, triggering the display of the bottom sheet.

Next, let’s create the BottomSheet composable function:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomSheet(onDismiss: () -> Unit) {
    val modalBottomSheetState = rememberModalBottomSheetState()

    ModalBottomSheet(
        onDismissRequest = { onDismiss() },
        sheetState = modalBottomSheetState,
        dragHandle = { BottomSheetDefaults.DragHandle() },
    ) {
        CountryList()
    }
}

In the BottomSheet function, we define the state for the bottom sheet using rememberModalBottomSheetState(). We then create a ModalBottomSheet component, specifying the onDismissRequest callback when the bottom sheet is dismissed and the dragHandle for easy dragging. Inside the bottom sheet, we call the CountryList function to display the list of countries.

Finally, let’s create the CountryList composable function that displays the list of countries:

@Composable
fun CountryList() {
    val countries = listOf(
        Pair("United States", "\uD83C\uDDFA\uD83C\uDDF8"),
        Pair("Canada", "\uD83C\uDDE8\uD83C\uDDE6"),
        Pair("India", "\uD83C\uDDEE\uD83C\uDDF3"),
        Pair("Germany", "\uD83C\uDDE9\uD83C\uDDEA"),
        Pair("France", "\uD83C\uDDEB\uD83C\uDDF7"),
        Pair("Japan", "\uD83C\uDDEF\uD83C\uDDF5"),
        Pair("China", "\uD83C\uDDE8\uD83C\uDDF3"),
        Pair("Brazil", "\uD83C\uDDE7\uD83C\uDDF7"),
        Pair("Australia", "\uD83C\uDDE6\uD83C\uDDFA"),
        Pair("Russia", "\uD83C\uDDF7\uD83C\uDDFA"),
        Pair("United Kingdom", "\uD83C\uDDEC\uD83C\uDDE7"),
    )

    LazyColumn {
        items(countries) { (country, flag) ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 10.dp, horizontal = 20.dp)
            ) {
                Text(
                    text = flag,
                    modifier = Modifier.padding(end = 20.dp)
                )
                Text(text = country)
            }
        }
    }
}

In the CountryList function, we define a list of countries along with their corresponding flag emoji representations. We use a LazyColumn to display the list of countries in a scrollable manner. Each country item is represented by a Row containing the flag emoji and the country name.

Conclusion:

In this tutorial, we learned how to implement a bottom sheet in Android Jetpack Compose using Material-3. We explored the necessary code and dependencies required to create a bottom sheet and displayed a list of countries as an example. You can further customize the bottom sheet and adapt it to your app’s requirements. Jetpack Compose and Material-3 provide powerful tools to create modern and interactive UI components, enhancing the user experience in Android apps.

Stay Updated with the Latest Posts: Don’t Miss Out!

If you found this post helpful, show your support by giving multiple claps 👏

Thank you for your support and appreciation! 😊🙏