Skip to content

Commit 26f8cea

Browse files
workspaceworkspace
committed
improve sample
- add NavigationBarProperties control - design improvement
1 parent 9ceed43 commit 26f8cea

File tree

7 files changed

+353
-50
lines changed

7 files changed

+353
-50
lines changed

‎app/build.gradle‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ dependencies {
5050
implementation Dependencies.composeActivity
5151
implementation Dependencies.androidxCoreKtx
5252
implementation Dependencies.material
53+
implementation Dependencies.colorPicker
5354
testImplementation 'junit:junit:4.13.2'
5455
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
5556
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'

‎app/src/main/kotlin/com/holix/android/bottomsheetdialogcomposedemo/MainActivity.kt‎

Lines changed: 111 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,25 @@ import androidx.activity.compose.setContent
66
import androidx.appcompat.app.AppCompatActivity
77
import androidx.compose.foundation.isSystemInDarkTheme
88
import androidx.compose.foundation.layout.*
9+
import androidx.compose.foundation.rememberScrollState
910
import androidx.compose.foundation.shape.RoundedCornerShape
11+
import androidx.compose.foundation.verticalScroll
1012
import androidx.compose.material.*
1113
import androidx.compose.runtime.getValue
1214
import androidx.compose.runtime.mutableStateOf
15+
import androidx.compose.runtime.remember
1316
import androidx.compose.runtime.saveable.rememberSaveable
1417
import androidx.compose.runtime.setValue
15-
import androidx.compose.ui.Alignment
1618
import androidx.compose.ui.Modifier
19+
import androidx.compose.ui.graphics.luminance
1720
import androidx.compose.ui.unit.dp
1821
import com.holix.android.bottomsheetdialog.compose.BottomSheetDialog
1922
import com.holix.android.bottomsheetdialog.compose.BottomSheetDialogProperties
23+
import com.holix.android.bottomsheetdialog.compose.NavigationBarProperties
24+
import com.holix.android.bottomsheetdialogcomposedemo.preferences.BooleanPreference
25+
import com.holix.android.bottomsheetdialogcomposedemo.preferences.ColorPreference
26+
import com.holix.android.bottomsheetdialogcomposedemo.preferences.PreferenceCategory
27+
import com.holix.android.bottomsheetdialogcomposedemo.preferences.SingleChoicePreference
2028

2129
class MainActivity : AppCompatActivity() {
2230
override fun onCreate(savedInstanceState: Bundle?) {
@@ -29,6 +37,10 @@ class MainActivity : AppCompatActivity() {
2937
lightColors()
3038
}
3139
) {
40+
var showBottomSheetDialog by rememberSaveable {
41+
mutableStateOf(false)
42+
}
43+
// BottomSheetProperties
3244
var dismissOnBackPress by rememberSaveable {
3345
mutableStateOf(true)
3446
}
@@ -38,8 +50,16 @@ class MainActivity : AppCompatActivity() {
3850
var dismissWithAnimation by rememberSaveable {
3951
mutableStateOf(false)
4052
}
41-
var showBottomSheetDialog by rememberSaveable {
42-
mutableStateOf(false)
53+
// NavigationBarProperties
54+
val surfaceColor = MaterialTheme.colors.surface
55+
var navigationBarColor by remember(surfaceColor) {
56+
mutableStateOf(surfaceColor)
57+
}
58+
var darkIcons by rememberSaveable {
59+
mutableStateOf(DarkIconsValue.Default)
60+
}
61+
var navigationBarContrastEnforced by rememberSaveable {
62+
mutableStateOf(true)
4363
}
4464
if (showBottomSheetDialog) {
4565
BottomSheetDialog(
@@ -51,7 +71,15 @@ class MainActivity : AppCompatActivity() {
5171
dismissOnBackPress = dismissOnBackPress,
5272
dismissOnClickOutside = dismissOnClickOutside,
5373
dismissWithAnimation = dismissWithAnimation,
54-
navigationBarColor = MaterialTheme.colors.surface
74+
navigationBarProperties = NavigationBarProperties(
75+
color = navigationBarColor,
76+
darkIcons = when (darkIcons) {
77+
DarkIconsValue.Default -> navigationBarColor.luminance() > 0.5F
78+
DarkIconsValue.True -> true
79+
DarkIconsValue.False -> false
80+
},
81+
navigationBarContrastEnforced = navigationBarContrastEnforced
82+
)
5583
)
5684
) {
5785
Surface(
@@ -60,69 +88,102 @@ class MainActivity : AppCompatActivity() {
6088
Column(
6189
modifier = Modifier
6290
.fillMaxWidth()
63-
.padding(16.dp),
91+
.padding(16.dp)
92+
.verticalScroll(rememberScrollState()),
6493
verticalArrangement = Arrangement.spacedBy(16.dp)
6594
) {
6695
Text(text = "Title", style = MaterialTheme.typography.h5)
6796
repeat(5) { index ->
68-
Text(text = "Item $index", style = MaterialTheme.typography.body1)
97+
Text(
98+
text = "Item $index",
99+
style = MaterialTheme.typography.body1
100+
)
69101
}
70102
}
71103
}
72104
}
73105
}
74106
Surface {
75-
Box(
76-
modifier = Modifier.fillMaxSize(),
77-
contentAlignment = Alignment.Center
107+
Column(
108+
modifier = Modifier.fillMaxSize()
78109
) {
79110
Column(
80-
verticalArrangement = Arrangement.spacedBy(16.dp),
81-
horizontalAlignment = Alignment.CenterHorizontally
111+
modifier = Modifier
112+
.fillMaxWidth()
113+
.weight(1F)
114+
.verticalScroll(rememberScrollState())
82115
) {
83-
Row(
84-
verticalAlignment = Alignment.CenterVertically,
85-
horizontalArrangement = Arrangement.spacedBy(8.dp)
86-
) {
87-
Text(text = "dismissOnBackPress")
88-
Switch(
89-
checked = dismissOnBackPress,
90-
onCheckedChange = {
91-
dismissOnBackPress = it
92-
}
93-
)
94-
}
95-
Row(
96-
verticalAlignment = Alignment.CenterVertically,
97-
horizontalArrangement = Arrangement.spacedBy(8.dp)
98-
) {
99-
Text(text = "dismissOnClickOutside")
100-
Switch(
101-
checked = dismissOnClickOutside,
102-
onCheckedChange = {
103-
dismissOnClickOutside = it
104-
}
105-
)
106-
}
107-
Row(
108-
verticalAlignment = Alignment.CenterVertically,
109-
horizontalArrangement = Arrangement.spacedBy(8.dp)
110-
) {
111-
Text(text = "dismissWithAnimation")
112-
Switch(
113-
checked = dismissWithAnimation,
114-
onCheckedChange = {
115-
dismissWithAnimation = it
116-
}
117-
)
118-
}
119-
Button(onClick = { showBottomSheetDialog = true }) {
120-
Text(text = "Show")
121-
}
116+
PreferenceCategory("BottomSheetDialogProperties")
117+
BooleanPreference(
118+
value = dismissOnBackPress,
119+
onValueChange = {
120+
dismissOnBackPress = it
121+
},
122+
label = "dismissOnBackPress"
123+
)
124+
BooleanPreference(
125+
value = dismissOnClickOutside,
126+
onValueChange = {
127+
dismissOnClickOutside = it
128+
},
129+
label = "dismissOnClickOutside"
130+
)
131+
BooleanPreference(
132+
value = dismissWithAnimation,
133+
onValueChange = {
134+
dismissWithAnimation = it
135+
},
136+
label = "dismissWithAnimation"
137+
)
138+
PreferenceCategory("NavigationBarProperties")
139+
ColorPreference(
140+
value = navigationBarColor,
141+
onValueChange = {
142+
navigationBarColor = it
143+
},
144+
label = "color"
145+
)
146+
SingleChoicePreference(
147+
value = darkIcons.name,
148+
onValueChange = {
149+
darkIcons = DarkIconsValue.valueOf(it)
150+
},
151+
label = "darkIcons",
152+
options = DarkIconsValue.values().map { value ->
153+
Pair(
154+
value.name,
155+
when (value) {
156+
DarkIconsValue.Default ->
157+
"Default (color.luminance() > 0.5F) = " +
158+
"${navigationBarColor.luminance() > 0.5F}"
159+
else -> value.name
160+
}
161+
)
162+
}
163+
)
164+
BooleanPreference(
165+
value = navigationBarContrastEnforced,
166+
onValueChange = {
167+
navigationBarContrastEnforced = it
168+
},
169+
label = "navigationBarContrastEnforced"
170+
)
171+
}
172+
Button(
173+
modifier = Modifier
174+
.padding(16.dp)
175+
.fillMaxWidth(),
176+
onClick = { showBottomSheetDialog = true }
177+
) {
178+
Text(text = "Show")
122179
}
123180
}
124181
}
125182
}
126183
}
127184
}
128185
}
186+
187+
private enum class DarkIconsValue {
188+
Default, True, False
189+
}

‎app/src/main/kotlin/com/holix/android/bottomsheetdialogcomposedemo/preferences/BooleanPreference.kt‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
package com.holix.android.bottomsheetdialogcomposedemo.preferences
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Row
5+
import androidx.compose.foundation.layout.fillMaxWidth
6+
import androidx.compose.foundation.layout.padding
7+
import androidx.compose.material.MaterialTheme
8+
import androidx.compose.material.Switch
9+
import androidx.compose.material.Text
10+
import androidx.compose.runtime.Composable
11+
import androidx.compose.runtime.getValue
12+
import androidx.compose.runtime.rememberUpdatedState
13+
import androidx.compose.ui.Alignment
14+
import androidx.compose.ui.Modifier
15+
import androidx.compose.ui.text.font.FontWeight
16+
import androidx.compose.ui.unit.dp
17+
18+
@Composable
19+
fun BooleanPreference(
20+
value: Boolean,
21+
onValueChange: (Boolean) -> Unit,
22+
label: String,
23+
) {
24+
val currentOnValueChange by rememberUpdatedState(onValueChange)
25+
Row(
26+
modifier = Modifier.fillMaxWidth().padding(16.dp, 8.dp),
27+
verticalAlignment = Alignment.CenterVertically,
28+
horizontalArrangement = Arrangement.spacedBy(8.dp)
29+
) {
30+
Text(
31+
text = label,
32+
style = MaterialTheme.typography.body1,
33+
fontWeight = FontWeight.Bold
34+
)
35+
Switch(
36+
checked = value,
37+
onCheckedChange = currentOnValueChange
38+
)
39+
}
40+
}

‎app/src/main/kotlin/com/holix/android/bottomsheetdialogcomposedemo/preferences/ColorPreference.kt‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
package com.holix.android.bottomsheetdialogcomposedemo.preferences
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.*
5+
import androidx.compose.foundation.shape.RoundedCornerShape
6+
import androidx.compose.material.Button
7+
import androidx.compose.material.MaterialTheme
8+
import androidx.compose.material.Surface
9+
import androidx.compose.material.Text
10+
import androidx.compose.runtime.*
11+
import androidx.compose.runtime.saveable.rememberSaveable
12+
import androidx.compose.ui.Alignment
13+
import androidx.compose.ui.Modifier
14+
import androidx.compose.ui.draw.clip
15+
import androidx.compose.ui.graphics.Color
16+
import androidx.compose.ui.graphics.toArgb
17+
import androidx.compose.ui.text.font.FontWeight
18+
import androidx.compose.ui.unit.dp
19+
import androidx.compose.ui.window.Dialog
20+
import com.github.skydoves.colorpicker.compose.*
21+
22+
@Composable
23+
fun ColorPreference(
24+
value: Color,
25+
onValueChange: (Color) -> Unit,
26+
label: String
27+
) {
28+
val surfaceColor = MaterialTheme.colors.surface
29+
val currentOnValueChange by rememberUpdatedState(onValueChange)
30+
var showColorPickerDialog by rememberSaveable {
31+
mutableStateOf(false)
32+
}
33+
if (showColorPickerDialog) {
34+
var targetColor by remember {
35+
mutableStateOf(value)
36+
}
37+
Dialog(
38+
onDismissRequest = { showColorPickerDialog = false }
39+
) {
40+
Surface {
41+
Column(
42+
modifier = Modifier
43+
.fillMaxWidth()
44+
.padding(16.dp, 8.dp),
45+
horizontalAlignment = Alignment.CenterHorizontally,
46+
verticalArrangement = Arrangement.spacedBy(8.dp)
47+
) {
48+
val controller = rememberColorPickerController()
49+
HsvColorPicker(
50+
modifier = Modifier
51+
.size(300.dp),
52+
controller = controller,
53+
onColorChanged = { colorEnvelope: ColorEnvelope ->
54+
targetColor = colorEnvelope.color
55+
}
56+
)
57+
AlphaSlider(
58+
modifier = Modifier
59+
.fillMaxWidth()
60+
.padding(10.dp)
61+
.height(35.dp),
62+
controller = controller,
63+
)
64+
BrightnessSlider(
65+
modifier = Modifier
66+
.fillMaxWidth()
67+
.padding(10.dp)
68+
.height(35.dp),
69+
controller = controller,
70+
)
71+
Box(
72+
modifier = Modifier
73+
.clip(RoundedCornerShape(8.dp))
74+
.background(color = targetColor)
75+
.size(64.dp)
76+
)
77+
Text(text = "#" + Integer.toHexString(targetColor.toArgb()).uppercase(),)
78+
Button(
79+
modifier = Modifier.fillMaxWidth(),
80+
onClick = {
81+
onValueChange(targetColor)
82+
showColorPickerDialog = false
83+
}
84+
) {
85+
Text(text = "Apply")
86+
}
87+
}
88+
}
89+
}
90+
}
91+
Row(
92+
modifier = Modifier
93+
.fillMaxWidth()
94+
.padding(16.dp, 8.dp),
95+
verticalAlignment = Alignment.CenterVertically,
96+
horizontalArrangement = Arrangement.spacedBy(8.dp)
97+
) {
98+
Text(text = label, fontWeight = FontWeight.Bold)
99+
when (value) {
100+
MaterialTheme.colors.surface -> {
101+
Text("Default - MaterialTheme.colors.surface")
102+
Spacer(modifier = Modifier.weight(1F))
103+
Button(
104+
onClick = { showColorPickerDialog = true }
105+
) {
106+
Text("Set")
107+
}
108+
}
109+
else -> {
110+
Box(
111+
modifier = Modifier
112+
.background(value)
113+
.size(24.dp)
114+
)
115+
Text(text = "#" + Integer.toHexString(value.toArgb()).uppercase())
116+
Button(
117+
onClick = { currentOnValueChange(surfaceColor) }
118+
) {
119+
Text(text = "Reset")
120+
}
121+
}
122+
}
123+
}
124+
}

0 commit comments

Comments
 (0)