Skip to content

Update layouts to better suit the form factor #180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
riggaroo merged 5 commits into from
Dec 8, 2025
Merged

Update layouts to better suit the form factor #180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
14a98de
Changes aspect ratio of the wrapping box when the Camera is running i…
tiwiz Nov 27, 2025
c0e296d
Add new check for height size class to avoid cutting the UI
tiwiz Nov 27, 2025
d18a87a
Add preview for Main creation pane
tiwiz Nov 27, 2025
fb06c01
Rearrange buttons to avoid scrolling vertically on phone landscape
tiwiz Nov 27, 2025
e9d3e55
Fix function calling WSC calculation twice
tiwiz Nov 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions core/theme/src/main/java/com/android/developers/androidify/theme/components/Backgrounds.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@ import com.android.developers.androidify.theme.R
import com.android.developers.androidify.util.LargeScreensPreview
import com.android.developers.androidify.util.PhonePreview
import com.android.developers.androidify.util.dpToPx
import com.android.developers.androidify.util.isAtLeastMedium
import com.android.developers.androidify.util.isWidthAtLeastMedium

@Composable
fun SquiggleBackground(
modifier: Modifier = Modifier,
offsetHeightFraction: Float = 0f,
isMediumWindowSize: Boolean = isAtLeastMedium(),
isMediumWindowSize: Boolean = isWidthAtLeastMedium(),
) {
val vectorBackground =
rememberVectorPainter(ImageVector.vectorResource(R.drawable.squiggle))
Expand Down Expand Up @@ -113,7 +113,7 @@ private fun ResultsBackgroundPhonePreview() {
@Composable
fun ResultsBackground(
modifier: Modifier = Modifier,
isMediumWindowSize: Boolean = isAtLeastMedium(),
isMediumWindowSize: Boolean = isWidthAtLeastMedium(),
) {
Box(
modifier = modifier
Expand Down
2 changes: 2 additions & 0 deletions core/util/src/main/java/com/android/developers/androidify/util/AdaptivePreview.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,10 @@ import androidx.compose.ui.tooling.preview.Devices.PIXEL_7_PRO
import androidx.compose.ui.tooling.preview.Devices.PIXEL_FOLD
import androidx.compose.ui.tooling.preview.Devices.PIXEL_TABLET
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Preview(device = PIXEL_7_PRO, name = "Phone preview")
@Preview(widthDp = 891, heightDp = 411, name = "Phone landscape preview", )
annotation class PhonePreview

@Preview(device = PIXEL_3A_XL, name = "Phone small preview", heightDp = 300, widthDp = 500)
Expand Down
15 changes: 14 additions & 1 deletion core/util/src/main/java/com/android/developers/androidify/util/LayoutUtils.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,24 @@ fun calculateWindowSizeClass(): WindowSizeClass {
}

@Composable
fun isAtLeastMedium(): Boolean {
fun isWidthAtLeastMedium(): Boolean {
val sizeClass = calculateWindowSizeClass()
return sizeClass.isWidthAtLeastBreakpoint(WindowSizeClass.WIDTH_DP_MEDIUM_LOWER_BOUND)
}

@Composable
fun areBothWindowDimensionsAtLeastMedium(): Boolean {
val sizeClass = calculateWindowSizeClass()
return sizeClass.isHeightAtLeastBreakpoint(WindowSizeClass.HEIGHT_DP_MEDIUM_LOWER_BOUND) &&
sizeClass.isWidthAtLeastBreakpoint(WindowSizeClass.WIDTH_DP_MEDIUM_LOWER_BOUND)
}

@Composable
fun isHorizontalWindow(): Boolean {
val sizeClass = calculateWindowSizeClass()
return sizeClass.minWidthDp >= sizeClass.minHeightDp
}

/***
* This function is useful to limit the number of buttons when the window is too small to show
* everything that should otherwise appear on the screen.
Expand Down
10 changes: 5 additions & 5 deletions feature/camera/src/main/java/com/android/developers/androidify/camera/CameraLayout.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ import com.android.developers.androidify.theme.TertiaryContainer
import com.android.developers.androidify.util.FoldablePreviewParameters
import com.android.developers.androidify.util.FoldablePreviewParametersProvider
import com.android.developers.androidify.util.allowsFullContent
import com.android.developers.androidify.util.isAtLeastMedium
import com.android.developers.androidify.util.isWidthAtLeastMedium
import com.android.developers.androidify.util.shouldShowTabletopLayout
import com.android.developers.androidify.util.supportsTabletop
import com.android.developers.androidify.xr.LocalSpatialCapabilities
Expand Down Expand Up @@ -111,7 +111,7 @@ internal fun CameraLayout(
surfaceAspectRatio,
)

isAtLeastMedium() && shouldShowTabletopLayout(
isWidthAtLeastMedium() && shouldShowTabletopLayout(
supportsTabletop = supportsTabletop,
isTabletop = isTabletop,
) -> TableTopSupportedCameraLayout(
Expand All @@ -125,7 +125,7 @@ internal fun CameraLayout(
isTabletop = isTabletop,
)

isAtLeastMedium() && maxWidth > maxHeight -> MediumHorizontalCameraLayout(
isWidthAtLeastMedium() && maxWidth > maxHeight -> MediumHorizontalCameraLayout(
viewfinder,
captureButton,
flipCameraButton,
Expand Down Expand Up @@ -329,7 +329,7 @@ private fun TableTopCameraLayout(
Box(
modifier = Modifier
.weight(1f)
.aspectRatio(1f),
.aspectRatio(9/16f),
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Nov 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The aspect ratio 9/16f is a magic number. To improve readability and maintainability, consider extracting it into a named constant, for example:

private const val PORTRAIT_ASPECT_RATIO = 9f / 16f

This constant can then be reused here and also on line 384 in MediumHorizontalCameraLayout.

) {
viewfinder(Modifier)
guide(Modifier.fillMaxSize())
Expand Down Expand Up @@ -381,7 +381,7 @@ private fun MediumHorizontalCameraLayout(

Box(
Modifier
.aspectRatio(3 / 4f)
.aspectRatio(9 / 16f)
.navigationBarsPadding(),
) {
viewfinder(Modifier.fillMaxSize())
Expand Down
4 changes: 2 additions & 2 deletions ...creation/src/main/java/com/android/developers/androidify/creation/EditScreenLayoutType.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
package com.android.developers.androidify.creation

import androidx.compose.runtime.Composable
import com.android.developers.androidify.util.isAtLeastMedium
import com.android.developers.androidify.util.areBothWindowDimensionsAtLeastMedium
import com.android.developers.androidify.xr.LocalSpatialCapabilities

enum class EditScreenLayoutType {
Expand All @@ -29,7 +29,7 @@ enum class EditScreenLayoutType {
fun calculateLayoutType(enableXr: Boolean = false): EditScreenLayoutType {
return when {
LocalSpatialCapabilities.current.isSpatialUiEnabled && enableXr -> EditScreenLayoutType.Spatial
isAtLeastMedium() -> EditScreenLayoutType.Medium
areBothWindowDimensionsAtLeastMedium() -> EditScreenLayoutType.Medium
else -> EditScreenLayoutType.Compact
}
}
61 changes: 61 additions & 0 deletions feature/creation/src/main/java/com/android/developers/androidify/creation/PhotoPrompt.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ import com.android.developers.androidify.theme.components.SecondaryOutlinedButto
import com.android.developers.androidify.theme.sharedBoundsRevealWithShapeMorph
import com.android.developers.androidify.theme.sharedBoundsWithDefaults
import com.android.developers.androidify.util.dashedRoundedRectBorder
import com.android.developers.androidify.util.isHorizontalWindow
import com.android.developers.androidify.creation.R as CreationR

@Composable
Expand Down Expand Up @@ -169,6 +170,27 @@ private fun UploadEmptyState(
onCameraPressed: () -> Unit,
onChooseImagePress: () -> Unit,
modifier: Modifier = Modifier,
) {
if (isHorizontalWindow()) {
HorizontallyAlignedUploadEmptyState(
onCameraPressed = onCameraPressed,
onChooseImagePress = onChooseImagePress,
modifier = modifier,
)
} else {
VerticallyAlignedUploadEmptyState(
onCameraPressed = onCameraPressed,
onChooseImagePress = onChooseImagePress,
modifier = modifier,
)
}
}

@Composable
private fun VerticallyAlignedUploadEmptyState(
onCameraPressed: () -> Unit,
onChooseImagePress: () -> Unit,
modifier: Modifier = Modifier,
) {
Column(
modifier = modifier
Expand Down Expand Up @@ -206,6 +228,45 @@ private fun UploadEmptyState(
}
}

@Composable
private fun HorizontallyAlignedUploadEmptyState(
onCameraPressed: () -> Unit,
onChooseImagePress: () -> Unit,
modifier: Modifier = Modifier,
) {
Row(
modifier = modifier
.padding(16.dp),
horizontalArrangement = Arrangement.SpaceEvenly,
verticalAlignment = Alignment.CenterVertically,
) {
TakePhotoButton(onCameraPressed)
Text(
stringResource(CreationR.string.photo_picker_title),
fontSize = 28.sp,
textAlign = TextAlign.Center,
lineHeight = 40.sp,
minLines = 2,
maxLines = 2,
)
SecondaryOutlinedButton(
onClick = {
onChooseImagePress()
},
leadingIcon = {
Image(
painterResource(CreationR.drawable.choose_picture_image),
contentDescription = null,
modifier = Modifier
.padding(end = 8.dp)
.size(24.dp),
)
},
buttonText = stringResource(CreationR.string.photo_picker_choose_photo_label),
)
}
}

@Composable
private fun TakePhotoButton(onCameraPressed: () -> Unit) {
val interactionSource = remember { MutableInteractionSource() }
Expand Down
22 changes: 22 additions & 0 deletions feature/creation/src/main/java/com/android/developers/androidify/creation/PromptTypePager.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,9 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.android.developers.androidify.data.DropBehaviourFactory
import com.android.developers.androidify.theme.AndroidifyTheme
import com.android.developers.androidify.theme.SharedElementContextPreview
import com.android.developers.androidify.theme.components.HorizontalToolbar
import com.android.developers.androidify.util.PhonePreview
import kotlinx.coroutines.launch

@Composable
Expand Down Expand Up @@ -111,6 +113,7 @@ fun MainCreationPane(
}
}


@Composable
private fun PromptTypePager(
modifier: Modifier = Modifier,
Expand Down Expand Up @@ -186,3 +189,22 @@ private fun PromptTypeToolbarPreview() {
)
}
}

@Preview
@Composable
private fun PromptTypeMainPreview() {
AndroidifyTheme {
SharedElementContextPreview {
MainCreationPane(
uiState = CreationState(),
dropBehaviourFactory = fakeDropBehaviourFactory,
onCameraPressed = { },
onChooseImageClicked = {},
onUndoPressed = {},
onPromptGenerationPressed = {},
onSelectedPromptOptionChanged = {},
onDropCallback = {}
)
}
}
}
4 changes: 2 additions & 2 deletions feature/home/src/main/java/com/android/developers/androidify/home/AboutScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ import com.android.developers.androidify.theme.components.SecondaryOutlinedButto
import com.android.developers.androidify.theme.sharedBoundsReveal
import com.android.developers.androidify.util.LargeScreensPreview
import com.android.developers.androidify.util.PhonePreview
import com.android.developers.androidify.util.isAtLeastMedium
import com.android.developers.androidify.util.isWidthAtLeastMedium

@Composable
fun AboutScreen(
Expand All @@ -95,7 +95,7 @@ fun AboutScreenContents(
onPrivacyClicked: () -> Unit,
onLicensesClicked: () -> Unit,
xrEnabled: Boolean = false,
isMediumWindowSize: Boolean = isAtLeastMedium(),
isMediumWindowSize: Boolean = isWidthAtLeastMedium(),
) {
val bottomButtons = @Composable {
FooterButtons(
Expand Down
4 changes: 2 additions & 2 deletions feature/home/src/main/java/com/android/developers/androidify/home/HomeScreenLayoutType.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ package com.android.developers.androidify.home

import androidx.compose.runtime.Composable
import androidx.xr.compose.platform.LocalSpatialCapabilities
import com.android.developers.androidify.util.isAtLeastMedium
import com.android.developers.androidify.util.isWidthAtLeastMedium

enum class HomeScreenLayoutType {
Compact,
Expand All @@ -29,7 +29,7 @@ enum class HomeScreenLayoutType {
fun calculateLayoutType(enableXr: Boolean = false): HomeScreenLayoutType {
return when {
LocalSpatialCapabilities.current.isSpatialUiEnabled && enableXr -> HomeScreenLayoutType.Spatial
isAtLeastMedium() -> HomeScreenLayoutType.Medium
isWidthAtLeastMedium() -> HomeScreenLayoutType.Medium
else -> HomeScreenLayoutType.Compact
}
}
4 changes: 2 additions & 2 deletions ...ts/src/main/java/com/android/developers/androidify/customize/CustomizeExportLayoutType.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ package com.android.developers.androidify.customize

import androidx.compose.runtime.Composable
import androidx.xr.compose.platform.LocalSpatialCapabilities
import com.android.developers.androidify.util.isAtLeastMedium
import com.android.developers.androidify.util.isWidthAtLeastMedium

enum class CustomizeExportLayoutType {
Compact,
Expand All @@ -29,7 +29,7 @@ enum class CustomizeExportLayoutType {
fun calculateLayoutType(enableXr: Boolean = false): CustomizeExportLayoutType {
return when {
LocalSpatialCapabilities.current.isSpatialUiEnabled && enableXr -> CustomizeExportLayoutType.Spatial
isAtLeastMedium() -> CustomizeExportLayoutType.Medium
isWidthAtLeastMedium() -> CustomizeExportLayoutType.Medium
else -> CustomizeExportLayoutType.Compact
}
}
4 changes: 2 additions & 2 deletions feature/results/src/main/java/com/android/developers/androidify/results/ResultsScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ import com.android.developers.androidify.theme.components.AndroidifyTopAppBar
import com.android.developers.androidify.theme.components.ResultsBackground
import com.android.developers.androidify.util.AdaptivePreview
import com.android.developers.androidify.util.SmallPhonePreview
import com.android.developers.androidify.util.isAtLeastMedium
import com.android.developers.androidify.util.isWidthAtLeastMedium
import com.android.developers.androidify.xr.RequestFullSpaceIconButton
import com.android.developers.androidify.xr.RequestHomeSpaceIconButton
import com.android.developers.androidify.xr.couldRequestFullSpace
Expand Down Expand Up @@ -129,7 +129,7 @@ fun ResultsScreenContents(
val topBar = @Composable {
AndroidifyTopAppBar(
backEnabled = true,
isMediumWindowSize = isAtLeastMedium(),
isMediumWindowSize = isWidthAtLeastMedium(),
onBackPressed = {
onBackPress()
},
Expand Down