mediaQuery

Functions summary

Boolean

Evaluates a boolean query against the current UiMediaScope.

Cmn

Functions

mediaQuery

@ExperimentalMediaQueryApi
@Composable
fun mediaQuery(query: UiMediaScope.() -> Boolean): Boolean

Evaluates a boolean query against the current UiMediaScope.

Avoid reading properties marked with @FrequentlyChangingValue (such as UiMediaScope.windowWidth or UiMediaScope.windowHeight) inside the query block. Reading these properties will cause the composable to recompose on every frame during events such as window resizing, which can affect the performance.

For queries involving such frequently changing values, use derivedMediaQuery instead.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.UiMediaScope.Posture
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.mediaQuery
import androidx.compose.ui.unit.dp

Column(Modifier.fillMaxSize()) {
    when {
        mediaQuery { windowPosture == Posture.Tabletop } -> {
            // Tabletop mode layout: Two rows separated by 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())
            }
        }
        mediaQuery { windowPosture == Posture.Book } -> {
            // Book mode layout: Two columns separated by 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")
            }
        }
    }
}
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.style.Style
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.UiMediaScope.PointerPrecision
import androidx.compose.ui.UiMediaScope.ViewingDistance
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.mediaQuery
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp

Column(Modifier.padding(top = 100.dp).padding(16.dp)) {
    val isTouchPrimary = mediaQuery { pointerPrecision == PointerPrecision.Coarse }
    val isUnreachable = mediaQuery { viewingDistance != ViewingDistance.Near }

    // Adjust button size for touch targets
    val adaptiveSize =
        when {
            isUnreachable -> DpSize(150.dp, 70.dp)
            isTouchPrimary -> DpSize(120.dp, 50.dp)
            else -> DpSize(100.dp, 40.dp)
        }

    // Adjust style for reachability
    val label = "Submit"
    val adaptiveLabel = if (isUnreachable) 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())
    }
}
Parameters
query: UiMediaScope.() -> Boolean

The condition to evaluate against the UiMediaScope.

Returns
Boolean

The boolean result of the query.