Merge "[expressive design] Update Category layout." into main
diff --git a/packages/SettingsLib/Spa/gallery/src/com/android/settingslib/spa/gallery/home/HomePageProvider.kt b/packages/SettingsLib/Spa/gallery/src/com/android/settingslib/spa/gallery/home/HomePageProvider.kt
index b1558cc..c4058a02 100644
--- a/packages/SettingsLib/Spa/gallery/src/com/android/settingslib/spa/gallery/home/HomePageProvider.kt
+++ b/packages/SettingsLib/Spa/gallery/src/com/android/settingslib/spa/gallery/home/HomePageProvider.kt
@@ -27,8 +27,8 @@
import com.android.settingslib.spa.framework.theme.SettingsTheme
import com.android.settingslib.spa.gallery.R
import com.android.settingslib.spa.gallery.SettingsPageProviderEnum
-import com.android.settingslib.spa.gallery.button.ActionButtonPageProvider
import com.android.settingslib.spa.gallery.banner.BannerPageProvider
+import com.android.settingslib.spa.gallery.button.ActionButtonPageProvider
import com.android.settingslib.spa.gallery.chart.ChartPageProvider
import com.android.settingslib.spa.gallery.dialog.DialogMainPageProvider
import com.android.settingslib.spa.gallery.editor.EditorMainPageProvider
diff --git a/packages/SettingsLib/Spa/gallery/src/com/android/settingslib/spa/gallery/ui/CategoryPage.kt b/packages/SettingsLib/Spa/gallery/src/com/android/settingslib/spa/gallery/ui/CategoryPageProvider.kt
similarity index 88%
rename from packages/SettingsLib/Spa/gallery/src/com/android/settingslib/spa/gallery/ui/CategoryPage.kt
rename to packages/SettingsLib/Spa/gallery/src/com/android/settingslib/spa/gallery/ui/CategoryPageProvider.kt
index 7a1fad0..aaeb22e 100644
--- a/packages/SettingsLib/Spa/gallery/src/com/android/settingslib/spa/gallery/ui/CategoryPage.kt
+++ b/packages/SettingsLib/Spa/gallery/src/com/android/settingslib/spa/gallery/ui/CategoryPageProvider.kt
@@ -31,7 +31,6 @@
import com.android.settingslib.spa.widget.preference.SimplePreferenceMacro
import com.android.settingslib.spa.widget.scaffold.RegularScaffold
import com.android.settingslib.spa.widget.ui.Category
-import com.android.settingslib.spa.widget.ui.CategoryTitle
private const val TITLE = "Sample Category"
@@ -42,10 +41,12 @@
fun buildInjectEntry(): SettingsEntryBuilder {
return SettingsEntryBuilder.createInject(owner)
.setUiLayoutFn {
- Preference(object : PreferenceModel {
- override val title = TITLE
- override val onClick = navigator(name)
- })
+ Preference(
+ object : PreferenceModel {
+ override val title = TITLE
+ override val onClick = navigator(name)
+ }
+ )
}
.setSearchDataFn { EntrySearchData(title = TITLE) }
}
@@ -70,7 +71,6 @@
SettingsEntryBuilder.create("Preference 3", owner)
.setMacro { SimplePreferenceMacro(title = "Preference 2", summary = "Summary 3") }
.build()
-
)
entryList.add(
SettingsEntryBuilder.create("Preference 4", owner)
@@ -84,11 +84,11 @@
override fun Page(arguments: Bundle?) {
val entries = buildEntry(arguments)
RegularScaffold(title = getTitle(arguments)) {
- CategoryTitle("Category A")
- entries[0].UiLayout()
- entries[1].UiLayout()
-
- Category("Category B") {
+ Category("Category A") {
+ entries[0].UiLayout()
+ entries[1].UiLayout()
+ }
+ Category {
entries[2].UiLayout()
entries[3].UiLayout()
}
@@ -99,7 +99,5 @@
@Preview(showBackground = true)
@Composable
private fun SpinnerPagePreview() {
- SettingsTheme {
- SpinnerPageProvider.Page(null)
- }
+ SettingsTheme { CategoryPageProvider.Page(null) }
}
diff --git a/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/framework/theme/SettingsDimension.kt b/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/framework/theme/SettingsDimension.kt
index f8c791a..ab95162 100644
--- a/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/framework/theme/SettingsDimension.kt
+++ b/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/framework/theme/SettingsDimension.kt
@@ -24,6 +24,7 @@
val paddingExtraSmall = 4.dp
val paddingSmall = if (isSpaExpressiveEnabled) 8.dp else 4.dp
val paddingExtraSmall5 = 10.dp
+ val paddingExtraSmall6 = 12.dp
val paddingLarge = 16.dp
val paddingExtraLarge = 24.dp
@@ -36,9 +37,9 @@
val itemIconSize = 24.dp
val itemIconContainerSize = 72.dp
- val itemPaddingStart = paddingExtraLarge
+ val itemPaddingStart = if (isSpaExpressiveEnabled) paddingLarge else paddingExtraLarge
val itemPaddingEnd = paddingLarge
- val itemPaddingVertical = paddingLarge
+ val itemPaddingVertical = if (isSpaExpressiveEnabled) paddingExtraSmall6 else paddingLarge
val itemPadding = PaddingValues(
start = itemPaddingStart,
top = itemPaddingVertical,
diff --git a/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/framework/theme/SettingsShape.kt b/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/framework/theme/SettingsShape.kt
index f7c5414..c787715 100644
--- a/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/framework/theme/SettingsShape.kt
+++ b/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/framework/theme/SettingsShape.kt
@@ -24,5 +24,7 @@
val CornerMedium = RoundedCornerShape(12.dp)
+ val categoryCorner = RoundedCornerShape(20.dp)
+
val CornerExtraLarge = RoundedCornerShape(28.dp)
}
diff --git a/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/preference/BaseLayout.kt b/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/preference/BaseLayout.kt
index 23a8e78..c68ec78 100644
--- a/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/preference/BaseLayout.kt
+++ b/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/preference/BaseLayout.kt
@@ -16,6 +16,7 @@
package com.android.settingslib.spa.widget.preference
+import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
@@ -25,16 +26,20 @@
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.android.settingslib.spa.framework.theme.SettingsDimension
import com.android.settingslib.spa.framework.theme.SettingsOpacity.alphaForEnabled
+import com.android.settingslib.spa.framework.theme.SettingsShape
import com.android.settingslib.spa.framework.theme.SettingsTheme
+import com.android.settingslib.spa.framework.theme.isSpaExpressiveEnabled
import com.android.settingslib.spa.widget.ui.SettingsTitle
@Composable
@@ -51,10 +56,17 @@
widget: @Composable () -> Unit = {},
) {
Row(
- modifier = modifier
- .fillMaxWidth()
- .semantics(mergeDescendants = true) {}
- .padding(end = paddingEnd),
+ modifier =
+ modifier
+ .fillMaxWidth()
+ .semantics(mergeDescendants = true) {}
+ .then(
+ if (isSpaExpressiveEnabled)
+ Modifier.clip(SettingsShape.CornerExtraSmall)
+ .background(MaterialTheme.colorScheme.surfaceBright)
+ else Modifier
+ )
+ .padding(end = paddingEnd),
verticalAlignment = Alignment.CenterVertically,
) {
val alphaModifier = Modifier.alphaForEnabled(enabled())
@@ -63,20 +75,14 @@
title = title,
titleContentDescription = titleContentDescription,
subTitle = subTitle,
- modifier = alphaModifier
- .weight(1f)
- .padding(vertical = paddingVertical),
+ modifier = alphaModifier.weight(1f).padding(vertical = paddingVertical),
)
widget()
}
}
@Composable
-internal fun BaseIcon(
- icon: @Composable (() -> Unit)?,
- modifier: Modifier,
- paddingStart: Dp,
-) {
+internal fun BaseIcon(icon: @Composable (() -> Unit)?, modifier: Modifier, paddingStart: Dp) {
if (icon != null) {
Box(
modifier = modifier.size(SettingsDimension.itemIconContainerSize),
@@ -107,11 +113,6 @@
@Composable
private fun BaseLayoutPreview() {
SettingsTheme {
- BaseLayout(
- title = "Title",
- subTitle = {
- HorizontalDivider(thickness = 10.dp)
- }
- )
+ BaseLayout(title = "Title", subTitle = { HorizontalDivider(thickness = 10.dp) })
}
}
diff --git a/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/ui/Category.kt b/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/ui/Category.kt
index 48cd145..6c5581f 100644
--- a/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/ui/Category.kt
+++ b/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/ui/Category.kt
@@ -16,9 +16,13 @@
package com.android.settingslib.spa.widget.ui
+import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.TouchApp
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
@@ -27,25 +31,31 @@
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.android.settingslib.spa.framework.theme.SettingsDimension
+import com.android.settingslib.spa.framework.theme.SettingsShape
import com.android.settingslib.spa.framework.theme.SettingsTheme
+import com.android.settingslib.spa.framework.theme.isSpaExpressiveEnabled
+import com.android.settingslib.spa.widget.preference.Preference
+import com.android.settingslib.spa.widget.preference.PreferenceModel
-/**
- * A category title that is placed before a group of similar items.
- */
+/** A category title that is placed before a group of similar items. */
@Composable
fun CategoryTitle(title: String) {
Text(
text = title,
- modifier = Modifier.padding(
- start = SettingsDimension.itemPaddingStart,
- top = 20.dp,
- end = SettingsDimension.itemPaddingEnd,
- bottom = 8.dp,
- ),
+ modifier =
+ Modifier.padding(
+ start = SettingsDimension.itemPaddingStart,
+ top = 20.dp,
+ end =
+ if (isSpaExpressiveEnabled) SettingsDimension.paddingSmall
+ else SettingsDimension.itemPaddingEnd,
+ bottom = 8.dp,
+ ),
color = MaterialTheme.colorScheme.primary,
style = MaterialTheme.typography.labelMedium,
)
@@ -56,14 +66,31 @@
* visually separates groups of items.
*/
@Composable
-fun Category(title: String, content: @Composable ColumnScope.() -> Unit) {
- Column {
+fun Category(title: String? = null, content: @Composable ColumnScope.() -> Unit) {
+ Column(
+ modifier =
+ if (isSpaExpressiveEnabled)
+ Modifier.padding(
+ horizontal = SettingsDimension.paddingLarge,
+ vertical = SettingsDimension.paddingSmall,
+ )
+ else Modifier
+ ) {
var displayTitle by remember { mutableStateOf(false) }
- if (displayTitle) CategoryTitle(title = title)
+ if (title != null && displayTitle) CategoryTitle(title = title)
Column(
- modifier = Modifier.onGloballyPositioned { coordinates ->
- displayTitle = coordinates.size.height > 0
- },
+ modifier =
+ Modifier.onGloballyPositioned { coordinates ->
+ displayTitle = coordinates.size.height > 0
+ }
+ .then(
+ if (isSpaExpressiveEnabled)
+ Modifier.fillMaxWidth().clip(SettingsShape.categoryCorner)
+ else Modifier
+ ),
+ verticalArrangement =
+ if (isSpaExpressiveEnabled) Arrangement.spacedBy(SettingsDimension.paddingTiny)
+ else Arrangement.Top,
content = content,
)
}
@@ -73,6 +100,21 @@
@Composable
private fun CategoryPreview() {
SettingsTheme {
- CategoryTitle("Appearance")
+ Category("Appearance") {
+ Preference(
+ object : PreferenceModel {
+ override val title = "Title"
+ override val summary = { "Summary" }
+ }
+ )
+ Preference(
+ object : PreferenceModel {
+ override val title = "Title"
+ override val summary = { "Summary" }
+ override val icon =
+ @Composable { SettingsIcon(imageVector = Icons.Outlined.TouchApp) }
+ }
+ )
+ }
}
}