mediaQuery

FoldableAwareSample

@Sampled
@Composable
fun FoldableAwareSample() {
    Column(Modifier.fillMaxSize()) {
        mediaQuery {
            when {
                windowPosture.isTabletop -> {
                    // Tabletop mode layout: Two rows separated by horizontal hinge
                    Column(Modifier.fillMaxSize()) {
                        Box(
                            Modifier.weight(1f).background(Color.Red).fillMaxWidth(),
                            contentAlignment = Alignment.Center,
                        ) {
                            Text("Tabletop mode")
                        }
                        Box(
                            Modifier.height(20.dp).background(Color.Black).fillMaxWidth()
                        ) // Hinge visualization
                        Box(Modifier.weight(1f).background(Color.Blue).fillMaxWidth())
                    }
                }
                windowPosture.folds.any {
                    it.state == FoldState.HalfOpened && it.orientation == FoldOrientation.Vertical
                } -> {
                    // Book mode layout: Two columns separated by vertical hinge
                    Row(Modifier.fillMaxSize()) {
                        Box(
                            Modifier.weight(1f).background(Color.Red).fillMaxHeight(),
                            contentAlignment = Alignment.Center,
                        ) {
                            Text("Book mode")
                        }
                        Box(
                            Modifier.width(20.dp).background(Color.Black).fillMaxHeight()
                        ) // Hinge visualization
                        Box(Modifier.weight(1f).background(Color.Blue).fillMaxHeight())
                    }
                }
                else -> {
                    // Flat mode
                    Box(
                        Modifier.background(Color.LightGray).fillMaxSize(),
                        contentAlignment = Alignment.Center,
                    ) {
                        Text("Flat mode")
                    }
                }
            }
        }
    }
}

AdaptiveButtonSample

@Sampled
@Composable
fun AdaptiveButtonSample() {
    Column(Modifier.padding(top = 100.dp).padding(16.dp)) {
        // Adjust button size for touch targets directly using a media query
        val adaptiveSize = mediaQuery {
            when {
                viewingDistance != ViewingDistance.Near -> DpSize(150.dp, 70.dp)
                pointerPrecision == PointerPrecision.Coarse -> DpSize(120.dp, 50.dp)
                else -> DpSize(100.dp, 40.dp)
            }
        }

        // Adjust style for reachability
        val label = "Submit"
        val adaptiveLabel = mediaQuery {
            if (viewingDistance != ViewingDistance.Near) label.uppercase(getDefault()) else label
        }

        Button(
            modifier =
                Modifier.clip(RoundedCornerShape(8.dp)).size(adaptiveSize).background(Color.Blue),
            onClick = {},
        ) {
            Text(text = adaptiveLabel, color = Color.White, style = TextStyle())
        }
    }
}