Merge "Polished pill and glow appearance" into main (a2490d2a) · Commits · e / os / android_frameworks_base

packages/SystemUI/compose/features/src/com/android/systemui/ambientcue/ui/compose/ActionList.kt

+3 −7

Original line number	Diff line number	Diff line
		@@ -98,7 +98,7 @@ fun ActionList(
		actions.forEachIndexed { index, action ->
		val scale by
		animateFloatAsState(
		progress,
		targetValue = progress,
		animationSpec =
		spring(
		dampingRatio = Spring.DampingRatioNoBouncy,
		@@ -107,12 +107,8 @@ fun ActionList(
		)
		val translation by
		animateFloatAsState(
		progress,
		animationSpec =
		spring(
		dampingRatio = Spring.DampingRatioMediumBouncy,
		stiffness = Spring.StiffnessLow,
		),
		targetValue = progress,
		animationSpec = spring(dampingRatio = 0.6f, stiffness = 220f),
		)

		Chip(

packages/SystemUI/compose/features/src/com/android/systemui/ambientcue/ui/compose/BackgroundGlow.kt

+3 −2

Original line number	Diff line number	Diff line
		@@ -54,12 +54,13 @@ fun BackgroundGlow(
		val density = LocalDensity.current
		val turbulenceDisplacementPx = with(density) { Defaults.TURBULENCE_DISPLACEMENT_DP.dp.toPx() }
		val gradientRadiusPx = with(density) { Defaults.GRADIENT_RADIUS.dp.toPx() }
		val glowHeightInDp = (Defaults.GRADIENT_RADIUS + Defaults.TURBULENCE_SIZE).dp

		val visibleState = remember { MutableTransitionState(false) }
		visibleState.targetState = visible

		val transition = rememberTransition(visibleState)
		val alpha by transition.animateFloat(transitionSpec = { tween(750) }) { if (it) 1f else 0f }
		val alpha by transition.animateFloat(transitionSpec = { tween(750) }) { if (it) 0.55f else 0f }
		val verticalOffset by
		animateIntOffsetAsState(if (expanded) IntOffset.Zero else collapsedOffset, tween(350))

		@@ -85,7 +86,7 @@ fun BackgroundGlow(
		val shaderBrush = remember { ShaderBrush(shader) }

		Box(
		modifier.size(400.dp, 200.dp).alpha(alpha).drawWithCache {
		modifier.size(400.dp, glowHeightInDp).alpha(alpha).drawWithCache {
		onDrawWithContent {
		val offsetX = with(density) { verticalOffset.x.dp.toPx() }
		val offsetY = with(density) { verticalOffset.y.dp.toPx() }

packages/SystemUI/compose/features/src/com/android/systemui/ambientcue/ui/compose/Chip.kt

+12 −3

Original line number	Diff line number	Diff line
		@@ -20,6 +20,7 @@ import androidx.compose.foundation.Image
		import androidx.compose.foundation.background
		import androidx.compose.foundation.border
		import androidx.compose.foundation.combinedClickable
		import androidx.compose.foundation.isSystemInDarkTheme
		import androidx.compose.foundation.layout.Arrangement
		import androidx.compose.foundation.layout.Column
		import androidx.compose.foundation.layout.Row
		@@ -35,15 +36,17 @@ import androidx.compose.ui.Alignment
		import androidx.compose.ui.Modifier
		import androidx.compose.ui.draw.alpha
		import androidx.compose.ui.draw.clip
		import androidx.compose.ui.graphics.Color
		import androidx.compose.ui.text.style.TextOverflow
		import androidx.compose.ui.unit.dp
		import com.android.compose.ui.graphics.painter.rememberDrawablePainter
		import com.android.systemui.ambientcue.ui.viewmodel.ActionType
		import com.android.systemui.ambientcue.ui.viewmodel.ActionViewModel

		@Composable
		fun Chip(action: ActionViewModel, modifier: Modifier = Modifier) {
		val outlineColor = MaterialTheme.colorScheme.onBackground
		val backgroundColor = MaterialTheme.colorScheme.background
		val outlineColor = if (isSystemInDarkTheme()) Color.White else Color.Black
		val backgroundColor = if (isSystemInDarkTheme()) Color.Black else Color.White

		Row(
		horizontalArrangement = Arrangement.spacedBy(8.dp),
		@@ -62,7 +65,13 @@ fun Chip(action: ActionViewModel, modifier: Modifier = Modifier) {
		contentDescription = action.label,
		modifier =
		Modifier.size(24.dp)
		.border(0.75.dp, MaterialTheme.colorScheme.outline, CircleShape)
		.then(
		if (action.actionType == ActionType.MR) {
		Modifier
		} else {
		Modifier.border(0.75.dp, MaterialTheme.colorScheme.outline, CircleShape)
		}
		)
		.clip(CircleShape),
		)

packages/SystemUI/compose/features/src/com/android/systemui/ambientcue/ui/compose/NavBarPill.kt

+108 −92

Original line number	Diff line number	Diff line
		@@ -25,6 +25,7 @@ import androidx.compose.foundation.Image
		import androidx.compose.foundation.background
		import androidx.compose.foundation.border
		import androidx.compose.foundation.clickable
		import androidx.compose.foundation.isSystemInDarkTheme
		import androidx.compose.foundation.layout.Arrangement
		import androidx.compose.foundation.layout.Box
		import androidx.compose.foundation.layout.IntrinsicSize
		@@ -46,7 +47,9 @@ import androidx.compose.runtime.remember
		import androidx.compose.runtime.setValue
		import androidx.compose.ui.Alignment
		import androidx.compose.ui.Modifier
		import androidx.compose.ui.draw.BlurredEdgeTreatment
		import androidx.compose.ui.draw.alpha
		import androidx.compose.ui.draw.blur
		import androidx.compose.ui.draw.clip
		import androidx.compose.ui.graphics.Color
		import androidx.compose.ui.graphics.graphicsLayer
		@@ -63,6 +66,7 @@ import androidx.compose.ui.util.lerp
		import com.android.compose.PlatformIconButton
		import com.android.compose.ui.graphics.painter.rememberDrawablePainter
		import com.android.systemui.ambientcue.ui.compose.modifier.animatedActionBorder
		import com.android.systemui.ambientcue.ui.viewmodel.ActionType
		import com.android.systemui.ambientcue.ui.viewmodel.ActionViewModel
		import com.android.systemui.res.R

		@@ -78,8 +82,8 @@ fun NavBarPill(
		) {
		val configuration = LocalConfiguration.current
		val maxPillWidth = (configuration.screenWidthDp * 0.65f).dp
		val outlineColor = MaterialTheme.colorScheme.onBackground
		val backgroundColor = MaterialTheme.colorScheme.background
		val outlineColor = if (isSystemInDarkTheme()) Color.White else Color.Black
		val backgroundColor = if (isSystemInDarkTheme()) Color.Black else Color.White

		val density = LocalDensity.current
		val collapsedWidthPx = with(density) { navBarWidth.toPx() }
		@@ -123,6 +127,7 @@ fun NavBarPill(
		val closeButtonSize = 28.dp
		Spacer(modifier = Modifier.size(closeButtonSize))

		Box {
		Row(
		horizontalArrangement = Arrangement.Center,
		verticalAlignment = Alignment.CenterVertically,
		@@ -136,7 +141,7 @@ fun NavBarPill(
		visible = visible,
		)
		.then(if (expanded) Modifier else Modifier.clickable { onClick() })
		.padding(3.dp)
		.padding(2.dp)
		.onGloballyPositioned { expandedSize = it.size },
		) {
		// Should have at most 1 expanded chip
		@@ -151,6 +156,16 @@ fun NavBarPill(
		if (hasAttribution) Modifier.weight(1f, false)
		else Modifier.width(IntrinsicSize.Max),
		) {
		val iconBorder =
		if (action.actionType == ActionType.MR) {
		Modifier
		} else {
		Modifier.border(
		width = 0.5.dp,
		color = MaterialTheme.colorScheme.outline,
		shape = CircleShape,
		)
		}
		if ((actions.size == 1 \|\| hasAttribution) && !expandedChip) {
		expandedChip = true
		val hasBackground = actions.size > 1
		@@ -161,31 +176,25 @@ fun NavBarPill(
		.clip(RoundedCornerShape(16.dp))
		.background(
		if (hasBackground) {
		MaterialTheme.colorScheme.onSecondary
		MaterialTheme.colorScheme.surfaceContainer
		} else {
		Color.Transparent
		}
		)
		.padding(6.dp),
		.padding(4.dp),
		) {
		Image(
		painter = rememberDrawablePainter(action.icon),
		contentDescription = action.label,
		modifier =
		Modifier.size(16.dp)
		.border(
		width = 0.75.dp,
		color = MaterialTheme.colorScheme.outline,
		shape = CircleShape,
		)
		.clip(CircleShape),
		Modifier.size(16.dp).then(iconBorder).clip(CircleShape),
		)
		Text(
		text = action.label,
		style = MaterialTheme.typography.labelMedium,
		maxLines = 1,
		overflow = TextOverflow.Ellipsis,
		color = outlineColor,
		color = MaterialTheme.colorScheme.onSurface,
		modifier = Modifier.widthIn(0.dp, maxPillWidth * 0.5f),
		)
		if (hasAttribution) {
		@@ -194,7 +203,7 @@ fun NavBarPill(
		style = MaterialTheme.typography.labelMedium,
		maxLines = 1,
		overflow = TextOverflow.Ellipsis,
		color = outlineColor,
		color = MaterialTheme.colorScheme.onSurface,
		modifier = Modifier.alpha(0.4f),
		)
		}
		@@ -213,19 +222,26 @@ fun NavBarPill(
		Modifier
		}
		)
		.padding(3.dp)
		.padding(3.5.dp)
		.size(16.dp)
		.border(
		width = 0.75.dp,
		color = MaterialTheme.colorScheme.outline,
		shape = CircleShape,
		)
		.then(iconBorder)
		.clip(CircleShape),
		)
		}
		}
		}
		}
		Box(
		Modifier.matchParentSize()
		.padding(1.dp)
		.blur(4.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)
		.animatedActionBorder(
		strokeWidth = 1.dp,
		cornerRadius = 16.dp,
		visible = visible,
		)
		)
		}

		PlatformIconButton(
		modifier =

packages/SystemUI/compose/features/src/com/android/systemui/ambientcue/ui/compose/ShortPill.kt

+20 −10

Original line number	Diff line number	Diff line
		@@ -26,6 +26,7 @@ import androidx.compose.foundation.Image
		import androidx.compose.foundation.background
		import androidx.compose.foundation.border
		import androidx.compose.foundation.clickable
		import androidx.compose.foundation.isSystemInDarkTheme
		import androidx.compose.foundation.layout.Arrangement
		import androidx.compose.foundation.layout.Box
		import androidx.compose.foundation.layout.Column
		@@ -55,6 +56,7 @@ import androidx.compose.ui.util.fastForEach
		import com.android.compose.PlatformIconButton
		import com.android.compose.ui.graphics.painter.rememberDrawablePainter
		import com.android.systemui.ambientcue.ui.compose.modifier.animatedActionBorder
		import com.android.systemui.ambientcue.ui.viewmodel.ActionType
		import com.android.systemui.ambientcue.ui.viewmodel.ActionViewModel
		import com.android.systemui.res.R

		@@ -68,8 +70,8 @@ fun ShortPill(
		onClick: () -> Unit = {},
		onCloseClick: () -> Unit = {},
		) {
		val outlineColor = MaterialTheme.colorScheme.onBackground
		val backgroundColor = MaterialTheme.colorScheme.background
		val outlineColor = if (isSystemInDarkTheme()) Color.White else Color.Black
		val backgroundColor = if (isSystemInDarkTheme()) Color.Black else Color.White
		val minSize = 48.dp
		val closeButtonSize = 28.dp
		val transitionTween: TweenSpec<Float> = tween(250, delayMillis = 200)
		@@ -172,14 +174,16 @@ private fun CloseButton(
		onCloseClick: () -> Unit,
		modifier: Modifier = Modifier,
		) {
		val decreasedAlphaBackgroundColor = backgroundColor.copy(alpha = 0.7f)
		PlatformIconButton(
		modifier = modifier.clip(CircleShape).background(backgroundColor).padding(8.dp),
		modifier =
		modifier.clip(CircleShape).background(decreasedAlphaBackgroundColor).padding(8.dp),
		iconResource = R.drawable.ic_close_white_rounded,
		colors =
		IconButtonColors(
		containerColor = backgroundColor,
		containerColor = Color.Transparent,
		contentColor = outlineColor,
		disabledContainerColor = backgroundColor,
		disabledContainerColor = Color.Transparent,
		disabledContentColor = outlineColor,
		),
		contentDescription =
		@@ -195,12 +199,18 @@ private fun Icon(action: ActionViewModel, backgroundColor: Color, modifier: Modi
		contentDescription = action.label,
		modifier =
		modifier
		.size(18.dp)
		.then(
		if (action.actionType == ActionType.MR) {
		Modifier.size(18.dp)
		} else {
		Modifier.size(16.dp)
		.border(
		width = 0.75.dp,
		color = MaterialTheme.colorScheme.outline,
		shape = CircleShape,
		)
		}
		)
		.padding(1.dp)
		.clip(CircleShape)
		.background(backgroundColor),