If you’re looking to add a bottom sheet to your app design using Jetpack Compose, you’re in luck! This tutorial will guide you through the process step-by-step, making it easy for beginners to implement BottomSheetScaffold Jetpack Compose. Get ready to take your app design with Bottom sheet Jetpack Compose.
What is a Bottom Sheet in Jetpack Compose?
A bottom sheet is a design element that slides up from the bottom of the screen to display additional content or options. It’s a popular feature in many mobile apps and can be used for a variety of purposes, such as display settings, navigation options, or additional information. With Jetpack Compose, implementing a bottom sheet is easy and can add a professional touch to your app design.
Setting up the Bottom Sheet in your app.
To set up a bottom sheet in your app using Jetpack Compose, you’ll need to first create a Composable function that will display the content of the bottom sheet. Then, you’ll need to create a state variable to track whether the bottom sheet is open or closed.
Finally, you’ll need to add a button or other trigger to open and close the bottom sheet. With these steps, you’ll have a functional bottom sheet in your app in no time.
package com.compose.bottomsheetscaffoldcompose
import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
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.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.compose.bottomsheetscaffoldcompose.ui.theme.Purple500
import kotlinx.coroutines.launch
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BottomSheetCompose() {
val sheetState = rememberBottomSheetScaffoldState(
bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
)
val coroutineScope = rememberCoroutineScope()
BottomSheetScaffold(
scaffoldState = sheetState, sheetContent = {
Box(
modifier = Modifier
.fillMaxWidth()
.height(250.dp)
.background(Color.White)
) {
Text(text = "Empty Bottom Sheet")
}
}, sheetPeekHeight = 48.dp
) {
Column(
modifier = Modifier
.fillMaxSize(1f)
.background(Color.LightGray),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Button(onClick = {
coroutineScope.launch {
if (sheetState.bottomSheetState.isCollapsed) sheetState.bottomSheetState.expand()
else sheetState.bottomSheetState.collapse()
}
}) {
Text(text = "Toggle bottom sheet")
}
}
}
}
Customizing the Bottom Sheet with Compose.
Once you have the basic bottom sheet set up in Jetpack Compose, you can start customizing it to fit your app’s design and functionality. You can change the background color, add animations, and adjust the size and position of the sheet. You can also add buttons or other interactive elements to the sheet to allow users to interact with it. With the flexibility of Jetpack Compose, the possibilities for customizing your bottom sheet are endless.
Create an Item view in BottomSheet
@Composable
fun RowItem(title: String, @DrawableRes resourceId: Int, onClick: () -> Unit) {
Row(
modifier = Modifier
.padding(8.dp)
.height(40.dp)
.clickable { onClick },
verticalAlignment = Alignment.CenterVertically,
) {
Spacer(modifier = Modifier.width(4.dp))
Image(
painter = painterResource(id = resourceId), contentDescription = null
)
Spacer(modifier = Modifier.width(16.dp))
Text(
text = title,
fontWeight = FontWeight.Normal,
fontSize = 20.sp,
)
}
Spacer(modifier = Modifier.height(4.dp))
}
Finally, the BottomSheet Compose function looks like below
Don’t waste much time on that, Just copy the full compose function and modify the UI based on your own need along the Onclick callback function.
package com.compose.bottomsheetscaffoldcompose
import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
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.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun BottomSheetCompose() {
val sheetState = rememberBottomSheetScaffoldState(
bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
)
val coroutineScope = rememberCoroutineScope()
BottomSheetScaffold(
scaffoldState = sheetState, sheetContent = {
Box(
modifier = Modifier
.fillMaxWidth()
.height(250.dp)
.background(Color.White)
) {
Column() {
RowItem(title = "Share", resourceId = R.drawable.ic_baseline_share_24, onClick = {
/**
* Perform operation in Share
*/
})
RowItem(title = "Upload", resourceId = R.drawable.ic_baseline_cloud_upload_24, onClick = {
/**
* Perform operation in Upload
*/
})
RowItem(title = "Copy", resourceId = R.drawable.ic_copy, onClick = {
/**
* Perform operation in Copy
*/
})
RowItem(title = "Print this page", resourceId = R.drawable.ic_print, onClick = {
/**
* Perform operation in Print
*/
})
}
}
}, sheetPeekHeight = 48.dp
) {
Column(
modifier = Modifier
.fillMaxSize(1f)
.background(Color.LightGray),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Button(onClick = {
coroutineScope.launch {
if (sheetState.bottomSheetState.isCollapsed) sheetState.bottomSheetState.expand()
else sheetState.bottomSheetState.collapse()
}
}) {
Text(text = "Toggle bottom sheet")
}
}
}
}
How to use BottomSheetCompose function
On the above, the compose function is ready to use. So let’s open the MainActivity or where you want to display this BottomSheet. Now run the application, Just click on the button it will toggle the bottom sheet.
package com.compose.bottomsheetscaffoldcompose
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.compose.bottomsheetscaffoldcompose.ui.theme.BottomSheetScaffoldComposeTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
BottomSheetScaffoldComposeTheme {
// A surface container using the 'background' color from the theme
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
BottomSheetCompose()
}
}
}
}
}
Conclusion
That is all about the bottom sheet jetpack compose. In this android tutorial, we learned how to implement Bottom Sheet Jetpack Scaffold with Jetpack Compose in Android. I hope this post will help you. If you have any queries, please put them in the comment box, and I will be happy the answer them.
Please follow us on social media and share this tutorial with your friends