Designing for Foldables: A UI/UX Guide

Foldable devices are no longer a niche gimmick; they're a rapidly growing segment of the mobile market. For developers, this represents a monumental shift. We can no longer think in terms of a single, static screen. We must design for dynamic, adaptive experiences that seamlessly transition between different sizes and postures.

This isn't just about making your app not crash. It's about creating magical user experiences that are only possible on a foldable device. This guide will give you the concepts, patterns, and code you need to build truly great foldable apps.

The Core Concepts of Foldable Design

Before diving into patterns, you need to understand the fundamentals that make foldables unique.

Screen Continuity

This is the most important principle. When a user unfolds their device, your app's state must be seamlessly preserved. If they were looking at a product detail screen on the small cover display, that same screen should be instantly available on the large inner display, but adapted to take advantage of the extra space. Any interruption, like restarting the activity or losing their scroll position, is a jarring experience.

Device Postures

A foldable device isn't just open or closed. It can exist in multiple physical states, or "postures." The two most common are:

• Book Mode: The device is partially folded, like a book or a laptop. The hinge is vertical.
• Tabletop Mode: The device is bent at a 90-degree angle and resting on a surface, like a mini-laptop. The hinge is horizontal.

Your app should be aware of these postures and adapt its UI accordingly. For example, in tabletop mode, a video app could show the video on the top screen and playback controls on the bottom screen.

Key UI/UX Patterns for Foldables

Don't try to just stretch your phone UI. Instead, use one of these proven patterns to create a rich, tablet-like experience on the inner display.

1. List-Detail View (Two-Pane Layout)

This is the most common and powerful pattern. On a small screen, you show a list of items. When a user taps one, you navigate to a separate detail screen. On a large, unfolded screen, you show the list on one side (the "list pane") and the detail view on the other (the "detail pane") simultaneously.

Use Cases: Email clients (list of emails, content of selected email), messaging apps (conversation list, selected chat), settings screens, and any master-detail flow.

2. Companion Pane

In this pattern, the extra screen real estate is used to show supplementary information or controls that enhance the primary content. It's not a master-detail flow, but rather two views that work together.

Use Cases: A video player showing comments in a companion pane, a document editor with formatting tools on the side, or a shopping app with product images on one side and reviews/specs on the other.

3. Extended Canvas

For apps that have a large, pannable canvas—like maps, drawing boards, or photo editors—unfolding the device simply provides more space to view and interact with the content. The UI controls might reposition themselves, but the core experience is about having a bigger canvas.

4. Tabletop Mode Adaptation

This pattern is specific to when the device's hinge is horizontal. You can split the UI across the two halves.

Use Cases: A video call app showing the other person on the top half and call controls on the bottom. A camera app showing the viewfinder on top and gallery/controls on the bottom. A game with the gameplay on top and a controller on the bottom.

The Technical Side: Jetpack WindowManager

Google provides the Jetpack WindowManager library, which is the key to building these adaptive layouts. It allows your app to listen for changes in the device's physical state, including the presence, position, and state of a hinge.

Step 1: Add the Dependency

First, add the WindowManager dependency to your build.gradle.kts file.

implementation("androidx.window:window:1.3.0") // Or the latest version

Step 2: Listen for Window Layout Info

In your Activity or Composable, you can collect a flow of WindowLayoutInfo objects. This object contains a list of display features, including folds and hinges.

class MyActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        val windowInfoRepo = WindowInfoTracker.getOrCreate(this)

        lifecycleScope.launch(Dispatchers.Main) {
            windowInfoRepo.windowLayoutInfo(this@MyActivity)
                .collect { newLayoutInfo ->
                    // newLayoutInfo contains the list of display features
                    val foldingFeature = newLayoutInfo.displayFeatures
                        .filterIsInstance<FoldingFeature>()
                        .firstOrNull()

                    when {
                        isTabletop(foldingFeature) -> {
                            // Apply tabletop UI
                        }
                        isBookMode(foldingFeature) -> {
                            // Apply book mode UI
                        }
                        else -> {
                            // Standard portrait/landscape UI
                        }
                    }
                }
        }
    }
    
    private fun isTabletop(foldFeature: FoldingFeature?): Boolean {
        return foldFeature?.state == FoldingFeature.State.HALF_OPENED &&
               foldFeature.orientation == FoldingFeature.Orientation.HORIZONTAL
    }
    // ... other checks
}

Building for foldables is an opportunity to innovate and delight your users. By understanding these core concepts and patterns, you can move beyond simple compatibility and start creating apps that are truly made for the future of mobile.