[Expressive design] Update SPA Appbar.
Update container color.
Update back icon size.
Screenshot: https://screenshot.googleplex.com/9KqVsoj2uv7Pv5a
Bug: 349681531
Flag: EXEMPT migration
Test: visual
Change-Id: I94e98d00819926ba584d15d4df6540142e602361
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 08bedf9..fcaedd2 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
@@ -33,9 +33,8 @@
val spinnerHorizontalPadding = paddingExtraLarge
val spinnerVerticalPadding = paddingLarge
- val actionIconWidth = 32.dp
- val actionIconHeight = 40.dp
- val actionIconPadding = 4.dp
+ val actionIconSize = 40.dp
+ val actionIconPadding = 8.dp
val itemIconSize = 24.dp
val itemIconContainerSizeSmall = 40.dp
diff --git a/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/scaffold/Actions.kt b/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/scaffold/Actions.kt
index f99d206..668f683 100644
--- a/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/scaffold/Actions.kt
+++ b/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/scaffold/Actions.kt
@@ -56,32 +56,27 @@
IconButton(
onClick = onClick,
modifier =
- if (isSpaExpressiveEnabled)
- Modifier
- .padding(
- start = SettingsDimension.paddingLarge,
- end = SettingsDimension.paddingSmall,
- top = SettingsDimension.paddingExtraSmall,
- bottom = SettingsDimension.paddingExtraSmall,
- )
- .size(SettingsDimension.actionIconWidth, SettingsDimension.actionIconHeight)
- .clip(SettingsShape.CornerExtraLarge)
- else Modifier,
+ if (isSpaExpressiveEnabled)
+ Modifier.padding(
+ start = SettingsDimension.paddingExtraSmall5,
+ end = SettingsDimension.paddingSmall,
+ top = SettingsDimension.paddingExtraSmall,
+ bottom = SettingsDimension.paddingExtraSmall,
+ )
+ .size(SettingsDimension.actionIconSize)
+ .clip(SettingsShape.CornerExtraLarge)
+ else Modifier,
) {
Icon(
imageVector = Icons.AutoMirrored.Outlined.ArrowBack,
contentDescription = contentDescription,
modifier =
- if (isSpaExpressiveEnabled)
- Modifier
- .size(
- SettingsDimension.actionIconWidth,
- SettingsDimension.actionIconHeight,
- )
- .clip(SettingsShape.CornerExtraLarge)
- .background(MaterialTheme.colorScheme.surfaceContainerHighest)
- .padding(SettingsDimension.actionIconPadding)
- else Modifier,
+ if (isSpaExpressiveEnabled)
+ Modifier.size(SettingsDimension.actionIconSize)
+ .clip(SettingsShape.CornerExtraLarge)
+ .background(MaterialTheme.colorScheme.surfaceContainerHighest)
+ .padding(SettingsDimension.actionIconPadding)
+ else Modifier,
)
}
}
diff --git a/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/scaffold/CustomizedAppBar.kt b/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/scaffold/CustomizedAppBar.kt
index 693fb35..0c0ece4 100644
--- a/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/scaffold/CustomizedAppBar.kt
+++ b/packages/SettingsLib/Spa/spa/src/com/android/settingslib/spa/widget/scaffold/CustomizedAppBar.kt
@@ -142,10 +142,11 @@
Text(
text = title,
modifier =
- Modifier.padding(
+ Modifier
+ .padding(
start =
- if (isSpaExpressiveEnabled) SettingsDimension.paddingExtraSmall
- else SettingsDimension.itemPaddingAround,
+ if (isSpaExpressiveEnabled) SettingsDimension.paddingExtraSmall
+ else SettingsDimension.itemPaddingAround,
end = SettingsDimension.itemPaddingEnd,
)
.semantics { heading() },
@@ -156,13 +157,22 @@
@Composable
private fun topAppBarColors() =
- TopAppBarColors(
- containerColor = MaterialTheme.colorScheme.settingsBackground,
- scrolledContainerColor = MaterialTheme.colorScheme.surfaceVariant,
- navigationIconContentColor = MaterialTheme.colorScheme.onSurface,
- titleContentColor = MaterialTheme.colorScheme.onSurface,
- actionIconContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
- )
+ if (isSpaExpressiveEnabled)
+ TopAppBarColors(
+ containerColor = MaterialTheme.colorScheme.surfaceContainer,
+ scrolledContainerColor = MaterialTheme.colorScheme.surfaceContainer,
+ navigationIconContentColor = MaterialTheme.colorScheme.onSurface,
+ titleContentColor = MaterialTheme.colorScheme.onSurface,
+ actionIconContentColor = MaterialTheme.colorScheme.primary,
+ )
+ else
+ TopAppBarColors(
+ containerColor = MaterialTheme.colorScheme.settingsBackground,
+ scrolledContainerColor = MaterialTheme.colorScheme.surfaceVariant,
+ navigationIconContentColor = MaterialTheme.colorScheme.onSurface,
+ titleContentColor = MaterialTheme.colorScheme.onSurface,
+ actionIconContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
+ )
/**
* Represents the colors used by a top app bar in different states.
@@ -257,14 +267,16 @@
// Compose a Surface with a TopAppBarLayout content.
Box(
modifier =
- Modifier.drawBehind { drawRect(color = colors.scrolledContainerColor) }
+ Modifier
+ .drawBehind { drawRect(color = colors.scrolledContainerColor) }
.semantics { isTraversalGroup = true }
.pointerInput(Unit) {}
) {
val height = LocalDensity.current.run { ContainerHeight.toPx() }
TopAppBarLayout(
modifier =
- Modifier.windowInsetsPadding(windowInsets)
+ Modifier
+ .windowInsetsPadding(windowInsets)
// clip after padding so we don't show the title over the inset area
.clipToBounds(),
heightPx = height,
@@ -387,7 +399,8 @@
Column {
TopAppBarLayout(
modifier =
- Modifier.windowInsetsPadding(windowInsets)
+ Modifier
+ .windowInsetsPadding(windowInsets)
// clip after padding so we don't show the title over the inset area
.clipToBounds(),
heightPx = pinnedHeightPx,
@@ -495,14 +508,17 @@
) {
Layout(
{
- Box(Modifier.layoutId("navigationIcon").padding(start = TopAppBarHorizontalPadding)) {
+ Box(Modifier
+ .layoutId("navigationIcon")
+ .padding(start = TopAppBarHorizontalPadding)) {
CompositionLocalProvider(
LocalContentColor provides navigationIconContentColor,
content = navigationIcon,
)
}
Box(
- Modifier.layoutId("title")
+ Modifier
+ .layoutId("title")
.padding(horizontal = TopAppBarHorizontalPadding)
.then(if (hideTitleSemantics) Modifier.clearAndSetSemantics {} else Modifier)
.graphicsLayer { alpha = titleAlpha() }
@@ -521,7 +537,9 @@
)
}
}
- Box(Modifier.layoutId("actionIcons").padding(end = TopAppBarHorizontalPadding)) {
+ Box(Modifier
+ .layoutId("actionIcons")
+ .padding(end = TopAppBarHorizontalPadding)) {
CompositionLocalProvider(
LocalContentColor provides actionIconContentColor,
content = actions,