From ed5ddb0a87910003ad5d8ffb94ee6374d00094df Mon Sep 17 00:00:00 2001 From: Michal Brzezinski Date: Mon, 28 Oct 2024 12:55:14 +0000 Subject: Adding support for portrait orientation in tutorial selection screen Extracting three tutorial buttons to separate composable and making its parent depend on the orientation. If we're in landscape they are positioned horizontally and otherwise vertically. Note this change still doesn't remove enforcing landscape orientation from AndroidManifest so for now it's still letterboxed in portrait. Also drive-by fix for inset paddings. Fixes: 369829466 Bug: 376020472 Test: screenshots Flag: com.android.systemui.shared.new_touchpad_gestures_tutorial Change-Id: Ie5417409f896703dd5d60d0357f256701f5f5de4 --- .../ui/composable/TutorialSelectionScreen.kt | 115 +++++++++++++++------ 1 file changed, 84 insertions(+), 31 deletions(-) diff --git a/packages/SystemUI/src/com/android/systemui/touchpad/tutorial/ui/composable/TutorialSelectionScreen.kt b/packages/SystemUI/src/com/android/systemui/touchpad/tutorial/ui/composable/TutorialSelectionScreen.kt index c2093114c98f..d371acf86a28 100644 --- a/packages/SystemUI/src/com/android/systemui/touchpad/tutorial/ui/composable/TutorialSelectionScreen.kt +++ b/packages/SystemUI/src/com/android/systemui/touchpad/tutorial/ui/composable/TutorialSelectionScreen.kt @@ -16,15 +16,16 @@ package com.android.systemui.touchpad.tutorial.ui.composable +import android.content.res.Configuration import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.aspectRatio import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.safeDrawingPadding import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.icons.Icons @@ -40,6 +41,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.input.pointer.pointerInteropFilter +import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.vectorResource import androidx.compose.ui.unit.dp @@ -60,6 +62,7 @@ fun TutorialSelectionScreen( modifier = Modifier.background(color = MaterialTheme.colorScheme.surfaceContainer) .fillMaxSize() + .safeDrawingPadding() .pointerInteropFilter( onTouchEvent = { event -> // Because of window flag we're intercepting 3 and 4-finger swipes. @@ -69,12 +72,26 @@ fun TutorialSelectionScreen( } ), ) { - TutorialSelectionButtons( - onBackTutorialClicked = onBackTutorialClicked, - onHomeTutorialClicked = onHomeTutorialClicked, - onRecentAppsTutorialClicked = onRecentAppsTutorialClicked, - modifier = Modifier.padding(60.dp), - ) + val configuration = LocalConfiguration.current + when (configuration.orientation) { + Configuration.ORIENTATION_LANDSCAPE -> { + HorizontalSelectionButtons( + onBackTutorialClicked = onBackTutorialClicked, + onHomeTutorialClicked = onHomeTutorialClicked, + onRecentAppsTutorialClicked = onRecentAppsTutorialClicked, + modifier = Modifier.weight(1f).padding(60.dp), + ) + } + else -> { + VerticalSelectionButtons( + onBackTutorialClicked = onBackTutorialClicked, + onHomeTutorialClicked = onHomeTutorialClicked, + onRecentAppsTutorialClicked = onRecentAppsTutorialClicked, + modifier = Modifier.weight(1f).padding(60.dp), + ) + } + } + // because other composables have weight 1, Done button will be positioned first DoneButton( onDoneButtonClicked = onDoneButtonClicked, modifier = Modifier.padding(horizontal = 60.dp), @@ -83,7 +100,7 @@ fun TutorialSelectionScreen( } @Composable -private fun TutorialSelectionButtons( +private fun HorizontalSelectionButtons( onBackTutorialClicked: () -> Unit, onHomeTutorialClicked: () -> Unit, onRecentAppsTutorialClicked: () -> Unit, @@ -94,33 +111,69 @@ private fun TutorialSelectionButtons( verticalAlignment = Alignment.CenterVertically, modifier = modifier, ) { - TutorialButton( - text = stringResource(R.string.touchpad_tutorial_home_gesture_button), - icon = ImageVector.vectorResource(id = R.drawable.touchpad_tutorial_home_icon), - iconColor = MaterialTheme.colorScheme.onPrimary, - onClick = onHomeTutorialClicked, - backgroundColor = MaterialTheme.colorScheme.primary, - modifier = Modifier.weight(1f), + ThreeTutorialButtons( + onBackTutorialClicked, + onHomeTutorialClicked, + onRecentAppsTutorialClicked, + modifier = Modifier.weight(1f).fillMaxSize(), ) - TutorialButton( - text = stringResource(R.string.touchpad_tutorial_back_gesture_button), - icon = Icons.AutoMirrored.Outlined.ArrowBack, - iconColor = MaterialTheme.colorScheme.onTertiary, - onClick = onBackTutorialClicked, - backgroundColor = MaterialTheme.colorScheme.tertiary, - modifier = Modifier.weight(1f), - ) - TutorialButton( - text = stringResource(R.string.touchpad_tutorial_recent_apps_gesture_button), - icon = ImageVector.vectorResource(id = R.drawable.touchpad_tutorial_recents_icon), - iconColor = MaterialTheme.colorScheme.onSecondary, - onClick = onRecentAppsTutorialClicked, - backgroundColor = MaterialTheme.colorScheme.secondary, - modifier = Modifier.weight(1f), + } +} + +@Composable +private fun VerticalSelectionButtons( + onBackTutorialClicked: () -> Unit, + onHomeTutorialClicked: () -> Unit, + onRecentAppsTutorialClicked: () -> Unit, + modifier: Modifier = Modifier, +) { + Column( + verticalArrangement = Arrangement.spacedBy(20.dp), + horizontalAlignment = Alignment.CenterHorizontally, + modifier = modifier, + ) { + ThreeTutorialButtons( + onBackTutorialClicked, + onHomeTutorialClicked, + onRecentAppsTutorialClicked, + modifier = Modifier.weight(1f).fillMaxSize(), ) } } +@Composable +private fun ThreeTutorialButtons( + onBackTutorialClicked: () -> Unit, + onHomeTutorialClicked: () -> Unit, + onRecentAppsTutorialClicked: () -> Unit, + modifier: Modifier = Modifier, +) { + TutorialButton( + text = stringResource(R.string.touchpad_tutorial_home_gesture_button), + icon = ImageVector.vectorResource(id = R.drawable.touchpad_tutorial_home_icon), + iconColor = MaterialTheme.colorScheme.onPrimary, + onClick = onHomeTutorialClicked, + backgroundColor = MaterialTheme.colorScheme.primary, + modifier = modifier, + ) + TutorialButton( + text = stringResource(R.string.touchpad_tutorial_back_gesture_button), + icon = Icons.AutoMirrored.Outlined.ArrowBack, + iconColor = MaterialTheme.colorScheme.onTertiary, + onClick = onBackTutorialClicked, + backgroundColor = MaterialTheme.colorScheme.tertiary, + modifier = modifier, + ) + TutorialButton( + text = stringResource(R.string.touchpad_tutorial_recent_apps_gesture_button), + icon = ImageVector.vectorResource(id = R.drawable.touchpad_tutorial_recents_icon), + iconColor = MaterialTheme.colorScheme.onSecondary, + onClick = onRecentAppsTutorialClicked, + backgroundColor = MaterialTheme.colorScheme.secondary, + modifier = modifier, + ) +} + @Composable private fun TutorialButton( text: String, @@ -134,7 +187,7 @@ private fun TutorialButton( onClick = onClick, shape = RoundedCornerShape(16.dp), colors = ButtonDefaults.buttonColors(containerColor = backgroundColor), - modifier = modifier.aspectRatio(0.66f), + modifier = modifier, ) { Column( verticalArrangement = Arrangement.Center, -- cgit v1.2.3-59-g8ed1b From a8d1d38f6dcbdb50692700aed7d294207033a8b9 Mon Sep 17 00:00:00 2001 From: Michal Brzezinski Date: Mon, 28 Oct 2024 16:43:00 +0000 Subject: Adding support for portrait orientation in tutorial screens If we're in landscape description and animation are positioned horizontally and otherwise vertically. Note this change doesn't remove enforcing landscape orientation from AndroidManifest so for now it's still letterboxed in portrait. Bug: 376020472 Test: screenshots Flag: com.android.systemui.shared.new_touchpad_gestures_tutorial Change-Id: I5618f8fd485e54614d739efc228d733afdef71b0 --- .../ui/composable/ActionTutorialContent.kt | 74 +++++++++++++++------- .../tutorial/ui/composable/TutorialAnimation.kt | 7 +- 2 files changed, 58 insertions(+), 23 deletions(-) diff --git a/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/ActionTutorialContent.kt b/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/ActionTutorialContent.kt index 3d2baee9b936..edc7c1d6361f 100644 --- a/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/ActionTutorialContent.kt +++ b/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/ActionTutorialContent.kt @@ -16,8 +16,8 @@ package com.android.systemui.inputdevice.tutorial.ui.composable +import android.content.res.Configuration import androidx.annotation.RawRes -import androidx.annotation.StringRes import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.fadeIn import androidx.compose.foundation.background @@ -36,6 +36,7 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import com.android.systemui.inputdevice.tutorial.ui.composable.TutorialActionState.Finished @@ -66,23 +67,13 @@ fun ActionTutorialContent( .safeDrawingPadding() .padding(start = 48.dp, top = 100.dp, end = 48.dp, bottom = 8.dp), ) { - Row(modifier = Modifier.fillMaxWidth().weight(1f)) { - TutorialDescription( - titleTextId = - if (actionState is Finished) config.strings.titleSuccessResId - else config.strings.titleResId, - titleColor = config.colors.title, - bodyTextId = - if (actionState is Finished) config.strings.bodySuccessResId - else config.strings.bodyResId, - modifier = Modifier.weight(1f), - ) - Spacer(modifier = Modifier.width(76.dp)) - TutorialAnimation( - actionState, - config, - modifier = Modifier.weight(1f).padding(top = 8.dp), - ) + when (LocalConfiguration.current.orientation) { + Configuration.ORIENTATION_LANDSCAPE -> { + HorizontalDescriptionAndAnimation(actionState, config, Modifier.weight(1f)) + } + else -> { + VerticalDescriptionAndAnimation(actionState, config, Modifier.weight(1f)) + } } AnimatedVisibility(visible = actionState is Finished, enter = fadeIn()) { DoneButton(onDoneButtonClicked = onDoneButtonClicked) @@ -90,18 +81,57 @@ fun ActionTutorialContent( } } +@Composable +private fun HorizontalDescriptionAndAnimation( + actionState: TutorialActionState, + config: TutorialScreenConfig, + modifier: Modifier = Modifier, +) { + Row(modifier = modifier.fillMaxWidth()) { + TutorialDescription(actionState, config, modifier = Modifier.weight(1f)) + Spacer(modifier = Modifier.width(70.dp)) + TutorialAnimation(actionState, config, modifier = Modifier.weight(1f)) + } +} + +@Composable +private fun VerticalDescriptionAndAnimation( + actionState: TutorialActionState, + config: TutorialScreenConfig, + modifier: Modifier = Modifier, +) { + Column(modifier = modifier.fillMaxWidth().padding(horizontal = 40.dp, vertical = 40.dp)) { + Spacer(modifier = Modifier.weight(0.1f)) + TutorialDescription( + actionState, + config, + modifier = + Modifier.weight(0.2f) + // extra padding to better align with animation which has embedded padding + .padding(horizontal = 15.dp), + ) + Spacer(modifier = Modifier.width(70.dp)) + TutorialAnimation(actionState, config, modifier = Modifier.weight(1f)) + } +} + @Composable fun TutorialDescription( - @StringRes titleTextId: Int, - titleColor: Color, - @StringRes bodyTextId: Int, + actionState: TutorialActionState, + config: TutorialScreenConfig, modifier: Modifier = Modifier, ) { + val (titleTextId, bodyTextId) = + if (actionState is Finished) { + config.strings.titleSuccessResId to config.strings.bodySuccessResId + } else { + config.strings.titleResId to config.strings.bodyResId + } Column(verticalArrangement = Arrangement.Top, modifier = modifier) { Text( text = stringResource(id = titleTextId), style = MaterialTheme.typography.displayLarge, - color = titleColor, + color = config.colors.title, ) Spacer(modifier = Modifier.height(16.dp)) Text( diff --git a/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/TutorialAnimation.kt b/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/TutorialAnimation.kt index 720c01fc7056..2be619bac998 100644 --- a/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/TutorialAnimation.kt +++ b/packages/SystemUI/src/com/android/systemui/inputdevice/tutorial/ui/composable/TutorialAnimation.kt @@ -24,11 +24,13 @@ import androidx.compose.animation.core.tween import androidx.compose.animation.fadeOut import androidx.compose.animation.togetherWith import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.remember import androidx.compose.runtime.saveable.rememberSaveable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.node.Ref import androidx.compose.ui.util.lerp @@ -49,7 +51,7 @@ fun TutorialAnimation( config: TutorialScreenConfig, modifier: Modifier = Modifier, ) { - Box(modifier = modifier.fillMaxWidth()) { + Box(contentAlignment = Alignment.Center, modifier = modifier.fillMaxWidth()) { AnimatedContent( targetState = actionState::class, transitionSpec = { @@ -97,6 +99,7 @@ private fun EducationAnimation( composition = composition, progress = { progress }, dynamicProperties = animationProperties, + modifier = Modifier.fillMaxSize(), ) } @@ -112,6 +115,7 @@ private fun SuccessAnimation( composition = composition, progress = { progress }, dynamicProperties = animationProperties, + modifier = Modifier.fillMaxSize(), ) } @@ -142,6 +146,7 @@ private fun InProgressAnimation( composition = composition, progress = { lerp(start = startProgress, stop = endProgress, fraction = progress) }, dynamicProperties = animationProperties, + modifier = Modifier.fillMaxSize(), ) } -- cgit v1.2.3-59-g8ed1b