How to create bottom sheet dialog with Jetpack Compose?

Last updated Jan 22, 2022


In this Jetpack compose tutorial we will learn How to create bottom sheet dialog in Android application using Jetpack Compose. Bottom sheet is an area containing additional content that are anchored to the bottom of the screen. 

Scaffold basically provides API that will combine different material components to make our layout. In the same way BackdropScaffold uses a backdrop as the centerpiece of the screen.

To use bottom sheet we need BottomSheetScaffold which is annotated  as ExperimentalMaterialApi, BottomSheetState (State which persistent bottom sheet in BottomSheetScaffold), remember BottomSheetScaffoldState ( which create and remember BottomSheetScaffoldState)

Some parameters for BottomSheetScaffold were given below:

sheetContent - Which contains the content of the bottom sheet.

scaffoldState - state of the Scaffold.

topBar -  top bar bar which is optional field.

sheetPeekHeight - The height of the bottom sheet when it is collapsed.

sheetContentColor - To set the color for the bottomsheet childs items we will use this property. Defaults to the matching content color for sheetBackgroundColor, or if that is not a color from the theme, this will keep the same content color set above the bottom sheet.

content - This the content of the Scaffold.

Let's get started

Step 1: Create android application in android studio

Step 2: Follow step for setup Jetpack Compose with Android Studio

Lets define bottomSheetScaffoldState which will hold the state of Scaffold

val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
    bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
)

 

Lets create list to show in bottom sheet

data class BottomSheetItem(val title: String, val icon: ImageVector)
val bottomSheetItems = listOf(
    BottomSheetItem(title = "Folder", icon = Icons.Default.Folder),
    BottomSheetItem(title = "Upload", icon = Icons.Default.Upload),
    BottomSheetItem(title = "Scan", icon = Icons.Default.Scanner),
    BottomSheetItem(title = "Google Docs", icon = Icons.Default.Receipt),
    BottomSheetItem(title = "Google Sheets", icon = Icons.Default.Receipt),
    BottomSheetItem(title = "Settings", icon = Icons.Default.Settings)
)

 

 

Ui for bottom sheet

Column(
    content = {
        Spacer(modifier = Modifier.padding(16.dp))
        Text(
            text = "Create New",
            modifier = Modifier
                .fillMaxWidth(),
            textAlign = TextAlign.Center,
            fontWeight = FontWeight.Bold,
            fontSize = 21.sp,
            color = Color.White
        )
        LazyVerticalGrid(
            cells = GridCells.Fixed(3)
        ) {
            items(bottomSheetItems.size, itemContent = {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(top = 24.dp)
                ) {
                    Spacer(modifier = Modifier.padding(8.dp))
                    Icon(
                        bottomSheetItems[it].icon,
                        "",
                        tint = Color.White
                    )
                    Spacer(modifier = Modifier.padding(8.dp))
                    Text(text = bottomSheetItems[it].title, color = Color.White)
                }

            })
        }
    }, modifier = Modifier
        .fillMaxWidth()
        .height(300.dp)
        .background(Color(0xAA3fa7cc))
        .padding(16.dp)
)

 

 

top app bar ui

TopAppBar(
    title = { Text("Bottom Sheet Demo") },
    backgroundColor = Color.White,
    contentColor = Color.Blue
)

 

 

Add button to open bottom sheet

Column(modifier = Modifier.fillMaxSize()) {
    Button(
        modifier = Modifier
            .padding(20.dp),
        onClick = {
            coroutineScope.launch {
                if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                    bottomSheetScaffoldState.bottomSheetState.expand()
                } else {
                    bottomSheetScaffoldState.bottomSheetState.collapse()
                }
            }
        }
    ) {
        Text(
            text = "Click to show Bottom Sheet"
        )
    }
}

 

 

Full code

package com.example.jetpack

import android.os.Bundle
import android.view.WindowManager
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.GridCells
import androidx.compose.foundation.lazy.LazyVerticalGrid
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch


class MainActivity : ComponentActivity() {

    @ExperimentalMaterialApi
    @ExperimentalFoundationApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)
        setContent {
            BottomSheetDemo()
        }
    }
}

@ExperimentalMaterialApi
@ExperimentalFoundationApi
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BottomSheetDemo()
}

data class BottomSheetItem(val title: String, val icon: ImageVector)

@ExperimentalFoundationApi
@ExperimentalMaterialApi
@Composable
fun BottomSheetDemo() {
    val bottomSheetItems = listOf(
        BottomSheetItem(title = "Folder", icon = Icons.Default.Folder),
        BottomSheetItem(title = "Upload", icon = Icons.Default.Upload),
        BottomSheetItem(title = "Scan", icon = Icons.Default.Scanner),
        BottomSheetItem(title = "Google Docs", icon = Icons.Default.Receipt),
        BottomSheetItem(title = "Google Sheets", icon = Icons.Default.Receipt),
        BottomSheetItem(title = "Settings", icon = Icons.Default.Settings)
    )
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
    )
    val coroutineScope = rememberCoroutineScope()
    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetContent = {
            Column(
                content = {
                    Spacer(modifier = Modifier.padding(16.dp))
                    Text(
                        text = "Create New",
                        modifier = Modifier
                            .fillMaxWidth(),
                        textAlign = TextAlign.Center,
                        fontWeight = FontWeight.Bold,
                        fontSize = 21.sp,
                        color = Color.White
                    )
                    LazyVerticalGrid(
                        cells = GridCells.Fixed(3)
                    ) {
                        items(bottomSheetItems.size, itemContent = {
                            Column(
                                horizontalAlignment = Alignment.CenterHorizontally,
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .padding(top = 24.dp)
                            ) {
                                Spacer(modifier = Modifier.padding(8.dp))
                                Icon(
                                    bottomSheetItems[it].icon,
                                    "",
                                    tint = Color.White
                                )
                                Spacer(modifier = Modifier.padding(8.dp))
                                Text(text = bottomSheetItems[it].title, color = Color.White)
                            }

                        })
                    }
                }, modifier = Modifier
                    .fillMaxWidth()
                    .height(300.dp)
                    .background(Color(0xAA3fa7cc))
                    .padding(16.dp)
            )
        },
        sheetPeekHeight = 0.dp,
        topBar = {
            TopAppBar(
                title = { Text("Bottom Sheet Demo") },
                backgroundColor = Color.White,
                contentColor = Color.Blue
            )
        }
    ) {
        Column(modifier = Modifier.fillMaxSize()) {
            Button(
                modifier = Modifier
                    .padding(20.dp),
                onClick = {
                    coroutineScope.launch {
                        if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                            bottomSheetScaffoldState.bottomSheetState.expand()
                        } else {
                            bottomSheetScaffoldState.bottomSheetState.collapse()
                        }
                    }
                }
            ) {
                Text(
                    text = "Click to show Bottom Sheet"
                )
            }
        }
    }
}

 

Image

How to create BottomSheet Dialog with Jetpack compose

Conclusion: In this Jetpack compose tutorial we covered how to work with bottom sheet in Jetpack compose.

Tags: What is Bottom Sheet, Bottom Sheet in Jetpack compose, Bottom Sheet Dialog, How to create Bottom Sheet in Jetpack Compose


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

704 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions