Skip to content

Commit 30d399b

Browse files
GurupreetGurupreet
committed
updated bottomsheet and navigation drawer demo
1 parent 06b4518 commit 30d399b

File tree

1 file changed

+172
-100
lines changed

1 file changed

+172
-100
lines changed

‎app/src/main/java/com/guru/composecookbook/ui/home/dialogs/BottomSheetLayouts.kt‎

Lines changed: 172 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,187 @@
11
package com.guru.composecookbook.ui.home.dialogs
22

33

4-
import androidx.compose.material.ExperimentalMaterialApi
5-
import androidx.compose.runtime.Composable
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.clickable
6+
import androidx.compose.foundation.layout.*
7+
import androidx.compose.foundation.shape.RoundedCornerShape
8+
import androidx.compose.material.*
9+
import androidx.compose.material.icons.Icons
10+
import androidx.compose.material.icons.filled.List
11+
import androidx.compose.runtime.*
12+
import androidx.compose.ui.Modifier
13+
import androidx.compose.ui.graphics.Color
14+
import androidx.compose.ui.semantics.semantics
15+
import androidx.compose.ui.semantics.testTag
16+
import androidx.compose.ui.text.style.TextAlign
617
import androidx.compose.ui.tooling.preview.Preview
18+
import androidx.compose.ui.unit.dp
19+
import com.guru.composecookbook.ui.home.lists.VerticalListView
20+
import kotlinx.coroutines.CoroutineScope
21+
import kotlinx.coroutines.launch
722

823
@ExperimentalMaterialApi
924
@Composable
1025
fun BottomSheetLayouts() {
11-
//TODO fix bottomsheet
12-
//BottomSheetDrawer()
26+
BottomSheetDrawer()
1327
}
1428

15-
//
16-
//@ExperimentalMaterialApi
17-
//@Composable
18-
//fun BottomSheetDrawer(
19-
//) {
20-
// var sheetState by remember { mutableStateOf(BottomSheetState(show = true)) }
21-
// var drawerState = rememberBottomDrawerState(BottomDrawerValue.Closed)
22-
//
23-
// BottomDrawerLayout(
24-
// drawerState = drawerState,
25-
// drawerShape = if (sheetState.rounded) RoundedCornerShape(16.dp) else RectangleShape,
26-
// drawerContent = {
27-
// Text(
28-
// text = "Bottom sheet content",
29-
// style = typography.h6,
30-
// modifier = Modifier.padding(16.dp).fillMaxWidth(),
31-
// textAlign = TextAlign.Center
32-
// )
33-
// if (sheetState.image) {
34-
// Image(
35-
// painter = painterResource(id = R.drawable.food2),
36-
// contentDescription = null,
37-
// modifier = Modifier.fillMaxWidth(),
38-
// contentScale = ContentScale.Crop
39-
// )
40-
// }
41-
// Text(
42-
// text = DemoDataProvider.longText,
43-
// style = typography.caption,
44-
// modifier = Modifier.padding(16.dp)
45-
// )
46-
// Button(
47-
// onClick = { drawerState.close() },
48-
// modifier = Modifier.fillMaxWidth().padding(8.dp)
49-
// ) {
50-
// Text(text = "Close Sheet")
51-
// }
52-
// }
53-
// ) {
54-
// Column(modifier = Modifier.padding(16.dp)) {
55-
// Text(
56-
// text = "TODO: NOT WORKING PROPERLY FIX OPEN CLOSE STATES",
57-
// style = typography.h6,
58-
// color = MaterialTheme.colors.onError
59-
// )
60-
// Button(
61-
// onClick = {
62-
// sheetState = sheetState.copy(show = true)
63-
// drawerState.open()
64-
// },
65-
// modifier = Modifier.fillMaxWidth().padding(16.dp)
66-
// ) {
67-
// Text(text = "Simple bottom sheet")
68-
// }
69-
// Button(
70-
// onClick = {
71-
// sheetState =
72-
// sheetState.copy(show = true, image = true, buttons = true, rounded = false)
73-
// drawerState.open()
74-
// },
75-
// modifier = Modifier.fillMaxWidth().padding(16.dp)
76-
// ) {
77-
// Text(text = "Image and buttons")
78-
// }
79-
// Button(
80-
// onClick = {
81-
// sheetState = sheetState.copy(show = true, fullScree = true, rounded = false)
82-
// drawerState.open()
83-
// },
84-
// modifier = Modifier.fillMaxWidth().padding(16.dp)
85-
// ) {
86-
// Text(text = "Full Screen")
87-
// }
88-
// Button(
89-
// onClick = {
90-
// sheetState =
91-
// sheetState.copy(show = true, image = true, buttons = true, rounded = true)
92-
// drawerState.open()
93-
// },
94-
// modifier = Modifier.fillMaxWidth().padding(16.dp)
95-
// ) {
96-
// Text(text = "Rounded Sheet")
97-
// }
98-
// }
99-
// }
100-
//}
10129

10230
@ExperimentalMaterialApi
103-
@Preview
10431
@Composable
105-
fun PreviewBottomSheetLayouts() {
106-
BottomSheetLayouts()
32+
fun BottomSheetDrawer() {
33+
val bottomSheetScaffoldState = rememberBottomSheetScaffoldState()
34+
val coroutineScope = rememberCoroutineScope()
35+
val showCustomScrim = remember { mutableStateOf(false) }
36+
BottomSheetScaffold(
37+
content = {
38+
Box {
39+
ScafoldContent(coroutineScope, bottomSheetScaffoldState, showCustomScrim)
40+
if (showCustomScrim.value) {
41+
CustomBottomSheetBackgroundScrim(scaffoldState = bottomSheetScaffoldState)
42+
}
43+
}
44+
},
45+
sheetContent = {
46+
BottomSheetContent()
47+
},
48+
drawerContent = {
49+
DrawerContent()
50+
},
51+
scaffoldState = bottomSheetScaffoldState,
52+
sheetPeekHeight = 0.dp,
53+
sheetElevation = 16.dp,
54+
sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)
55+
)
10756
}
10857

109-
data class BottomSheetState(
110-
var show: Boolean = false,
111-
var image: Boolean = false,
112-
var buttons: Boolean = false,
113-
var fullScree: Boolean = false,
114-
var rounded: Boolean = false
115-
)
58+
@ExperimentalMaterialApi
59+
@Composable
60+
private fun ScafoldContent(
61+
coroutineScope: CoroutineScope,
62+
bottomSheetScaffoldState: BottomSheetScaffoldState,
63+
showCustomScrim: MutableState<Boolean>
64+
) {
65+
Column(modifier = Modifier.fillMaxSize()) {
66+
Button(
67+
modifier = Modifier
68+
.fillMaxWidth()
69+
.padding(16.dp)
70+
.height(55.dp),
71+
onClick = {
72+
showCustomScrim.value = false
73+
coroutineScope.launch {
74+
bottomSheetScaffoldState.bottomSheetState.expand()
75+
}
76+
}) {
77+
Text(text = "Bottom Sheet")
78+
}
79+
Button(
80+
modifier = Modifier
81+
.fillMaxWidth()
82+
.padding(16.dp)
83+
.height(55.dp),
84+
onClick = {
85+
coroutineScope.launch {
86+
bottomSheetScaffoldState.drawerState.open()
87+
}
88+
}) {
89+
Text(text = "Navigation Drawer")
90+
}
91+
Button(
92+
modifier = Modifier
93+
.fillMaxWidth()
94+
.padding(16.dp)
95+
.height(55.dp),
96+
onClick = {
97+
showCustomScrim.value = true
98+
coroutineScope.launch {
99+
bottomSheetScaffoldState.bottomSheetState.expand()
100+
}
101+
}) {
102+
Text(text = "BottomSheet + Custom Scrim")
103+
}
104+
}
105+
}
106+
107+
108+
@Composable
109+
fun BottomSheetContent() {
110+
Text(text = "Bottom Sheet", textAlign = TextAlign.Center, modifier = Modifier
111+
.fillMaxWidth()
112+
.padding(16.dp))
113+
Button(
114+
modifier = Modifier
115+
.fillMaxWidth()
116+
.padding(16.dp)
117+
.height(55.dp),
118+
onClick = {
119+
}) {
120+
Text(text = "Action 1")
121+
}
122+
Button(
123+
modifier = Modifier
124+
.fillMaxWidth()
125+
.padding(16.dp)
126+
.height(55.dp),
127+
onClick = {
128+
}) {
129+
Text(text = "Action 2")
130+
}
131+
Button(
132+
modifier = Modifier
133+
.fillMaxWidth()
134+
.padding(16.dp)
135+
.height(55.dp),
136+
onClick = {
137+
}) {
138+
Text(text = "Action 3")
139+
}
140+
}
141+
142+
@Composable
143+
fun DrawerContent() {
144+
Row(modifier = Modifier
145+
.fillMaxWidth()
146+
.padding(16.dp), horizontalArrangement = Arrangement
147+
.SpaceBetween) {
148+
Text(text = "Item 1")
149+
Icon(imageVector = Icons.Default.List, contentDescription = "List")
150+
}
151+
152+
Row(modifier = Modifier
153+
.fillMaxWidth()
154+
.padding(16.dp), horizontalArrangement = Arrangement
155+
.SpaceBetween) {
156+
Text(text = "Item 2")
157+
Icon(imageVector = Icons.Default.List, contentDescription = "List")
158+
}
159+
160+
Row(modifier = Modifier
161+
.fillMaxWidth()
162+
.padding(16.dp), horizontalArrangement = Arrangement
163+
.SpaceBetween) {
164+
Text(text = "Item 3")
165+
Icon(imageVector = Icons.Default.List, contentDescription = "List")
166+
}
167+
}
168+
169+
@ExperimentalMaterialApi
170+
@Composable
171+
fun CustomBottomSheetBackgroundScrim(scaffoldState: BottomSheetScaffoldState) {
172+
val coroutineScope = rememberCoroutineScope()
173+
val bottomSheetProgress = scaffoldState.bottomSheetState.progress
174+
val bottomSheetFraction = bottomSheetProgress.fraction
175+
if ((bottomSheetProgress.from == BottomSheetValue.Collapsed && bottomSheetFraction < 1.0)
176+
|| bottomSheetProgress.from == BottomSheetValue.Expanded && scaffoldState.bottomSheetState.progress.fraction.toInt() == 1) {
177+
Spacer(modifier = Modifier
178+
.fillMaxSize()
179+
.background(MaterialTheme.colors.onSurface.copy(alpha = DrawerDefaults.ScrimOpacity))
180+
.clickable {
181+
coroutineScope.launch {
182+
scaffoldState.bottomSheetState.collapse()
183+
}
184+
}
185+
)
186+
}
187+
}

0 commit comments

Comments
 (0)