Merge "Short Pill UI for 3-Button Nav and Taskbar" into main (23952cf7) · Commits · e / os / android_frameworks_base

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

+8 −4

Original line number	Diff line number	Diff line
		@@ -31,18 +31,22 @@ import androidx.compose.ui.Alignment
		import androidx.compose.ui.Modifier
		import androidx.compose.ui.platform.LocalDensity
		import androidx.compose.ui.unit.dp
		import androidx.compose.ui.util.fastForEachIndexed
		import com.android.systemui.ambientcue.ui.viewmodel.ActionViewModel

		@Composable
		fun ActionList(actions: List<ActionViewModel>, visible: Boolean, modifier: Modifier = Modifier) {
		fun ActionList(
		actions: List<ActionViewModel>,
		visible: Boolean,
		modifier: Modifier = Modifier,
		horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
		) {
		val density = LocalDensity.current
		Column(
		modifier = modifier,
		verticalArrangement = Arrangement.spacedBy(8.dp),
		horizontalAlignment = Alignment.CenterHorizontally,
		horizontalAlignment = horizontalAlignment,
		) {
		actions.fastForEachIndexed { index, action ->
		actions.forEachIndexed { index, action ->
		AnimatedVisibility(
		visible = visible,
		enter =

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

+118 −22

Original line number	Diff line number	Diff line
		@@ -16,17 +16,34 @@

		package com.android.systemui.ambientcue.ui.compose

		import android.content.res.Configuration
		import androidx.compose.foundation.clickable
		import androidx.compose.foundation.layout.Box
		import androidx.compose.foundation.layout.padding
		import androidx.compose.runtime.Composable
		import androidx.compose.runtime.LaunchedEffect
		import androidx.compose.runtime.getValue
		import androidx.compose.runtime.mutableStateOf
		import androidx.compose.runtime.remember
		import androidx.compose.runtime.setValue
		import androidx.compose.ui.Alignment
		import androidx.compose.ui.Modifier
		import androidx.compose.ui.geometry.Offset
		import androidx.compose.ui.geometry.Rect
		import androidx.compose.ui.graphics.graphicsLayer
		import androidx.compose.ui.layout.boundsInParent
		import androidx.compose.ui.layout.onGloballyPositioned
		import androidx.compose.ui.platform.LocalConfiguration
		import androidx.compose.ui.unit.IntOffset
		import androidx.compose.ui.unit.dp
		import com.android.systemui.ambientcue.ui.viewmodel.ActionViewModel
		import com.android.systemui.ambientcue.ui.viewmodel.AmbientCueViewModel
		import com.android.systemui.ambientcue.ui.viewmodel.PillStyleViewModel
		import com.android.systemui.lifecycle.rememberViewModel

		// TODO: b/414507396 - Replace with the height of the navbar
		private val chipsBottomPadding = 46.dp

		@Composable
		fun AmbientCueContainer(
		modifier: Modifier = Modifier,
		@@ -38,9 +55,7 @@ fun AmbientCueContainer(
		val visible = viewModel.isVisible
		val expanded = viewModel.isExpanded
		val actions = viewModel.actions

		// TODO: b/414507396 - Replace with the height of the navbar
		val chipsBottomPadding = 46.dp
		val pillStyle = viewModel.pillStyle

		LaunchedEffect(expanded) {
		onShouldInterceptTouches(expanded)
		@@ -58,24 +73,105 @@ fun AmbientCueContainer(
		viewModel.collapse()
		}
		) {
		BackgroundGlow(
		when (pillStyle) {
		is PillStyleViewModel.NavBarPillStyle -> {
		NavBarAmbientCue(
		viewModel = viewModel,
		actions = actions,
		visible = visible,
		expanded = expanded,
		modifier = Modifier.align(Alignment.BottomCenter),
		)
		}
		is PillStyleViewModel.ShortPillStyle -> {
		val pillCenterInWindow = pillStyle.position
		TaskBarAnd3ButtonAmbientCue(
		viewModel = viewModel,
		actions = actions,
		visible = visible,
		expanded = expanded,
		pillCenterInWindow = pillCenterInWindow,
		modifier =
		if (pillCenterInWindow == null) {
		Modifier.align(Alignment.BottomCenter)
		} else {
		Modifier
		},
		)
		}
		is PillStyleViewModel.Uninitialized -> {}
		}
		}
		}

		@Composable
		private fun TaskBarAnd3ButtonAmbientCue(
		viewModel: AmbientCueViewModel,
		actions: List<ActionViewModel>,
		visible: Boolean,
		expanded: Boolean,
		pillCenterInWindow: Rect?,
		modifier: Modifier = Modifier,
		) {
		val configuration = LocalConfiguration.current
		val portrait = configuration.orientation == Configuration.ORIENTATION_PORTRAIT
		var pillCenter by remember { mutableStateOf(Offset.Zero) }
		BackgroundGlow(
		visible = visible,
		expanded = expanded,
		collapsedOffset = IntOffset(0, 110),
		modifier = modifier.graphicsLayer { translationX = -size.width / 2 + pillCenter.x },
		)
		ShortPill(
		actions = actions,
		visible = visible,
		horizontal = portrait,
		expanded = expanded,
		modifier =
		if (pillCenterInWindow == null) {
		modifier.padding(bottom = 12.dp, end = 24.dp).onGloballyPositioned {
		pillCenter = it.boundsInParent().center
		}
		} else {
		Modifier.graphicsLayer {
		val center = pillCenterInWindow.center
		translationX = center.x - size.width / 2
		translationY = center.y - size.height / 2
		pillCenter = center
		}
		},
		onClick = { viewModel.expand() },
		onCloseClick = { viewModel.hide() },
		)
		ActionList(
		actions = actions,
		visible = visible && expanded,
		horizontalAlignment = Alignment.End,
		modifier = modifier.padding(bottom = chipsBottomPadding, end = 24.dp),
		)
		}

		@Composable
		private fun NavBarAmbientCue(
		viewModel: AmbientCueViewModel,
		actions: List<ActionViewModel>,
		visible: Boolean,
		expanded: Boolean,
		modifier: Modifier = Modifier,
		) {
		BackgroundGlow(visible = visible, expanded = expanded, modifier = modifier)
		NavBarPill(
		actions = actions,
		navBarWidth = 110.dp, // TODO: b/414507396 - Replace with the width of the navbar
		visible = visible,
		expanded = expanded,
		modifier = Modifier.align(Alignment.BottomCenter),
		modifier = modifier,
		onClick = { viewModel.expand() },
		onCloseClick = { viewModel.hide() },
		)
		ActionList(
		actions = actions,
		visible = visible && expanded,
		modifier = Modifier.align(Alignment.BottomCenter).padding(bottom = chipsBottomPadding),
		modifier = modifier.padding(bottom = chipsBottomPadding),
		)
		}
		}

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

+12 −6

Original line number	Diff line number	Diff line
		@@ -19,9 +19,9 @@ package com.android.systemui.ambientcue.ui.compose
		import android.graphics.RuntimeShader
		import androidx.compose.animation.core.LinearEasing
		import androidx.compose.animation.core.RepeatMode
		import androidx.compose.animation.core.animateDpAsState
		import androidx.compose.animation.core.animateFloat
		import androidx.compose.animation.core.animateFloatAsState
		import androidx.compose.animation.core.animateIntOffsetAsState
		import androidx.compose.animation.core.infiniteRepeatable
		import androidx.compose.animation.core.rememberInfiniteTransition
		import androidx.compose.animation.core.tween
		@@ -37,20 +37,25 @@ import androidx.compose.ui.graphics.Color
		import androidx.compose.ui.graphics.ShaderBrush
		import androidx.compose.ui.graphics.toArgb
		import androidx.compose.ui.platform.LocalDensity
		import androidx.compose.ui.unit.IntOffset
		import androidx.compose.ui.unit.dp
		import com.android.systemui.ambientcue.ui.shader.BackgroundGlowShader
		import com.android.systemui.ambientcue.ui.utils.AiColorUtils.boostChroma

		@Composable
		fun BackgroundGlow(visible: Boolean, expanded: Boolean, modifier: Modifier) {
		fun BackgroundGlow(
		visible: Boolean,
		expanded: Boolean,
		collapsedOffset: IntOffset = IntOffset(0, 110),
		modifier: Modifier,
		) {
		val density = LocalDensity.current
		val turbulenceDisplacementPx = with(density) { Defaults.TURBULENCE_DISPLACEMENT_DP.dp.toPx() }
		val gradientRadiusPx = with(density) { Defaults.GRADIENT_RADIUS.dp.toPx() }

		val alpha by animateFloatAsState(if (visible) 1f else 0f, animationSpec = tween(750))
		val verticalOffset by
		animateDpAsState(if (expanded) 0.dp else Defaults.COLLAPSED_TRANSLATION_DP.dp, tween(350))
		val verticalOffsetPx = with(density) { verticalOffset.toPx() }
		animateIntOffsetAsState(if (expanded) IntOffset.Zero else collapsedOffset, tween(350))

		// Infinite animation responsible for the "vapor" effect distorting the radial gradient
		val infiniteTransition = rememberInfiniteTransition(label = "backgroundGlow")
		@@ -76,12 +81,14 @@ fun BackgroundGlow(visible: Boolean, expanded: Boolean, modifier: Modifier) {
		Box(
		modifier.size(400.dp, 200.dp).alpha(alpha).drawWithCache {
		onDrawWithContent {
		val offsetX = with(density) { verticalOffset.x.dp.toPx() }
		val offsetY = with(density) { verticalOffset.y.dp.toPx() }
		shader.setFloatUniform("alpha", alpha)
		shader.setFloatUniform("resolution", size.width, size.height)
		shader.setColorUniform("color1", color1.toArgb())
		shader.setColorUniform("color2", color2.toArgb())
		shader.setColorUniform("color3", color3.toArgb())
		shader.setFloatUniform("origin", size.width / 2, size.height + verticalOffsetPx)
		shader.setFloatUniform("origin", size.width / 2 + offsetX, size.height + offsetY)
		shader.setFloatUniform("radius", gradientRadiusPx)
		shader.setFloatUniform("turbulenceAmount", turbulenceDisplacementPx)
		shader.setFloatUniform("turbulencePhase", turbulencePhase)
		@@ -93,7 +100,6 @@ fun BackgroundGlow(visible: Boolean, expanded: Boolean, modifier: Modifier) {
		}

		private object Defaults {
		const val COLLAPSED_TRANSLATION_DP = 110
		const val TURBULENCE_SIZE = 4.7f
		const val TURBULENCE_DISPLACEMENT_DP = 30
		const val GRADIENT_RADIUS = 200

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

0 → 100644

+218 −0

Original line number	Diff line number	Diff line
		/*
		* Copyright (C) 2025 The Android Open Source Project
		*
		* Licensed under the Apache License, Version 2.0 (the "License");
		* you may not use this file except in compliance with the License.
		* You may obtain a copy of the License at
		*
		* http://www.apache.org/licenses/LICENSE-2.0
		*
		* Unless required by applicable law or agreed to in writing, software
		* distributed under the License is distributed on an "AS IS" BASIS,
		* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
		* See the License for the specific language governing permissions and
		* limitations under the License.
		*/

		package com.android.systemui.ambientcue.ui.compose

		import androidx.compose.animation.core.AnimationSpec
		import androidx.compose.animation.core.animateFloatAsState
		import androidx.compose.animation.core.tween
		import androidx.compose.foundation.Image
		import androidx.compose.foundation.background
		import androidx.compose.foundation.border
		import androidx.compose.foundation.clickable
		import androidx.compose.foundation.layout.Arrangement
		import androidx.compose.foundation.layout.Box
		import androidx.compose.foundation.layout.Column
		import androidx.compose.foundation.layout.Row
		import androidx.compose.foundation.layout.Spacer
		import androidx.compose.foundation.layout.defaultMinSize
		import androidx.compose.foundation.layout.padding
		import androidx.compose.foundation.layout.size
		import androidx.compose.foundation.layout.widthIn
		import androidx.compose.foundation.shape.CircleShape
		import androidx.compose.foundation.shape.RoundedCornerShape
		import androidx.compose.material3.IconButtonColors
		import androidx.compose.material3.MaterialTheme
		import androidx.compose.material3.Text
		import androidx.compose.runtime.Composable
		import androidx.compose.runtime.getValue
		import androidx.compose.ui.Alignment
		import androidx.compose.ui.Modifier
		import androidx.compose.ui.draw.clip
		import androidx.compose.ui.graphics.Color
		import androidx.compose.ui.graphics.ColorFilter
		import androidx.compose.ui.graphics.graphicsLayer
		import androidx.compose.ui.res.stringResource
		import androidx.compose.ui.text.style.TextOverflow
		import androidx.compose.ui.unit.dp
		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.ActionViewModel
		import com.android.systemui.res.R

		@Composable
		fun ShortPill(
		actions: List<ActionViewModel>,
		modifier: Modifier = Modifier,
		horizontal: Boolean = true,
		visible: Boolean = true,
		expanded: Boolean = false,
		onClick: () -> Unit = {},
		onCloseClick: () -> Unit = {},
		) {
		val outlineColor = MaterialTheme.colorScheme.onBackground
		val backgroundColor = MaterialTheme.colorScheme.background
		val minSize = 48.dp
		val closeButtonSize = 28.dp
		val transitionTween: AnimationSpec<Float> = tween(250, delayMillis = 200)

		val enterProgress by
		animateFloatAsState(
		if (visible) 1f else 0f,
		animationSpec = transitionTween,
		label = "enter",
		)
		val expansionAlpha by
		animateFloatAsState(
		if (expanded) 0f else 1f,
		animationSpec = transitionTween,
		label = "expansion",
		)

		Box(
		modifier =
		modifier.graphicsLayer {
		scaleY = enterProgress
		scaleX = enterProgress
		}
		) {
		val pillModifier =
		Modifier.graphicsLayer { alpha = enterProgress * expansionAlpha }
		.clip(RoundedCornerShape(16.dp))
		.background(backgroundColor)
		.animatedActionBorder(
		strokeWidth = 2.dp,
		strokeColor = outlineColor,
		cornerRadius = 16.dp,
		visible = visible,
		)
		.widthIn(0.dp, minSize * 2)
		.clickable { onClick() }
		.padding(4.dp)

		if (horizontal) {
		Row(
		horizontalArrangement = Arrangement.spacedBy(8.dp),
		verticalAlignment = Alignment.CenterVertically,
		) {
		Spacer(modifier = Modifier.size(closeButtonSize))

		Row(
		horizontalArrangement =
		Arrangement.spacedBy(-4.dp, Alignment.CenterHorizontally),
		verticalAlignment = Alignment.CenterVertically,
		modifier = pillModifier.defaultMinSize(minWidth = minSize),
		) {
		actions.take(3).fastForEach { action ->
		Icon(action, backgroundColor, outlineColor)
		if (actions.size == 1) {
		Text(
		text = action.label,
		color = outlineColor,
		style = MaterialTheme.typography.labelMedium,
		overflow = TextOverflow.Ellipsis,
		maxLines = 1,
		modifier = Modifier.padding(horizontal = 8.dp),
		)
		}
		}
		}

		CloseButton(
		backgroundColor,
		outlineColor,
		onCloseClick,
		Modifier.size(closeButtonSize),
		)
		}
		} else {
		Column(
		verticalArrangement = Arrangement.spacedBy(8.dp),
		horizontalAlignment = Alignment.CenterHorizontally,
		) {
		Spacer(modifier = Modifier.size(closeButtonSize))

		Column(
		verticalArrangement = Arrangement.spacedBy(-4.dp, Alignment.CenterVertically),
		modifier = pillModifier.defaultMinSize(minHeight = minSize),
		) {
		actions.take(3).fastForEach { action ->
		Icon(action, backgroundColor, outlineColor)
		}
		}

		CloseButton(
		backgroundColor,
		outlineColor,
		onCloseClick,
		Modifier.size(closeButtonSize),
		)
		}
		}
		}
		}

		@Composable
		private fun CloseButton(
		backgroundColor: Color,
		outlineColor: Color,
		onCloseClick: () -> Unit,
		modifier: Modifier = Modifier,
		) {
		PlatformIconButton(
		modifier = modifier.clip(CircleShape).background(backgroundColor).padding(8.dp),
		iconResource = R.drawable.ic_close_white_rounded,
		colors =
		IconButtonColors(
		containerColor = backgroundColor,
		contentColor = outlineColor,
		disabledContainerColor = backgroundColor,
		disabledContentColor = outlineColor,
		),
		contentDescription =
		stringResource(id = R.string.underlay_close_button_content_description),
		onClick = onCloseClick,
		)
		}

		@Composable
		private fun Icon(
		action: ActionViewModel,
		backgroundColor: Color,
		outlineColor: Color,
		modifier: Modifier = Modifier,
		) {
		val hasAttribution = action.attribution != null
		Image(
		painter = rememberDrawablePainter(action.icon),
		colorFilter =
		if (hasAttribution) {
		ColorFilter.tint(outlineColor)
		} else {
		null
		},
		contentDescription = action.label,
		modifier =
		modifier
		.size(18.dp)
		.border(1.dp, backgroundColor, CircleShape)
		.padding(1.dp)
		.clip(CircleShape)
		.background(backgroundColor),
		)
		}

packages/SystemUI/multivalentTests/src/com/android/systemui/ambientcue/domain/interactor/AmbientCueInteractorTest.kt

+32 −0

Original line number	Diff line number	Diff line
		@@ -88,4 +88,36 @@ class AmbientCueInteractorTest : SysuiTestCase() {
		ambientCueInteractor.setImeVisible(false)
		assertThat(isImeVisible).isFalse()
		}

		@Test
		fun isGestureNav_setTrue_true() =
		kosmos.runTest {
		val isGestureNav by collectLastValue(ambientCueInteractor.isGestureNav)
		ambientCueRepository.fake.setIsGestureNav(true)
		assertThat(isGestureNav).isTrue()
		}

		@Test
		fun isGestureNav_setFalse_false() =
		kosmos.runTest {
		val isGestureNav by collectLastValue(ambientCueInteractor.isGestureNav)
		ambientCueRepository.fake.setIsGestureNav(false)
		assertThat(isGestureNav).isFalse()
		}

		@Test
		fun isTaskBarVisible_setTrue_true() =
		kosmos.runTest {
		val isTaskBarVisible by collectLastValue(ambientCueInteractor.isTaskBarVisible)
		ambientCueRepository.fake.setTaskBarVisible(true)
		assertThat(isTaskBarVisible).isTrue()
		}

		@Test
		fun isTaskBarVisible_setFalse_false() =
		kosmos.runTest {
		val isTaskBarVisible by collectLastValue(ambientCueInteractor.isTaskBarVisible)
		ambientCueRepository.fake.setTaskBarVisible(false)
		assertThat(isTaskBarVisible).isFalse()
		}
		}