Advent
On this article, we will be able to delve into the implementation of a Backside Sheet in Jetpack Compose the use of Subject material 3, in particular addressing the demanding situations encountered with the M3 Backside Sheet. The transition from M2(Subject material 2) to M3 published inconsistencies within the conduct of Backside Sheet Elements throughout other Android variations, with some gadgets exhibiting sheets at the back of the ground machine navigation, whilst others revered it. I will be able to information you during the procedure of making Backside Sheets in M3 that showcase constant conduct throughout more than a few Android variations, making sure a unbroken consumer enjoy.
Necessities
Prior to we dive into enforcing the Backside Sheet, make sure to have the most recent model of Jetpack Compose and M3 for your challenge. You’ll be able to upload the important dependencies for your construct.gradle document:
dependencies {
implementation("androidx.compose.material3:material3")
}
Implementation
- First, we could arrange the MainActivity. This could also be the place to begin of our app
elegance MainActivity : ComponentActivity() {
override amusing onCreate(savedInstanceState: Package deal?) {
tremendous.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)setContent {
BottomSheetExampleTheme {
// A floor container the use of the 'background' colour from the theme
Floor(
modifier = Modifier.fillMaxSize(),
colour = MaterialTheme.colorScheme.background
) {
HomeScreen()
}
}
}
}
}
Within the code above, we outline the MainActivity elegance and arrange the fundamental construction of our app.
Take into account of the road
WindowCompat.setDecorFitsSystemWindows(window, false)
This line is used to keep watch over how the machine home windows (such because the standing bar and navigation bar) engage with the content material displayed for your app. This serve as is a part of the AndroidX WindowCompat library. It permits you to customise the conduct of machine home windows. The primary argument (window) refers back to the present window of your app. The second one argument (false) signifies that the window’s decor (together with the standing bar and navigation bar) must no longer regulate to suit machine home windows. When set to false, your app’s content material can lengthen at the back of the machine bars (standing bar and navigation bar).
Why Use It?
- Via default, machine home windows (particularly the standing bar) can overlap your app’s content material, affecting its structure.
- Surroundings
WindowCompat.setDecorFitsSystemWindows(window, false)guarantees that your app’s content material isn’t obscured by means of machine bars. - You’ll be able to then maintain insets (further padding because of machine bars) manually the use of Compose modifiers like
Modifier.systemBarsPadding.
2. Subsequent, we arrange the HomeScreen composable serve as.
@Composable
amusing HomeScreen() {
var showBottomSheet by means of take into account { mutableStateOf(false) }
Scaffold(
) { paddingValues ->Column(
modifier = Modifier
.fillMaxSize()
.padding(paddingValues),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Association.Heart
) {
Button(onClick = { showBottomSheet = !showBottomSheet }) {
Textual content(textual content = "Display Backside Sheet")
}
}
if (showBottomSheet) {
val bottomPadding = WindowInsets.navigationBars.asPaddingValues()
.calculateBottomPadding().worth.toInt() + 8
BottomSheetContent(
onDismiss = { showBottomSheet = false },
bottomPadding = bottomPadding
)
}
}
}
The HomeScreen composable items a fundamental UI structure the use of Jetpack compose’s `Scaffold`. It comprises a targeted `Button` that, when clicked, toggles the visibility of a Backside Sheet. The Backside Sheet is conditionally displayed beneath the principle content material, and its content material is decided by means of the BottomSheetContent composable. Moreover, the Backside Sheet takes into consideration the navigation bar padding. The onDismiss parameter in BottomSheetContent handles the dismissal of the Backside Sheet when required.
3. After all, we determine the BottomSheetContent composable, housing the content material and capability of the ground sheet.
@OptIn(ExperimentalMaterial3Api::elegance)
@Composable
amusing BottomSheetContent(onDismiss: () -> Unit, bottomPadding: Int) {
val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
ModalBottomSheet(
onDismissRequest = {
onDismiss()
},
windowInsets = WindowInsets(0, 0, 0, 0),
sheetState = sheetState
) {
// Sheet content materialField(
Modifier
.padding(backside = bottomPadding.dp)
) {
Column(
modifier = Modifier
.fillMaxWidth()
) {
Row(
modifier = Modifier
.fillMaxWidth()
.clickable {
scope
.release { sheetState.cover() }
.invokeOnCompletion {
if (!sheetState.isVisible) {
onDismiss()
}
}
}
.peak(44.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Textual content(
textual content = "Edit Profile",
taste = MaterialTheme.typography.bodyLarge,
fontWeight = FontWeight.Customary,
fontSize = 15.sp,
textAlign = TextAlign.Get started,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
)
}
Row(
modifier = Modifier
.fillMaxWidth()
.clickable {
scope
.release { sheetState.cover() }
.invokeOnCompletion {
if (!sheetState.isVisible) {
onDismiss()
}
}
}
.peak(44.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Textual content(
textual content = "Settings",
taste = MaterialTheme.typography.bodyLarge,
fontWeight = FontWeight.Customary,
fontSize = 15.sp,
textAlign = TextAlign.Get started,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
)
}
Row(
modifier = Modifier
.fillMaxWidth()
.clickable {
scope
.release {
sheetState.cover()
}
.invokeOnCompletion {
if (!sheetState.isVisible) {
onDismiss()
}
}
}
.peak(44.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Textual content(
textual content = "Logout",
taste = MaterialTheme.typography.bodyLarge,
fontWeight = FontWeight.Customary,
fontSize = 15.sp,
colour = if (!isSystemInDarkTheme()) colorResource(
identity = R.colour.black
) else colorResource(
identity = R.colour.white
),
textAlign = TextAlign.Get started,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
)
}
}
}
}
}
Within the BottomSheetContent composable serve as, we outline the state for the ground sheet the use of rememberModalBottomSheetState(). We then create a ModalBottomSheet part, specifying the onDismissRequest callback when the ground sheet is pushed aside.
Conclusion
On this educational, we discovered to put in force a backside sheet in Jetpack Compose the use of subject material 3 this is constant throughout other Android Variations. You’ll be able to additional customise the ground sheet and adapt it on your app’s necessities
In finding the code on Github