WindowSizeClass

WindowSizeClass represents breakpoints for a viewport. Designers should design around the different combinations of width and height buckets. Developers should use the different buckets to specify the layouts. Ideally apps will work well in each bucket and by extension work well across multiple devices. If two devices are in similar buckets they should behave similarly.

This class is meant to be a common definition that can be shared across different device types. Application developers can use WindowSizeClass to have standard window buckets and design the UI around those buckets. Library developers can use these buckets to create different UI with respect to each bucket. This will help with consistency across multiple device types.

A library developer use-case can be creating some navigation UI library. For a size class with the WindowSizeClass.WIDTH_DP_EXPANDED_LOWER_BOUND width it might be more reasonable to have a side navigation.

An application use-case can be applied for apps that use a list-detail pattern. The app can use the WindowSizeClass.WIDTH_DP_MEDIUM_LOWER_BOUND to determine if there is enough space to show the list and the detail side by side. If all apps follow this guidance then it will present a very consistent user experience.

In some cases developers or UI systems may decide to create their own break points. A developer might optimize for a window that is smaller than the supported break points or larger. A UI system might find that some break points are better suited than the recommended break points. In these cases developers may wish to specify their own custom break points and match using a when statement.

To process a WindowSizeClass use the methods isAtLeastBreakpoint, isWidthAtLeastBreakpoint, isHeightAtLeastBreakpoint methods. Note these methods are order dependent as the smaller minWidthDp and minHeightDp would match all the breakpoints that are larger. Therefore when processing the selection should normally be ordered from larger to smaller breakpoints.

Summary

const val HEIGHT_DP_EXPANDED_LOWER_BOUND = 900: Int

const val HEIGHT_DP_MEDIUM_LOWER_BOUND = 480: Int

const val WIDTH_DP_EXPANDED_LOWER_BOUND = 840: Int

const val WIDTH_DP_EXTRA_LARGE_LOWER_BOUND = 1600: Int

const val WIDTH_DP_LARGE_LOWER_BOUND = 1200: Int

const val WIDTH_DP_MEDIUM_LOWER_BOUND = 600: Int

fun compute(dpWidth: Float, dpHeight: Float): WindowSizeClass

val BREAKPOINTS_V1: Set<WindowSizeClass>

import androidx.window.core.layout.WindowSizeClass
import androidx.window.core.layout.computeWindowSizeClass

return WindowSizeClass.BREAKPOINTS_V1.computeWindowSizeClass(widthDp, heightDp)

val BREAKPOINTS_V2: Set<WindowSizeClass>

import androidx.window.core.layout.WindowSizeClass
import androidx.window.core.layout.computeWindowSizeClass

return WindowSizeClass.BREAKPOINTS_V1.computeWindowSizeClass(widthDp, heightDp)

WindowSizeClass(minWidthDp: Int, minHeightDp: Int)

WindowSizeClass(widthDp: Float, heightDp: Float)

open operator fun equals(other: Any?): Boolean

open fun hashCode(): Int

fun isAtLeastBreakpoint(widthDpBreakpoint: Int, heightDpBreakpoint: Int): Boolean

fun isHeightAtLeastBreakpoint(heightDpBreakpoint: Int): Boolean

fun isWidthAtLeastBreakpoint(widthDpBreakpoint: Int): Boolean

import androidx.window.core.layout.WindowSizeClass.Companion.WIDTH_DP_EXPANDED_LOWER_BOUND
import androidx.window.core.layout.WindowSizeClass.Companion.WIDTH_DP_MEDIUM_LOWER_BOUND

return when {
    sizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND) -> {
        // return UI for EXPANDED width size class
        FakeUiValues.EXPANDED
    }
    sizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND) -> {
        // return UI for MEDIUM width size class
        FakeUiValues.MEDIUM
    }
    else -> {
        // return UI for COMPACT width size class
        FakeUiValues.COMPACT
    }
}

open fun toString(): String

val minHeightDp: Int

val minWidthDp: Int

val windowHeightSizeClass: WindowHeightSizeClass

val windowWidthSizeClass: WindowWidthSizeClass