From b12ef11bde4bcc59ea88f89482296735bdb38d68 Mon Sep 17 00:00:00 2001 From: Jamal Mulla Date: Sun, 26 Dec 2021 23:51:42 +0000 Subject: [PATCH] Example Settings Screen with variants of each Preference --- .idea/vcs.xml | 6 + ComposePrefs/build.gradle | 2 +- .../composeprefs/ui/PrefCategoryHeader.kt | 2 +- .../com/jamal/composeprefs/ui/PrefListItem.kt | 17 +- .../com/jamal/composeprefs/ui/PrefScreen.kt | 33 ++- .../composeprefs/ui/prefs/CheckBoxPref.kt | 6 +- .../composeprefs/ui/prefs/DropDownPref.kt | 12 +- .../composeprefs/ui/prefs/EditTextPref.kt | 10 +- .../jamal/composeprefs/ui/prefs/ListPref.kt | 20 +- .../ui/prefs/MultiSelectListPref.kt | 11 +- .../jamal/composeprefs/ui/prefs/SliderPref.kt | 14 +- .../jamal/composeprefs/ui/prefs/SwitchPref.kt | 6 +- app/build.gradle | 4 + .../jamal/composeprefssample/MainActivity.kt | 29 +-- .../composeprefssample/SettingsScreen.kt | 240 ++++++++++++++++++ .../composeprefssample/ui/theme/Theme.kt | 35 ++- build.gradle | 4 +- 17 files changed, 358 insertions(+), 93 deletions(-) create mode 100644 .idea/vcs.xml create mode 100644 app/src/main/java/com/jamal/composeprefssample/SettingsScreen.kt diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/ComposePrefs/build.gradle b/ComposePrefs/build.gradle index f6209c2..a1db243 100644 --- a/ComposePrefs/build.gradle +++ b/ComposePrefs/build.gradle @@ -53,7 +53,7 @@ afterEvaluate { from components.release groupId = 'com.github.jamalmulla' - artifactId = 'Compose Prefs' + artifactId = 'ComposePrefs' version = '1.0' } } diff --git a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/PrefCategoryHeader.kt b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/PrefCategoryHeader.kt index 2831e1b..706afc0 100644 --- a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/PrefCategoryHeader.kt +++ b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/PrefCategoryHeader.kt @@ -26,7 +26,7 @@ fun PrefsCategoryHeader( ) { Text( title, - color = MaterialTheme.colors.secondary, + color = MaterialTheme.colors.primary, fontSize = LocalTextStyle.current.fontSize.times(FontSizeMultiplier), fontWeight = FontWeight.SemiBold ) diff --git a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/PrefListItem.kt b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/PrefListItem.kt index bf0e597..1555b5d 100644 --- a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/PrefListItem.kt +++ b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/PrefListItem.kt @@ -19,7 +19,7 @@ fun PrefsListItem( icon: @Composable (() -> Unit)? = null, secondaryText: @Composable (() -> Unit)? = null, trailing: @Composable (() -> Unit)? = null, - textColor: Color = LocalTextStyle.current.color, + textColor: Color = MaterialTheme.colors.onBackground, minimalHeight: Boolean = false, text: @Composable () -> Unit ) { @@ -69,6 +69,8 @@ private object AnyLine { private val MinHeightSmaller = 32.dp private val IconMinPaddedWidth = 40.dp private val ContentPadding = 16.dp + private val VerticalPadding = 12.dp + private val SingleLinePadding = 4.dp //used when no secondary text is supplied @Composable fun CustomListItem( @@ -85,8 +87,15 @@ private object AnyLine { .padding( start = ContentPadding, end = ContentPadding, - top = ContentPadding, - bottom = if (minimalHeight) 0.dp else ContentPadding + top = when { + secondaryText == null && !minimalHeight -> SingleLinePadding + else -> VerticalPadding + }, + bottom = when { + minimalHeight -> 0.dp + secondaryText == null -> SingleLinePadding + else -> VerticalPadding + } ) .fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, @@ -102,7 +111,7 @@ private object AnyLine { Column( verticalArrangement = Arrangement.Center, - modifier = Modifier.weight(0.8f) + modifier = Modifier.weight(1f) ) { text() secondaryText?.invoke() diff --git a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/PrefScreen.kt b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/PrefScreen.kt index b536e62..0a8f43d 100644 --- a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/PrefScreen.kt +++ b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/PrefScreen.kt @@ -1,6 +1,9 @@ package com.jamal.composeprefs.ui +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.runtime.* import androidx.compose.ui.Modifier @@ -27,26 +30,28 @@ fun PrefsScreen( content: PrefsScope.() -> Unit ) { LocalPrefsDataStore = staticCompositionLocalOf { dataStore } - // basically call prefsItem/prefsItems() on each thing that was passed val prefsScope = PrefsScopeImpl().apply(content) // Now the dataStore can be accessed by calling LocalPrefsDataStore.current from any child Pref CompositionLocalProvider(LocalPrefsDataStore provides dataStore) { - LazyColumn(modifier = modifier.fillMaxSize()) { + Column { + Spacer(modifier = Modifier.height(12.dp)) + LazyColumn(modifier = modifier.fillMaxSize()) { - items(prefsScope.prefsItems.size) { index -> - prefsScope.getPrefsItem(index)() + items(prefsScope.prefsItems.size) { index -> + prefsScope.getPrefsItem(index)() - if (dividerThickness != 0.dp - && index != prefsScope.prefsItems.size - 1 - && !prefsScope.headerIndexes.contains(index) - && !prefsScope.headerIndexes.contains(index + 1) - && !prefsScope.footerIndexes.contains(index) - ) { - Divider( - thickness = dividerThickness, - indent = dividerIndent - ) + if (dividerThickness != 0.dp + && index != prefsScope.prefsItems.size - 1 + && !prefsScope.headerIndexes.contains(index) + && !prefsScope.headerIndexes.contains(index + 1) + && !prefsScope.footerIndexes.contains(index) + ) { + Divider( + thickness = dividerThickness, + indent = dividerIndent + ) + } } } } diff --git a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/CheckBoxPref.kt b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/CheckBoxPref.kt index 29e5051..8c56c0f 100644 --- a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/CheckBoxPref.kt +++ b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/CheckBoxPref.kt @@ -1,9 +1,7 @@ package com.jamal.composeprefs.ui.prefs import android.util.Log -import androidx.compose.material.Checkbox -import androidx.compose.material.ExperimentalMaterialApi -import androidx.compose.material.MaterialTheme +import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -73,6 +71,7 @@ fun CheckBoxPref( summary = summary, leadingIcon = leadingIcon, enabled = enabled, + darkenOnDisable = true, onClick = { checked = !checked edit(checked) @@ -81,6 +80,7 @@ fun CheckBoxPref( Checkbox( checked = checked, enabled = enabled, + colors = CheckboxDefaults.colors(checkedColor = MaterialTheme.colors.primary), onCheckedChange = { edit(it) } diff --git a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/DropDownPref.kt b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/DropDownPref.kt index a1f1197..ca2731c 100644 --- a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/DropDownPref.kt +++ b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/DropDownPref.kt @@ -26,7 +26,7 @@ import java.lang.Exception * @param summary Used to give some more information about what this Pref is for * @param defaultValue Default selected key if this Pref hasn't been saved already. Otherwise the value from the dataStore is used. * @param onValueChange Will be called with the selected key when an item is selected - * @param useCurrentValueAsSummary If true, uses the current selected item as the summary. Equivalent of useSimpleSummaryProvider in androidx. + * @param useSelectedAsSummary If true, uses the current selected item as the summary. Equivalent of useSimpleSummaryProvider in androidx. * @param dropdownBackgroundColor Color of the dropdown menu * @param textColor Text colour of the [title] and [summary] * @param enabled If false, this Pref cannot be clicked and the dropdown menu will not show. @@ -41,9 +41,9 @@ fun DropDownPref( summary: String? = null, defaultValue: String? = null, onValueChange: ((String) -> Unit)? = null, - useCurrentValueAsSummary: Boolean = false, + useSelectedAsSummary: Boolean = false, dropdownBackgroundColor: Color? = null, - textColor: Color = contentColorFor(backgroundColor = MaterialTheme.colors.surface), + textColor: Color = MaterialTheme.colors.onBackground, enabled: Boolean = true, entries: Map = mapOf() ) { @@ -76,7 +76,11 @@ fun DropDownPref( TextPref( title = title, modifier = modifier, - summary = if (useCurrentValueAsSummary) entries[value] else summary, + summary = when { + useSelectedAsSummary && value != null -> entries[value] + useSelectedAsSummary && value == null -> "Not Set" + else -> summary + }, textColor = textColor, enabled = enabled, onClick = { diff --git a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/EditTextPref.kt b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/EditTextPref.kt index 37f77ac..d0932e5 100644 --- a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/EditTextPref.kt +++ b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/EditTextPref.kt @@ -51,8 +51,8 @@ fun EditTextPref( defaultValue: String = "", onValueSaved: ((String) -> Unit) = {}, onValueChange: ((String) -> Unit) = {}, - dialogBackgroundColor: Color = MaterialTheme.colors.surface, - textColor: Color = contentColorFor(backgroundColor = MaterialTheme.colors.surface), + dialogBackgroundColor: Color = MaterialTheme.colors.background, + textColor: Color = MaterialTheme.colors.onBackground, enabled: Boolean = true, ) { @@ -149,8 +149,7 @@ fun EditTextPref( ) { TextButton( modifier = Modifier.padding(end = 16.dp), - onClick = { showDialog = false }, - colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colors.secondary), + onClick = { showDialog = false } ) { Text("Cancel", style = MaterialTheme.typography.body1) } @@ -160,8 +159,7 @@ fun EditTextPref( onClick = { edit() showDialog = false - }, - colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colors.secondary), + } ) { Text("Save", style = MaterialTheme.typography.body1) } diff --git a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/ListPref.kt b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/ListPref.kt index 86cc071..e12734c 100644 --- a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/ListPref.kt +++ b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/ListPref.kt @@ -19,6 +19,8 @@ import com.jamal.composeprefs.ui.LocalPrefsDataStore import kotlinx.coroutines.launch import java.lang.Exception +//TODO useSelectedAsSummary + /** * Preference that shows a list of entries in a Dialog where a single entry can be selected at one time. * @@ -28,6 +30,7 @@ import java.lang.Exception * @param summary Used to give some more information about what this Pref is for * @param defaultValue Default selected key if this Pref hasn't been saved already. Otherwise the value from the dataStore is used. * @param onValueChange Will be called with the selected key when an item is selected + * @param useSelectedAsSummary If true, uses the current selected item as the summary * @param dialogBackgroundColor Background color of the Dialog * @param textColor Text colour of the [title] and [summary] * @param enabled If false, this Pref cannot be clicked and the Dialog cannot be shown. @@ -38,13 +41,14 @@ import java.lang.Exception @Composable fun ListPref( key: String, - title: String, // Title is shown above summary and with the dialog + title: String, modifier: Modifier = Modifier, summary: String? = null, - defaultValue: String? = null, // default selected key if this hasn't been saved already. otherwise the value from the datastore is used + defaultValue: String? = null, onValueChange: ((String) -> Unit)? = null, + useSelectedAsSummary: Boolean = false, dialogBackgroundColor: Color = MaterialTheme.colors.surface, - textColor: Color = contentColorFor(backgroundColor = MaterialTheme.colors.surface), + textColor: Color = MaterialTheme.colors.onBackground, enabled: Boolean = true, entries: Map = mapOf() ) { @@ -75,7 +79,11 @@ fun ListPref( TextPref( title = title, - summary = summary, + summary = when { + useSelectedAsSummary && selected != null -> entries[selected] + useSelectedAsSummary && selected == null -> "Not Set" + else -> summary + }, modifier = modifier, textColor = textColor, enabled = true, @@ -104,7 +112,8 @@ fun ListPref( ) { RadioButton( selected = isSelected, - onClick = { if (!isSelected) onSelected() } + onClick = { if (!isSelected) onSelected() }, + colors = RadioButtonDefaults.colors(selectedColor = MaterialTheme.colors.primary) ) Text( text = current.value, @@ -118,7 +127,6 @@ fun ListPref( confirmButton = { TextButton( onClick = { showDialog = false }, - colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colors.secondary), ) { Text("Cancel", style = MaterialTheme.typography.body1) } diff --git a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/MultiSelectListPref.kt b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/MultiSelectListPref.kt index 0716d09..58e2991 100644 --- a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/MultiSelectListPref.kt +++ b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/MultiSelectListPref.kt @@ -38,13 +38,13 @@ import java.lang.Exception @Composable fun MultiSelectListPref( key: String, - title: String, // Title is shown above summary and with the dialog + title: String, modifier: Modifier = Modifier, summary: String? = null, - defaultValue: Set = setOf(), // default selected keys if this hasn't been saved already. otherwise the value from the datastore is used + defaultValue: Set = setOf(), onValuesChange: ((Set) -> Unit)? = null, dialogBackgroundColor: Color = MaterialTheme.colors.surface, - textColor: Color = contentColorFor(backgroundColor = MaterialTheme.colors.surface), + textColor: Color = MaterialTheme.colors.onBackground, enabled: Boolean = true, entries: Map = mapOf() ) { @@ -52,7 +52,6 @@ fun MultiSelectListPref( val selectionKey = stringSetPreferencesKey(key) val scope = rememberCoroutineScope() - // need to observe state with some sort of flow maybe? this also works val datastore = LocalPrefsDataStore.current val prefs by remember { datastore.data }.collectAsState(initial = null) @@ -112,7 +111,8 @@ fun MultiSelectListPref( ) { Checkbox( checked = isSelected, - onCheckedChange = { onSelectionChanged() } + onCheckedChange = { onSelectionChanged() }, + colors = CheckboxDefaults.colors(checkedColor = MaterialTheme.colors.primary) ) Text( text = current.value, @@ -127,7 +127,6 @@ fun MultiSelectListPref( confirmButton = { TextButton( onClick = { showDialog = false }, - colors = ButtonDefaults.textButtonColors(contentColor = MaterialTheme.colors.secondary), ) { Text(text = "Select", style = MaterialTheme.typography.body1) } diff --git a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/SliderPref.kt b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/SliderPref.kt index 449aee6..3848a02 100644 --- a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/SliderPref.kt +++ b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/SliderPref.kt @@ -51,7 +51,6 @@ fun SliderPref( leadingIcon: @Composable (() -> Unit)? = null, ) { - //todo overlapping with long title val selectionKey = floatPreferencesKey(key) val scope = rememberCoroutineScope() @@ -112,16 +111,7 @@ fun SliderPref( valueRange = valueRange, steps = steps, onValueChangeFinished = { edit() }, - enabled = enabled, - colors = SliderDefaults.colors( - thumbColor = MaterialTheme.colors.secondary, - disabledThumbColor = MaterialTheme.colors.onSurface - .copy(alpha = ContentAlpha.disabled) - .compositeOver(MaterialTheme.colors.surface), - activeTrackColor = MaterialTheme.colors.secondary, - disabledActiveTrackColor = - MaterialTheme.colors.onSurface.copy(alpha = SliderDefaults.DisabledActiveTrackAlpha) - ) + enabled = enabled ) if (showValue) { @@ -130,7 +120,7 @@ fun SliderPref( color = textColor, modifier = Modifier .weight(0.5f) - .padding(start = 16.dp) + .padding(start = 8.dp) ) } } diff --git a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/SwitchPref.kt b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/SwitchPref.kt index eefb7ee..8c1c177 100644 --- a/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/SwitchPref.kt +++ b/ComposePrefs/src/main/java/com/jamal/composeprefs/ui/prefs/SwitchPref.kt @@ -1,9 +1,7 @@ package com.jamal.composeprefs.ui.prefs import android.util.Log -import androidx.compose.material.ExperimentalMaterialApi -import androidx.compose.material.MaterialTheme -import androidx.compose.material.Switch +import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -67,6 +65,7 @@ fun SwitchPref( modifier = modifier, textColor = textColor, summary = summary, + darkenOnDisable = true, leadingIcon = leadingIcon, enabled = enabled, onClick = { @@ -77,6 +76,7 @@ fun SwitchPref( Switch( checked = checked, enabled = enabled, + colors = SwitchDefaults.colors(checkedThumbColor = MaterialTheme.colors.primary), onCheckedChange = { edit(it) } diff --git a/app/build.gradle b/app/build.gradle index 3982d7f..5f778dc 100644 --- a/app/build.gradle +++ b/app/build.gradle @@ -62,4 +62,8 @@ dependencies { androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0' androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version" debugImplementation "androidx.compose.ui:ui-tooling:$compose_version" + + // ComposePrefs library + implementation project(':ComposePrefs') + implementation "androidx.datastore:datastore-preferences:1.0.0" } \ No newline at end of file diff --git a/app/src/main/java/com/jamal/composeprefssample/MainActivity.kt b/app/src/main/java/com/jamal/composeprefssample/MainActivity.kt index 8835b0d..4257291 100644 --- a/app/src/main/java/com/jamal/composeprefssample/MainActivity.kt +++ b/app/src/main/java/com/jamal/composeprefssample/MainActivity.kt @@ -1,38 +1,33 @@ package com.jamal.composeprefssample +import android.content.Context import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent +import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.MaterialTheme import androidx.compose.material.Surface import androidx.compose.material.Text import androidx.compose.runtime.Composable +import androidx.compose.ui.ExperimentalComposeUiApi import androidx.compose.ui.tooling.preview.Preview +import androidx.datastore.core.DataStore +import androidx.datastore.preferences.core.Preferences +import androidx.datastore.preferences.preferencesDataStore import com.jamal.composeprefssample.ui.theme.ComposePrefsSampleTheme +val Context.dataStore: DataStore by preferencesDataStore(name = "settings") + +@ExperimentalComposeUiApi +@ExperimentalMaterialApi +@OptIn(ExperimentalComposeUiApi::class, ExperimentalMaterialApi::class) class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposePrefsSampleTheme { - // A surface container using the 'background' color from the theme - Surface(color = MaterialTheme.colors.background) { - Greeting("Android") - } + SettingsScreen() } } } } - -@Composable -fun Greeting(name: String) { - Text(text = "Hello $name!") -} - -@Preview(showBackground = true) -@Composable -fun DefaultPreview() { - ComposePrefsSampleTheme { - Greeting("Android") - } -} \ No newline at end of file diff --git a/app/src/main/java/com/jamal/composeprefssample/SettingsScreen.kt b/app/src/main/java/com/jamal/composeprefssample/SettingsScreen.kt new file mode 100644 index 0000000..b93f4b5 --- /dev/null +++ b/app/src/main/java/com/jamal/composeprefssample/SettingsScreen.kt @@ -0,0 +1,240 @@ +package com.jamal.composeprefssample + +import androidx.compose.material.* +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Home +import androidx.compose.material.icons.filled.Info +import androidx.compose.material.icons.filled.Person +import androidx.compose.runtime.Composable +import androidx.compose.ui.ExperimentalComposeUiApi +import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.sp +import com.jamal.composeprefs.ui.PrefsScreen +import com.jamal.composeprefs.ui.prefs.* + + +@ExperimentalMaterialApi +@ExperimentalComposeUiApi +@Composable +fun SettingsScreen() { + Scaffold(topBar = { SettingsTopBar() }) { + + PrefsScreen(dataStore = LocalContext.current.dataStore) { + + prefsGroup("TextPref") { + prefsItem { TextPref(title = "Just some text") } + prefsItem { TextPref(title = "Just some text", summary = "But now with a summary") } + prefsItem { + TextPref( + title = "Just some text", + summary = "But enabled this time", + enabled = true + ) + } + prefsItem { + TextPref( + title = "Just some text", + summary = "But with lower opacity text", + darkenOnDisable = true + ) + } + prefsItem { + TextPref( + title = "Just some text", + summary = "But with a leading icon", + leadingIcon = { Icon(Icons.Filled.Info, "Info") }) + } + } + + prefsGroup("CheckBoxPref") { + prefsItem { CheckBoxPref(key = "cb1", title = "Simple checkbox") } + prefsItem { + CheckBoxPref( + key = "cb2", + title = "Simple checkbox", + summary = "But it has some summary text" + ) + } + prefsItem { + CheckBoxPref( + key = "cb3", + title = "Simple checkbox", + summary = "But it's disabled", + enabled = false + ) + } + prefsItem { + CheckBoxPref( + key = "cb4", + title = "Simple checkbox", + summary = "But with a leading icon", + leadingIcon = { Icon(Icons.Filled.Person, "Person") }) + } + } + + prefsGroup("SwitchPref") { + prefsItem { SwitchPref(key = "sw1", title = "Simple switch") } + prefsItem { + SwitchPref( + key = "sw2", + title = "Simple switch", + summary = "But it has some summary text" + ) + } + prefsItem { + SwitchPref( + key = "sw3", + title = "Simple switch", + summary = "But it's disabled", + enabled = false + ) + } + prefsItem { + SwitchPref( + key = "sw4", + title = "Simple switch", + summary = "But with a leading icon", + leadingIcon = { Icon(Icons.Filled.Home, "Home") }) + } + } + + prefsGroup("EditTextPref") { + prefsItem { EditTextPref(key = "et1", title = "EditText example") } + prefsItem { + EditTextPref( + key = "et2", + title = "EditText example", + summary = "But it has some summary text" + ) + } + prefsItem { + EditTextPref( + key = "et4", + title = "EditText example", + summary = "But it has a dialog title and message", + dialogTitle = "Dialog Title", + dialogMessage = "Dialog Message" + ) + } + prefsItem { + EditTextPref( + key = "et5", + title = "EditText example", + summary = "But it has a custom dialog color", + dialogBackgroundColor = MaterialTheme.colors.secondary + ) + } + } + + prefsGroup("SliderPref") { + prefsItem { SliderPref(key = "sp1", title = "Slider example") } + prefsItem { + SliderPref( + key = "sp3", + title = "Slider example with custom range and value shown on side", + valueRange = 50f..200f, + showValue = true + ) + } + prefsItem { + SliderPref( + key = "sp4", + title = "Slider example with 4 steps and value shown", + steps = 4, + showValue = true + ) + } + } + + prefsGroup("DropDownPref") { + prefsItem { + DropDownPref( + key = "dd1", + title = "Dropdown example", + summary = "With custom summary", + entries = mapOf( + "0" to "Entry 1", + "1" to "Entry 2", + "2" to "Entry 3" + ) + ) + } + prefsItem { + DropDownPref( + key = "dd2", + title = "Dropdown with selected as summary", + useSelectedAsSummary = true, + entries = mapOf( + "0" to "Entry 1", + "1" to "Entry 2", + "2" to "Entry 3" + ) + ) + } + } + + prefsGroup("ListPref") { + prefsItem { + ListPref( + key = "l1", + title = "ListPref example", + summary = "Opens up a dialog of options", + entries = mapOf( + "0" to "Entry 1", + "1" to "Entry 2", + "2" to "Entry 3", + "3" to "Entry 4", + "4" to "Entry 5" + ) + ) + } + prefsItem { + ListPref( + key = "l2", + title = "ListPref example", + summary = "Summary is the currently selected item", + useSelectedAsSummary = true, + entries = mapOf( + "0" to "Entry 1", + "1" to "Entry 2", + "2" to "Entry 3", + "3" to "Entry 4", + "4" to "Entry 5" + ) + ) + } + } + + prefsGroup("MultiSelectListPref") { + prefsItem { + MultiSelectListPref( + key = "msl1", + title = "MultiSelectListPref", + summary = "Pick multiple entries at once", + entries = mapOf( + "0" to "Entry 1", + "1" to "Entry 2", + "2" to "Entry 3", + "3" to "Entry 4", + "4" to "Entry 5" + ) + ) + } + } + } + } +} + +@Composable +fun SettingsTopBar() { + TopAppBar( + title = { + Text( + text = "Settings", + fontSize = 18.sp, + fontWeight = FontWeight.SemiBold + ) + } + ) +} \ No newline at end of file diff --git a/app/src/main/java/com/jamal/composeprefssample/ui/theme/Theme.kt b/app/src/main/java/com/jamal/composeprefssample/ui/theme/Theme.kt index f4901bd..1929f7b 100644 --- a/app/src/main/java/com/jamal/composeprefssample/ui/theme/Theme.kt +++ b/app/src/main/java/com/jamal/composeprefssample/ui/theme/Theme.kt @@ -5,30 +5,37 @@ import androidx.compose.material.MaterialTheme import androidx.compose.material.darkColors import androidx.compose.material.lightColors import androidx.compose.runtime.Composable +import androidx.compose.ui.graphics.Color private val DarkColorPalette = darkColors( - primary = Purple200, - primaryVariant = Purple700, - secondary = Teal200 + primary = Purple200, + primaryVariant = Purple700, + secondary = Teal200, + background = Color.Black, + surface = Color.Black, + onPrimary = Color.Black, + onSecondary = Color.White, + onBackground = Color.White, + onSurface = Color.White, ) private val LightColorPalette = lightColors( - primary = Purple500, - primaryVariant = Purple700, - secondary = Teal200 - - /* Other default colors to override + primary = Purple500, + primaryVariant = Purple700, + secondary = Teal200, background = Color.White, surface = Color.White, onPrimary = Color.White, onSecondary = Color.Black, onBackground = Color.Black, onSurface = Color.Black, - */ ) @Composable -fun ComposePrefsSampleTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() () -> Unit) { +fun ComposePrefsSampleTheme( + darkTheme: Boolean = isSystemInDarkTheme(), + content: @Composable() () -> Unit +) { val colors = if (darkTheme) { DarkColorPalette } else { @@ -36,9 +43,9 @@ fun ComposePrefsSampleTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: } MaterialTheme( - colors = colors, - typography = Typography, - shapes = Shapes, - content = content + colors = colors, + typography = Typography, + shapes = Shapes, + content = content ) } \ No newline at end of file diff --git a/build.gradle b/build.gradle index f28d348..18dd571 100644 --- a/build.gradle +++ b/build.gradle @@ -1,7 +1,7 @@ // Top-level build file where you can add configuration options common to all sub-projects/modules. buildscript { ext { - compose_version = '1.0.1' + compose_version = '1.1.0-rc01' } repositories { google() @@ -9,7 +9,7 @@ buildscript { } dependencies { classpath "com.android.tools.build:gradle:7.0.4" - classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.21" + classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.6.0" // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files