Bottom Sheet Dialog - Android Studio - Compose

How to create and show Bottom Sheet Dialog

In this tutorial, we will learn how to implement a Bottom Sheet Dialog in Android Studio using Jetpack Compose. Bottom Sheet Dialogs are a modern UI component from Material Design that slide up from the bottom of the screen to display additional content or actions without leaving the current screen.

Example Use Cases:

• Share options
• Quick action menus
• Simple forms or confirmations

>> Check For Java
>> Check For Kotlin
>> Check For Compose

Code:

MainActivity.kt

package com.technifysoft.myapplication

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.technifysoft.myapplication.ui.theme.MyApplicationTheme

class MainActivityCompose : ComponentActivity() {

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

        setContent {
            MainScreen()
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun MainScreen() {

        val context = LocalContext.current
        var showBottomSheet by remember { mutableStateOf(false) }

        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(20.dp)
        ) {

            Column(
                modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {

                Spacer(modifier = Modifier.height(50.dp))

                Text(
                    text = "Bottom Sheet Dialog",
                    fontSize = 20.sp
                )

                Spacer(modifier = Modifier.height(100.dp))

                Button(
                    modifier = Modifier.width(200.dp),
                    onClick = { showBottomSheet = true }
                ) {
                    Text(text = "Show Bottom Sheet")
                }
            }

            if (showBottomSheet) {
                BottomSheetContent(
                    onDismiss = { showBottomSheet = false },
                    onItemClick = { message ->
                        Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
                        showBottomSheet = false
                    }
                )
            }
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun BottomSheetContent(onDismiss: () -> Unit, onItemClick: (String) -> Unit) {
        ModalBottomSheet(onDismissRequest = onDismiss) {
            Column(modifier = Modifier.fillMaxWidth().padding(20.dp)) {

                Text(
                    text = "Choose Option",
                    style = MaterialTheme.typography.titleMedium,
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )

                Spacer(modifier = Modifier.height(20.dp))

                BottomSheetItem("Call") {
                    onItemClick("Call clicked...!")
                }

                BottomSheetItem("Send Message") {
                    onItemClick("Message clicked...!")
                }

                BottomSheetItem("Block") {
                    onItemClick("Block clicked...!")
                }

                BottomSheetItem("Cancel") {
                    onItemClick("Cancel clicked...!")
                }
            }
        }
    }

    @Composable
    fun BottomSheetItem(text: String, onClick: () -> Unit) {
        Text(
            text = text,
            style = MaterialTheme.typography.labelLarge,
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 12.dp)
                .clickable { onClick() }
        )
    }

    /**
     * GreetingPreview is a composable function for previewing the MainUI in Android Studio.
     * It is annotated with @Preview to enable live preview.
     *
     */
    @Preview(showBackground = true)
    @Composable
    private fun GreetingPreview() {
        MyApplicationTheme {
            MainScreen()
        }
    }

}

Screenshots: