adaptive

Prerequisites

The app must:

• Use Compose for all screens. If it's still using Fragments or Views, suggest using the XML to Compose skill to migrate those screens.
• Use Jetpack Navigation 3. If it doesn't, suggest the Navigation 3 skill to migrate the app.

Workflow to make an app adaptive

To make an app adaptive, follow these steps or a subset of them adapting to the task.

• Step 1: Verify current UI
• Step 2: Make the navigation bar adaptive
• Step 3: Add multi-pane layouts
• Step 4: Make vertical lists adaptive by changing the number of columns
• Step 5: Hide app bars when scrolling

Step 1. Verify current UI

Ensure that screenshot tests exist to verify the current UI on different form factors. If they don't exist, add the Compose Preview Screenshot Testing tool. Use the following annotation to create previews for all the major form factors. For example:

@Preview(name = "Phone", device = Devices.PHONE, showBackground = true)
@Preview(name = "Foldable", device = Devices.FOLDABLE, showBackground = true)
@Preview(name = "Tablet", device = Devices.TABLET, showBackground = true)
@Preview(name = "Desktop", device = Devices.DESKTOP, showBackground = true)
annotation class FormFactorPreviews

@PreviewTest
@FormFactorPreviews
@Composable
fun FeedScreenPreview() {
    SnippetsTheme {
        Box {
            Text("My Screen")
        }
    }
}

Step 2. Make the navigation bar adaptive

Bottom navigation bars are optimized for touch input when the user is holding a phone in portrait mode. On larger screen hand-held devices, like tablets and unfolded foldables, the navigation area must be accessible from the edge of the screen (navigation rail).

If you need to provide more screen space for the content, hide the navigation area. Examples of this include:

• Hiding the navigation bar when the user scrolls down and showing it again when the user scrolls up. The assumption is that when the user is scrolling down, they are consuming content but when scrolling up they are trying to navigate away from that content.
• Hiding the navigation area when its content is distracting. For example, in camera previews or when displaying a full-screen photo.

When the detail screen is displayed full-screen on mobile, full-screen mode must be deactivated on larger screens.

Steps to migrate: