<\/span>MediaQuery (Experimental)<\/span><\/h2>\n\n The brand new mediaQuery<\/a><\/code> API offers a declarative and performant option to adapt your UI to its surroundings. It abstracts advanced data retrieval into easy circumstances inside a UiMediaScope<\/a><\/code>, making certain recomposition solely occurs when wanted.\n<\/p>\n\n With assist for a variety of environmental indicators\u2014from system capabilities like keyboard sorts and pointer precision, to contextual states like window measurement and posture\u2014you possibly can construct deeply responsive experiences. Efficiency is baked in with derivedMediaQuery<\/a><\/code> to deal with high-frequency updates, whereas the flexibility to override scopes makes testing and previews seamless throughout {hardware} configurations.\n<\/p>\n\n Beforehand, to get entry to sure system properties \u2014 like if a tool was in tabletop mode<\/a> \u2014 you\u2019d want to jot down a number of boilerplate to take action:\n<\/p>\n@Composable\nenjoyable isTabletopPosture(\n context: Context = LocalContext.present\n): Boolean {\n val windowLayoutInfo by\n WindowInfoTracker\n .getOrCreate(context)\n .windowLayoutInfo(context)\n .collectAsStateWithLifecycle(null)\n\n return windowLayoutInfo.displayFeatures.any { displayFeature ->\n displayFeature is FoldingFeature &&\n displayFeature.state == FoldingFeature.State.HALF_OPENED &&\n displayFeature.orientation == FoldingFeature.Orientation.HORIZONTAL\n }\n}\n\n@Composable\nenjoyable VideoPlayer() {\n if(isTabletopPosture()) {\n TabletopLayout()\n } else {\n FlatLayout()\n }\n}<\/code><\/pre>\n\n Now, with UIMediaQuery<\/code>, you possibly can add the mediaQuery<\/code> syntax to question system properties, comparable to if a tool is in tabletop mode:\n<\/p>\n@OptIn(ExperimentalMediaQueryApi::class)\n@Composable\nenjoyable VideoPlayer() {\n if (mediaQuery { windowPosture == UiMediaScope.Posture.Tabletop }) {\n TabletopLayout()\n } else {\n FlatLayout()\n }\n}<\/code><\/pre>\n\n Take a look at the documentation<\/a> and file any bugs right here<\/a>.\n<\/p>\n
![\"\"](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhZHE0FDmx0vqGgZ6V5OvwB9prJFgTdYZbOOkQ1h8bS_5BuTn3TyomD5gYJdqvcJP2rE5Ju4147sThpKYIiCKXQ3DTw2gQtVjWRM23gzPdpDo5jyblVPbjNRqiVVC9bWW92xNYtARsoCDWuyxAiYRyxtgeAQRqI_t6bTR2PFrdQZCHMgXgU82TBolFXXkw\/s8583\/0420%20Compose%201.11%20_%20Blog%20(1).png\")
<\/a><\/div>\n