Make your app fold aware | Jetpack Compose

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Android Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#34a853"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/android/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500,600,700|Google+Sans+Text:400,400italic,500,500italic,600,600italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/favicon.svg"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/touchicon-180.png"><link rel="canonical" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware"><link rel="search" type="application/opensearchdescription+xml" title="Android Developers" href="https://developer.android.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware" /><link rel="alternate" hreflang="x-default" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware" /><link rel="alternate" hreflang="ar" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware?hl=vi" /><title>Make your app fold aware  |  Jetpack Compose  |  Android Developers</title> <meta property="og:title" content="Make your app fold aware  |  Jetpack Compose  |  Android Developers"><meta property="og:url" content="https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware"><meta property="og:image" content="https://developer.android.com/static/images/social/android-developers.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary_large_image"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "Make your app fold aware" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Develop", "item": "https://developer.android.com/develop" },{ "@type": "ListItem", "position": 2, "name": "Core areas", "item": "https://developer.android.com/develop/core-areas" },{ "@type": "ListItem", "position": 3, "name": "UI", "item": "https://developer.android.com/develop/ui" },{ "@type": "ListItem", "position": 4, "name": "Make your app fold aware", "item": "https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="android-theme" type="article" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="androidDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Android Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/lockup.svg" class="devsite-site-logo" alt="Android Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab class="devsite-dropdown devsite-dropdown-full "> <a href="https://developer.android.com/get-started" track-metadata-eventdetail="https://developer.android.com/get-started" class="devsite-tabs-content gc-analytics-event android-dropdown-tab" track-type="nav" track-metadata-position="nav - essentials" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Essentials" track-name="essentials" > Essentials </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Essentials" track-type="nav" track-metadata-eventdetail="https://developer.android.com/get-started" track-metadata-position="nav - essentials" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Essentials" track-name="essentials" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column android-dropdown android-dropdown-primary android-dropdown-studio"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Gemini in Android Studio</li> <li class="devsite-nav-description">Your AI development companion for Android development. </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/gemini-in-android" track-type="nav" track-metadata-eventdetail="https://developer.android.com/gemini-in-android" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="gemini in android studio" tooltip class="button button-primary" > <div class="devsite-nav-item-title"> Learn more </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/studio" track-type="nav" track-metadata-eventdetail="https://developer.android.com/studio" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="gemini in android studio" tooltip class="button button-white" > <div class="devsite-nav-item-title"> Get Android Studio </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column android-dropdown"> <ul class="devsite-tabs-dropdown-section android-dropdown-section-icon android-dropdown-section-icon-launch"> <li class="devsite-nav-title" role="heading" tooltip>Get started</li> <li class="devsite-nav-description">Start by creating your first app. Go deeper with our training courses or explore app development on your own. </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/get-started/overview" track-type="nav" track-metadata-eventdetail="https://developer.android.com/get-started/overview" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Hello world </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/courses" track-type="nav" track-metadata-eventdetail="https://developer.android.com/courses" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Training courses </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/get-started/codelabs" track-type="nav" track-metadata-eventdetail="https://developer.android.com/get-started/codelabs" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Tutorials </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/kotlin" track-type="nav" track-metadata-eventdetail="https://developer.android.com/kotlin" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Kotlin for Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://play.google.com/console/about/guides/monetize/" track-type="nav" track-metadata-eventdetail="https://play.google.com/console/about/guides/monetize/" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Monetization with Play ↗️ </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column android-dropdown"> <ul class="devsite-tabs-dropdown-section android-dropdown-section-icon android-dropdown-section-icon-multiple-screens"> <li class="devsite-nav-title" role="heading" tooltip>Extend by device</li> <li class="devsite-nav-description">Build apps that give your users seamless experiences from phones to tablets, watches, and more. </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/adaptive-apps" track-type="nav" track-metadata-eventdetail="https://developer.android.com/adaptive-apps" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="extend by device" tooltip > <div class="devsite-nav-item-title"> Adaptive apps </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/wear" track-type="nav" track-metadata-eventdetail="https://developer.android.com/wear" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="extend by device" tooltip > <div class="devsite-nav-item-title"> Wear OS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/cars" track-type="nav" track-metadata-eventdetail="https://developer.android.com/cars" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="extend by device" tooltip > <div class="devsite-nav-item-title"> Android for Cars </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/tv" track-type="nav" track-metadata-eventdetail="https://developer.android.com/tv" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="extend by device" tooltip > <div class="devsite-nav-item-title"> Android TV </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/chrome-os" track-type="nav" track-metadata-eventdetail="https://developer.android.com/chrome-os" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="extend by device" tooltip > <div class="devsite-nav-item-title"> ChromeOS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/multi-device-development" track-type="nav" track-metadata-eventdetail="https://developer.android.com/multi-device-development" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="extend by device" tooltip > <div class="devsite-nav-item-title"> Cross-device SDK </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column android-dropdown"> <ul class="devsite-tabs-dropdown-section android-dropdown-section-icon android-dropdown-section-icon-platform"> <li class="devsite-nav-title" role="heading" tooltip>Build by category</li> <li class="devsite-nav-description">Learn to build for your use case by following Google's prescriptive and opinionated guidance. </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/games" track-type="nav" track-metadata-eventdetail="https://developer.android.com/games" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="build by category" tooltip > <div class="devsite-nav-item-title"> Games </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/media" track-type="nav" track-metadata-eventdetail="https://developer.android.com/media" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="build by category" tooltip > <div class="devsite-nav-item-title"> Camera & Media </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/social-and-messaging" track-type="nav" track-metadata-eventdetail="https://developer.android.com/social-and-messaging" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="build by category" tooltip > <div class="devsite-nav-item-title"> Social & messaging </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/health-and-fitness" track-type="nav" track-metadata-eventdetail="https://developer.android.com/health-and-fitness" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="build by category" tooltip > <div class="devsite-nav-item-title"> Health & Fitness </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/productivity" track-type="nav" track-metadata-eventdetail="https://developer.android.com/productivity" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="build by category" tooltip > <div class="devsite-nav-item-title"> Productivity </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/work/overview" track-type="nav" track-metadata-eventdetail="https://developer.android.com/work/overview" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="build by category" tooltip > <div class="devsite-nav-item-title"> Enterprise apps </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column android-dropdown"> <ul class="devsite-tabs-dropdown-section android-dropdown-section-icon android-dropdown-section-icon-stars"> <li class="devsite-nav-title" role="heading" tooltip>Get the latest</li> <li class="devsite-nav-description">Stay in touch with the latest releases throughout the year, join our preview programs, and give us your feedback. </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/latest-updates" track-type="nav" track-metadata-eventdetail="https://developer.android.com/latest-updates" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="get the latest" tooltip > <div class="devsite-nav-item-title"> Latest updates </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/latest-updates/experimental" track-type="nav" track-metadata-eventdetail="https://developer.android.com/latest-updates/experimental" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="get the latest" tooltip > <div class="devsite-nav-item-title"> Experimental updates </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/studio/preview" track-type="nav" track-metadata-eventdetail="https://developer.android.com/studio/preview" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="get the latest" tooltip > <div class="devsite-nav-item-title"> Android Studio preview </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/jetpack/androidx/versions" track-type="nav" track-metadata-eventdetail="https://developer.android.com/jetpack/androidx/versions" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="get the latest" tooltip > <div class="devsite-nav-item-title"> Jetpack & Compose libraries </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/training/wearables/versions/4" track-type="nav" track-metadata-eventdetail="https://developer.android.com/training/wearables/versions/4" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="get the latest" tooltip > <div class="devsite-nav-item-title"> Wear OS preview </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/design-for-safety/privacy-sandbox" track-type="nav" track-metadata-eventdetail="https://developer.android.com/design-for-safety/privacy-sandbox" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="get the latest" tooltip > <div class="devsite-nav-item-title"> Privacy Sandbox </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown devsite-dropdown-full "> <a href="https://developer.android.com/design" track-metadata-eventdetail="https://developer.android.com/design" class="devsite-tabs-content gc-analytics-event android-dropdown-tab" track-type="nav" track-metadata-position="nav - design & plan" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Design & Plan" track-name="design & plan" > Design & Plan </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Design & Plan" track-type="nav" track-metadata-eventdetail="https://developer.android.com/design" track-metadata-position="nav - design & plan" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Design & Plan" track-name="design & plan" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column android-dropdown"> <ul class="devsite-tabs-dropdown-section android-dropdown-section-icon android-dropdown-section-icon-layout"> <li class="devsite-nav-title" role="heading" tooltip>UI Design</li> <li class="devsite-nav-description">Design a beautiful user interface using Android best practices.</li> <li class="devsite-nav-item"> <a href="https://developer.android.com/design/ui" track-type="nav" track-metadata-eventdetail="https://developer.android.com/design/ui" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="ui design" tooltip > <div class="devsite-nav-item-title"> Design for Android </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/design/ui/mobile" track-type="nav" track-metadata-eventdetail="https://developer.android.com/design/ui/mobile" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="ui design" tooltip > <div class="devsite-nav-item-title"> Mobile </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/design/ui/large-screens" track-type="nav" track-metadata-eventdetail="https://developer.android.com/design/ui/large-screens" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="ui design" tooltip > <div class="devsite-nav-item-title"> Large screens (e.g., tablets) </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/design/ui/widget" track-type="nav" track-metadata-eventdetail="https://developer.android.com/design/ui/widget" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="ui design" tooltip > <div class="devsite-nav-item-title"> Widgets </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/design/ui/wear" track-type="nav" track-metadata-eventdetail="https://developer.android.com/design/ui/wear" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="ui design" tooltip > <div class="devsite-nav-item-title"> Wear OS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/design/ui/tv" track-type="nav" track-metadata-eventdetail="https://developer.android.com/design/ui/tv" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="ui design" tooltip > <div class="devsite-nav-item-title"> Android TV </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column android-dropdown"> <ul class="devsite-tabs-dropdown-section android-dropdown-section-icon android-dropdown-section-icon-design"> <li class="devsite-nav-title" role="heading" tooltip>Architecture</li> <li class="devsite-nav-description">Design robust, testable, and maintainable app logic and services.</li> <li class="devsite-nav-item"> <a href="https://developer.android.com/topic/architecture/intro" track-type="nav" track-metadata-eventdetail="https://developer.android.com/topic/architecture/intro" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="architecture" tooltip > <div class="devsite-nav-item-title"> Introduction </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/topic/libraries/view-binding" track-type="nav" track-metadata-eventdetail="https://developer.android.com/topic/libraries/view-binding" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="architecture" tooltip > <div class="devsite-nav-item-title"> Libraries </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/guide/navigation/navigation-principles" track-type="nav" track-metadata-eventdetail="https://developer.android.com/guide/navigation/navigation-principles" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="architecture" tooltip > <div class="devsite-nav-item-title"> Navigation </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/topic/modularization" track-type="nav" track-metadata-eventdetail="https://developer.android.com/topic/modularization" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="architecture" tooltip > <div class="devsite-nav-item-title"> Modularization </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/training/testing/fundamentals" track-type="nav" track-metadata-eventdetail="https://developer.android.com/training/testing/fundamentals" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="architecture" tooltip > <div class="devsite-nav-item-title"> Testing </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column android-dropdown"> <ul class="devsite-tabs-dropdown-section android-dropdown-section-icon android-dropdown-section-icon-vitals"> <li class="devsite-nav-title" role="heading" tooltip>Quality</li> <li class="devsite-nav-description">Plan for app quality and align with Play store guidelines.</li> <li class="devsite-nav-item"> <a href="https://developer.android.com/quality" track-type="nav" track-metadata-eventdetail="https://developer.android.com/quality" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="quality" tooltip > <div class="devsite-nav-item-title"> Overview </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/quality/core-value" track-type="nav" track-metadata-eventdetail="https://developer.android.com/quality/core-value" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="quality" tooltip > <div class="devsite-nav-item-title"> Core value </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/quality/user-experience" track-type="nav" track-metadata-eventdetail="https://developer.android.com/quality/user-experience" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="quality" tooltip > <div class="devsite-nav-item-title"> User experience </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/quality/technical" track-type="nav" track-metadata-eventdetail="https://developer.android.com/quality/technical" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="quality" tooltip > <div class="devsite-nav-item-title"> Technical quality </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/quality/privacy-and-security" track-type="nav" track-metadata-eventdetail="https://developer.android.com/quality/privacy-and-security" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="quality" tooltip > <div class="devsite-nav-item-title"> Security </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column android-dropdown"> <ul class="devsite-tabs-dropdown-section android-dropdown-section-icon android-dropdown-section-icon-security-2"> <li class="devsite-nav-title" role="heading" tooltip>Security</li> <li class="devsite-nav-description">Safeguard users against threats and ensure a secure Android experience.</li> <li class="devsite-nav-item"> <a href="https://developer.android.com/security" track-type="nav" track-metadata-eventdetail="https://developer.android.com/security" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="security" tooltip > <div class="devsite-nav-item-title"> Overview </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/privacy-and-security/about" track-type="nav" track-metadata-eventdetail="https://developer.android.com/privacy-and-security/about" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="security" tooltip > <div class="devsite-nav-item-title"> Privacy </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/identity" track-type="nav" track-metadata-eventdetail="https://developer.android.com/identity" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="security" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/security/fraud-prevention" track-type="nav" track-metadata-eventdetail="https://developer.android.com/security/fraud-prevention" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="security" tooltip > <div class="devsite-nav-item-title"> Fraud prevention </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column android-dropdown"> <ul class="devsite-tabs-dropdown-section android-dropdown-section-icon android-dropdown-section-icon-earth"> <li class="devsite-nav-title" role="heading" tooltip>Build for Billions</li> <li class="devsite-nav-description">Create the best experience for entry-level devices</li> <li class="devsite-nav-item"> <a href="https://developer.android.com/build-for-billions" track-type="nav" track-metadata-eventdetail="https://developer.android.com/build-for-billions" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="build for billions" tooltip > <div class="devsite-nav-item-title"> Overview </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/docs/quality-guidelines/build-for-billions" track-type="nav" track-metadata-eventdetail="https://developer.android.com/docs/quality-guidelines/build-for-billions" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="build for billions" tooltip > <div class="devsite-nav-item-title"> About new markets </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/guide/topics/androidgo" track-type="nav" track-metadata-eventdetail="https://developer.android.com/guide/topics/androidgo" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="build for billions" tooltip > <div class="devsite-nav-item-title"> Android (Go edition) </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown devsite-dropdown-full devsite-active "> <a href="https://developer.android.com/develop" track-metadata-eventdetail="https://developer.android.com/develop" class="devsite-tabs-content gc-analytics-event android-dropdown-tab" track-type="nav" track-metadata-position="nav - develop" track-metadata-module="primary nav" aria-label="Develop, selected" data-category="Site-Wide Custom Events" data-label="Tab: Develop" track-name="develop" > Develop </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Develop" track-type="nav" track-metadata-eventdetail="https://developer.android.com/develop" track-metadata-position="nav - develop" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Develop" track-name="develop" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column android-dropdown android-dropdown-primary android-dropdown-ai"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Build AI experiences</li> <li class="devsite-nav-description">Build AI-powered Android apps with Gemini APIs and more. </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/ai" track-type="nav" track-metadata-eventdetail="https://developer.android.com/ai" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="build ai experiences" tooltip class="button button-primary" > <div class="devsite-nav-item-title"> Get started </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column android-dropdown"> <ul class="devsite-tabs-dropdown-section android-dropdown-section-icon android-dropdown-section-icon-flag"> <li class="devsite-nav-title" role="heading" tooltip>Core areas</li> <li class="devsite-nav-description">Get the samples and docs for the features you need.</li> <li class="devsite-nav-item"> <a href="https://developer.android.com/samples" track-type="nav" track-metadata-eventdetail="https://developer.android.com/samples" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="core areas" tooltip > <div class="devsite-nav-item-title"> Samples </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/quick-guides" track-type="nav" track-metadata-eventdetail="https://developer.android.com/quick-guides" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="core areas" tooltip > <div class="devsite-nav-item-title"> Try Quick Guidesᵇᵉᵗᵃ </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/develop/ui" track-type="nav" track-metadata-eventdetail="https://developer.android.com/develop/ui" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="core areas" tooltip > <div class="devsite-nav-item-title"> User interfaces </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/guide/topics/permissions/overview" track-type="nav" track-metadata-eventdetail="https://developer.android.com/guide/topics/permissions/overview" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="core areas" tooltip > <div class="devsite-nav-item-title"> Permissions </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/develop/background-work" track-type="nav" track-metadata-eventdetail="https://developer.android.com/develop/background-work" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="core areas" tooltip > <div class="devsite-nav-item-title"> Background work </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/guide/topics/data" track-type="nav" track-metadata-eventdetail="https://developer.android.com/guide/topics/data" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="core areas" tooltip > <div class="devsite-nav-item-title"> Data and files </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/develop#core-areas" track-type="nav" track-metadata-eventdetail="https://developer.android.com/develop#core-areas" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="core areas" tooltip > <div class="devsite-nav-item-title"> All core areas ⤵️ </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column android-dropdown"> <ul class="devsite-tabs-dropdown-section android-dropdown-section-icon android-dropdown-section-icon-tools-2"> <li class="devsite-nav-title" role="heading" tooltip>Tools and workflow</li> <li class="devsite-nav-description">Use the IDE to write and build your app, or create your own pipeline.</li> <li class="devsite-nav-item"> <a href="https://developer.android.com/studio/write" track-type="nav" track-metadata-eventdetail="https://developer.android.com/studio/write" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="tools and workflow" tooltip > <div class="devsite-nav-item-title"> Write and debug code </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/build/gradle-build-overview" track-type="nav" track-metadata-eventdetail="https://developer.android.com/build/gradle-build-overview" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="tools and workflow" tooltip > <div class="devsite-nav-item-title"> Build projects </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/training/testing" track-type="nav" track-metadata-eventdetail="https://developer.android.com/training/testing" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="tools and workflow" tooltip > <div class="devsite-nav-item-title"> Test your app </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/topic/performance/overview" track-type="nav" track-metadata-eventdetail="https://developer.android.com/topic/performance/overview" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="tools and workflow" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/tools" track-type="nav" track-metadata-eventdetail="https://developer.android.com/tools" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="tools and workflow" tooltip > <div class="devsite-nav-item-title"> Command-line tools </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/reference/tools/gradle-api" track-type="nav" track-metadata-eventdetail="https://developer.android.com/reference/tools/gradle-api" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="tools and workflow" tooltip > <div class="devsite-nav-item-title"> Gradle plugin API </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column android-dropdown"> <ul class="devsite-tabs-dropdown-section android-dropdown-section-icon android-dropdown-section-icon-multiple-screens"> <li class="devsite-nav-title" role="heading" tooltip>Device tech</li> <li class="devsite-nav-description">Write code for form factors. Connect devices and share data.</li> <li class="devsite-nav-item"> <a href="https://developer.android.com/guide/topics/large-screens/get-started-with-large-screens" track-type="nav" track-metadata-eventdetail="https://developer.android.com/guide/topics/large-screens/get-started-with-large-screens" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="device tech" tooltip > <div class="devsite-nav-item-title"> Large screens (e.g., tablets) </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/training/wearables" track-type="nav" track-metadata-eventdetail="https://developer.android.com/training/wearables" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="device tech" tooltip > <div class="devsite-nav-item-title"> Wear OS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/health-and-fitness/guides" track-type="nav" track-metadata-eventdetail="https://developer.android.com/health-and-fitness/guides" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="device tech" tooltip > <div class="devsite-nav-item-title"> Android Health </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/guide/topics/connectivity/cross-device-sdk/overview" track-type="nav" track-metadata-eventdetail="https://developer.android.com/guide/topics/connectivity/cross-device-sdk/overview" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="device tech" tooltip > <div class="devsite-nav-item-title"> Cross-device SDK </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/training/cars" track-type="nav" track-metadata-eventdetail="https://developer.android.com/training/cars" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="device tech" tooltip > <div class="devsite-nav-item-title"> Android for Cars </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/training/tv" track-type="nav" track-metadata-eventdetail="https://developer.android.com/training/tv" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="device tech" tooltip > <div class="devsite-nav-item-title"> Android TV </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/chrome-os/intro" track-type="nav" track-metadata-eventdetail="https://developer.android.com/chrome-os/intro" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="device tech" tooltip > <div class="devsite-nav-item-title"> ChromeOS </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column android-dropdown"> <ul class="devsite-tabs-dropdown-section android-dropdown-section-icon android-dropdown-section-icon-core-library"> <li class="devsite-nav-title" role="heading" tooltip>Libraries</li> <li class="devsite-nav-description">Browse API reference documentation with all the details.</li> <li class="devsite-nav-item"> <a href="https://developer.android.com/reference/packages" track-type="nav" track-metadata-eventdetail="https://developer.android.com/reference/packages" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="libraries" tooltip > <div class="devsite-nav-item-title"> Android platform </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/jetpack/androidx/explorer" track-type="nav" track-metadata-eventdetail="https://developer.android.com/jetpack/androidx/explorer" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="libraries" tooltip > <div class="devsite-nav-item-title"> Jetpack libraries </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/jetpack/androidx/releases/compose" track-type="nav" track-metadata-eventdetail="https://developer.android.com/jetpack/androidx/releases/compose" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="libraries" tooltip > <div class="devsite-nav-item-title"> Compose libraries </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/android/reference/packages" track-type="nav" track-metadata-eventdetail="https://developers.google.com/android/reference/packages" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="libraries" tooltip > <div class="devsite-nav-item-title"> Google Play services ↗️ </div> </a> </li> <li class="devsite-nav-item"> <a href="https://play.google.com/sdks" track-type="nav" track-metadata-eventdetail="https://play.google.com/sdks" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="libraries" tooltip > <div class="devsite-nav-item-title"> Google Play SDK index ↗️ </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://developer.android.com/distribute" track-metadata-eventdetail="https://developer.android.com/distribute" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - google play" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Google Play" track-name="google play" > Google Play </a> </tab> <tab > <a href="https://developer.android.com/community" track-metadata-eventdetail="https://developer.android.com/community" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - community" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" > Community </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Jetpack Compose" tenant-name="Android Developers" > <form class="devsite-search-form" action="https://developer.android.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <a class="devsite-header-link devsite-top-button button gc-analytics-event" href="https://developer.android.com/studio" data-category="Site-Wide Custom Events" data-label="Site header link" > Android Studio </a> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" aria-label="Lower header breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developer.android.com/develop/core-areas" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Core areas" > Core areas </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.android.com/develop/ui" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Jetpack Compose" > UI </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://developer.android.com/develop/ui" track-metadata-eventdetail="https://developer.android.com/develop/ui" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - overview" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" > Overview </a> </tab> <tab > <a href="https://developer.android.com/develop/ui/compose/tutorial" track-metadata-eventdetail="https://developer.android.com/develop/ui/compose/tutorial" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - tutorial" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Tutorial" track-name="tutorial" > Tutorial </a> </tab> <tab > <a href="https://developer.android.com/develop/ui/compose/samples" track-metadata-eventdetail="https://developer.android.com/develop/ui/compose/samples" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - samples" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" > Samples </a> </tab> <tab class="devsite-active"> <a href="https://developer.android.com/develop/ui/compose/documentation" track-metadata-eventdetail="https://developer.android.com/develop/ui/compose/documentation" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - guides" track-metadata-module="primary nav" aria-label="Guides, selected" data-category="Site-Wide Custom Events" data-label="Tab: Guides" track-name="guides" > Guides </a> </tab> <tab > <a href="https://developer.android.com/quick-guides" track-metadata-eventdetail="https://developer.android.com/quick-guides" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - try quick guides ➡️" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Try Quick Guides ➡️" track-name="try quick guides ➡️" > Try Quick Guides ➡️ </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="androidDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Android Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/lockup.svg" class="devsite-site-logo" alt="Android Developers"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/get-started" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Essentials" track-name="essentials" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Essentials" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Essentials </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Essentials" track-name="essentials" > <span class="devsite-nav-text" tooltip menu="Essentials"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Essentials"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/design" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Design & Plan" track-name="design & plan" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Design & Plan" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Design & Plan </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Design & Plan" track-name="design & plan" > <span class="devsite-nav-text" tooltip menu="Design & Plan"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Design & Plan"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/develop" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Develop" track-name="develop" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Develop" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Develop </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Develop" track-name="develop" > <span class="devsite-nav-text" tooltip menu="Develop"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Develop"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/develop/ui" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Overview </span> </a> </li> <li class="devsite-nav-item"> <a href="/develop/ui/compose/tutorial" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Tutorial" track-name="tutorial" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Tutorial" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Tutorial </span> </a> </li> <li class="devsite-nav-item"> <a href="/develop/ui/compose/samples" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Samples </span> </a> </li> <li class="devsite-nav-item"> <a href="/develop/ui/compose/documentation" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Guides" track-name="guides" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Guides" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Guides </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/quick-guides" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Try Quick Guides ➡️" track-name="try quick guides ➡️" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Try Quick Guides ➡️" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Try Quick Guides ➡️ </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/distribute" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Google Play" track-name="google play" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Play" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Play </span> </a> </li> <li class="devsite-nav-item"> <a href="/community" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Community" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Community </span> </a> </li> <li class="devsite-nav-item"> <a href="/studio" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android Studio" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android Studio </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Introduction</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/documentation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/documentation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/documentation" ><span class="devsite-nav-text" tooltip>Documentation</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/why-adopt" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/why-adopt" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/why-adopt" ><span class="devsite-nav-text" tooltip>Why Compose</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/setup" ><span class="devsite-nav-text" tooltip>Quick start</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/compiler" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/compiler" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/compiler" ><span class="devsite-nav-text" tooltip>Compose Compiler Gradle Plugin</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/mental-model" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/mental-model" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/mental-model" ><span class="devsite-nav-text" tooltip>Thinking in Compose</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/building-adaptive-apps" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/building-adaptive-apps" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/building-adaptive-apps" ><span class="devsite-nav-text" tooltip>Building adaptive apps</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Bill of Materials</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/bom" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/bom" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/bom" ><span class="devsite-nav-text" tooltip>Using the Bill of Materials</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/bom/bom-mapping" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/bom/bom-mapping" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/bom/bom-mapping" ><span class="devsite-nav-text" tooltip>BOM to library version mapping</span></a></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>UI architecture</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/lifecycle" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/lifecycle" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/lifecycle" ><span class="devsite-nav-text" tooltip>Lifecycle</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/side-effects" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/side-effects" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/side-effects" ><span class="devsite-nav-text" tooltip>Side-effects</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/phases" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/phases" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/phases" ><span class="devsite-nav-text" tooltip>Phases</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Managing state</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/state" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/state" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/state" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/state-hoisting" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/state-hoisting" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/state-hoisting" ><span class="devsite-nav-text" tooltip>Where to hoist state</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/state-saving" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/state-saving" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/state-saving" ><span class="devsite-nav-text" tooltip>Save UI state</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/develop/ui/compose/architecture" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/architecture" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/architecture" ><span class="devsite-nav-text" tooltip>Architecture</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layering" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layering" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layering" ><span class="devsite-nav-text" tooltip>Architectural layering</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/compositionlocal" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/compositionlocal" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/compositionlocal" ><span class="devsite-nav-text" tooltip>CompositionLocal</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/navigation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/navigation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/navigation" ><span class="devsite-nav-text" tooltip>Navigation</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>App layout</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/basics" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/basics" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/basics" ><span class="devsite-nav-text" tooltip>Layout basics</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/modifiers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/modifiers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/modifiers" ><span class="devsite-nav-text" tooltip>Modifiers</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/constraints-modifiers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/constraints-modifiers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/constraints-modifiers" ><span class="devsite-nav-text" tooltip>Constraints and modifier order</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/custom-modifiers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/custom-modifiers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/custom-modifiers" ><span class="devsite-nav-text" tooltip>Custom modifiers</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/modifiers-list" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/modifiers-list" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/modifiers-list" ><span class="devsite-nav-text" tooltip>List of modifiers</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/pager" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/pager" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/pager" ><span class="devsite-nav-text" tooltip>Pager</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/flow" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/flow" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/flow" ><span class="devsite-nav-text" tooltip>Flow layouts</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/custom" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/custom" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/custom" ><span class="devsite-nav-text" tooltip>Custom layouts</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Adaptive layouts</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/adaptive" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/adaptive" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/adaptive" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/adaptive/canonical-layouts" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/adaptive/canonical-layouts" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/adaptive/canonical-layouts" ><span class="devsite-nav-text" tooltip>Canonical layouts</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/adaptive/support-different-screen-sizes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/adaptive/support-different-screen-sizes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/adaptive/support-different-screen-sizes" ><span class="devsite-nav-text" tooltip>Support different screen sizes</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/adaptive/use-window-size-classes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/adaptive/use-window-size-classes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/adaptive/use-window-size-classes" ><span class="devsite-nav-text" tooltip>Use window size classes</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/adaptive/support-multi-window-mode" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/adaptive/support-multi-window-mode" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/adaptive/support-multi-window-mode" ><span class="devsite-nav-text" tooltip>Support multi-window mode</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/adaptive/support-desktop-windowing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/adaptive/support-desktop-windowing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/adaptive/support-desktop-windowing" ><span class="devsite-nav-text" tooltip>Support desktop windowing</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/adaptive/build-adaptive-navigation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/adaptive/build-adaptive-navigation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/adaptive/build-adaptive-navigation" ><span class="devsite-nav-text" tooltip>Build adaptive navigation</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/adaptive/list-detail" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/adaptive/list-detail" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/adaptive/list-detail" ><span class="devsite-nav-text" tooltip>Build a list-detail layout</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/adaptive/build-a-supporting-pane-layout" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/adaptive/build-a-supporting-pane-layout" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/adaptive/build-a-supporting-pane-layout" ><span class="devsite-nav-text" tooltip>Build a supporting pane layout</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/adaptive/adaptive-dos-and-donts" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/adaptive/adaptive-dos-and-donts" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/adaptive/adaptive-dos-and-donts" ><span class="devsite-nav-text" tooltip>Adaptive do's and don'ts</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Foldables</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/adaptive/foldables/learn-about-foldables" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/adaptive/foldables/learn-about-foldables" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/adaptive/foldables/learn-about-foldables" ><span class="devsite-nav-text" tooltip>Learn about foldables</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware" ><span class="devsite-nav-text" tooltip>Make your app fold-aware</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/adaptive/foldables/support-foldable-display-modes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/adaptive/foldables/support-foldable-display-modes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/adaptive/foldables/support-foldable-display-modes" ><span class="devsite-nav-text" tooltip>Support foldable display modes</span></a></li></ul></div></li></ul></div></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/alignment-lines" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/alignment-lines" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/alignment-lines" ><span class="devsite-nav-text" tooltip>Alignment lines</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/intrinsic-measurements" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/intrinsic-measurements" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/intrinsic-measurements" ><span class="devsite-nav-text" tooltip>Intrinsic measurements</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/constraintlayout" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/constraintlayout" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/constraintlayout" ><span class="devsite-nav-text" tooltip>ConstraintLayout</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Components</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/components" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>App bars</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/components/app-bars" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/app-bars" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/app-bars" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/app-bars-navigate" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/app-bars-navigate" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/app-bars-navigate" ><span class="devsite-nav-text" tooltip>Navigate from top app bar</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/badges" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/badges" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/badges" ><span class="devsite-nav-text" tooltip>Badges</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Bottom sheets</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/components/bottom-sheets" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/bottom-sheets" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/bottom-sheets" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/bottom-sheets-partial" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/bottom-sheets-partial" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/bottom-sheets-partial" ><span class="devsite-nav-text" tooltip>Partial bottom sheet</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/button" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/button" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/button" ><span class="devsite-nav-text" tooltip>Button</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/card" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/card" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/card" ><span class="devsite-nav-text" tooltip>Card</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/checkbox" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/checkbox" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/checkbox" ><span class="devsite-nav-text" tooltip>Checkbox</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/chip" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/chip" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/chip" ><span class="devsite-nav-text" tooltip>Chip</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/datepickers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/datepickers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/datepickers" ><span class="devsite-nav-text" tooltip>Date pickers</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/dialog" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/dialog" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/dialog" ><span class="devsite-nav-text" tooltip>Dialog</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/divider" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/divider" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/divider" ><span class="devsite-nav-text" tooltip>Divider</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/fab" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/fab" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/fab" ><span class="devsite-nav-text" tooltip>Floating action button</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/lists" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/lists" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/lists" ><span class="devsite-nav-text" tooltip>Lists and grids</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/drawer" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/drawer" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/drawer" ><span class="devsite-nav-text" tooltip>Navigation drawer</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/progress" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/progress" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/progress" ><span class="devsite-nav-text" tooltip>Progress indicators</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/resources" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/resources" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/resources" ><span class="devsite-nav-text" tooltip>Resources</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/scaffold" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/scaffold" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/scaffold" ><span class="devsite-nav-text" tooltip>Scaffold</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/slider" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/slider" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/slider" ><span class="devsite-nav-text" tooltip>Slider</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/snackbar" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/snackbar" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/snackbar" ><span class="devsite-nav-text" tooltip>Snackbar</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/switch" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/switch" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/switch" ><span class="devsite-nav-text" tooltip>Switch</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Time pickers</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/components/time-pickers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/time-pickers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/time-pickers" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/time-pickers-dialogs" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/time-pickers-dialogs" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/time-pickers-dialogs" ><span class="devsite-nav-text" tooltip>Time picker dialogs</span></a></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Theming</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/designsystems" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/designsystems" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/designsystems" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/designsystems/material3" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/designsystems/material3" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/designsystems/material3" ><span class="devsite-nav-text" tooltip>Material Design 3</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/designsystems/material2-material3" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/designsystems/material2-material3" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/designsystems/material2-material3" ><span class="devsite-nav-text" tooltip>Migrate from Material 2 to Material 3</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/designsystems/material" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/designsystems/material" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/designsystems/material" ><span class="devsite-nav-text" tooltip>Material Design 2</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/designsystems/custom" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/designsystems/custom" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/designsystems/custom" ><span class="devsite-nav-text" tooltip>Custom theming</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/designsystems/anatomy" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/designsystems/anatomy" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/designsystems/anatomy" ><span class="devsite-nav-text" tooltip>Anatomy of a theme</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/designsystems/views-to-compose" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/designsystems/views-to-compose" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/designsystems/views-to-compose" ><span class="devsite-nav-text" tooltip>Migrating XML themes to Compose</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Text and typography</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/text" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/text" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/text" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Display and style text</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/text/display-text" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/text/display-text" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/text/display-text" ><span class="devsite-nav-text" tooltip>Display text from resource</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/text/style-text" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/text/style-text" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/text/style-text" ><span class="devsite-nav-text" tooltip>Style text</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/text/style-paragraph" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/text/style-paragraph" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/text/style-paragraph" ><span class="devsite-nav-text" tooltip>Style paragraph</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/text/configure-layout" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/text/configure-layout" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/text/configure-layout" ><span class="devsite-nav-text" tooltip>Configure text layout</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/develop/ui/compose/text/user-input" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/text/user-input" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/text/user-input" ><span class="devsite-nav-text" tooltip>Handle user input</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/text/user-interactions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/text/user-interactions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/text/user-interactions" ><span class="devsite-nav-text" tooltip>Enable user interactions</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/text/fonts" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/text/fonts" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/text/fonts" ><span class="devsite-nav-text" tooltip>Work with fonts</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/text/emoji" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/text/emoji" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/text/emoji" ><span class="devsite-nav-text" tooltip>Display emoji</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Images and graphics</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/graphics" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/graphics" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/graphics" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Images</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/graphics/images" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/graphics/images" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/graphics/images" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/graphics/images/loading" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/graphics/images/loading" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/graphics/images/loading" ><span class="devsite-nav-text" tooltip>Loading images</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/graphics/images/compare" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/graphics/images/compare" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/graphics/images/compare" ><span class="devsite-nav-text" tooltip>ImageBitmap vs ImageVector</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/graphics/images/material" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/graphics/images/material" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/graphics/images/material" ><span class="devsite-nav-text" tooltip>Material icons</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/graphics/images/customize" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/graphics/images/customize" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/graphics/images/customize" ><span class="devsite-nav-text" tooltip>Customize an image</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/graphics/images/custompainter" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/graphics/images/custompainter" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/graphics/images/custompainter" ><span class="devsite-nav-text" tooltip>Custom painter</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/graphics/images/optimization" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/graphics/images/optimization" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/graphics/images/optimization" ><span class="devsite-nav-text" tooltip>Optimizing performance</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Graphics</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/graphics/draw/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/graphics/draw/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/graphics/draw/overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/graphics/draw/modifiers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/graphics/draw/modifiers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/graphics/draw/modifiers" ><span class="devsite-nav-text" tooltip>Graphics Modifiers</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/graphics/draw/brush" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/graphics/draw/brush" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/graphics/draw/brush" ><span class="devsite-nav-text" tooltip>Brush</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/graphics/draw/shapes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/graphics/draw/shapes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/graphics/draw/shapes" ><span class="devsite-nav-text" tooltip>Shapes</span></a></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Animation</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/introduction" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/introduction" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/introduction" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/choose-api" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/choose-api" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/choose-api" ><span class="devsite-nav-text" tooltip>Choose an animation API</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/quick-guide" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/quick-guide" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/quick-guide" ><span class="devsite-nav-text" tooltip>Quick guide</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/composables-modifiers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/composables-modifiers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/composables-modifiers" ><span class="devsite-nav-text" tooltip>Animation modifiers and composables</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/value-based" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/value-based" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/value-based" ><span class="devsite-nav-text" tooltip>Value-based animations</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/vectors" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/vectors" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/vectors" ><span class="devsite-nav-text" tooltip>Animated vector images</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/advanced" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/advanced" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/advanced" ><span class="devsite-nav-text" tooltip>Advanced animation example</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/customize" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/customize" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/customize" ><span class="devsite-nav-text" tooltip>Customize animations</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Shared elements</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/shared-elements" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/shared-elements" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/shared-elements" ><span class="devsite-nav-text" tooltip>Introduction</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/shared-elements/customize" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/shared-elements/customize" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/shared-elements/customize" ><span class="devsite-nav-text" tooltip>Customize</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/shared-elements/common-use-cases" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/shared-elements/common-use-cases" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/shared-elements/common-use-cases" ><span class="devsite-nav-text" tooltip>Common use cases</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/shared-elements/navigation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/shared-elements/navigation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/shared-elements/navigation" ><span class="devsite-nav-text" tooltip>With navigation</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/shared-elements/additional-samples" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/shared-elements/additional-samples" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/shared-elements/additional-samples" ><span class="devsite-nav-text" tooltip>Additional samples</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/testing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/testing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/testing" ><span class="devsite-nav-text" tooltip>Test animations</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/tooling" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/tooling" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/tooling" ><span class="devsite-nav-text" tooltip>Tools</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/animation/resources" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/animation/resources" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/animation/resources" ><span class="devsite-nav-text" tooltip>Additional resources</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Accessibility</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/accessibility" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/accessibility" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/accessibility" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/accessibility/key-steps" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/accessibility/key-steps" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/accessibility/key-steps" ><span class="devsite-nav-text" tooltip>Key steps</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/accessibility/semantics" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/accessibility/semantics" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/accessibility/semantics" ><span class="devsite-nav-text" tooltip>Semantics</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/accessibility/traversal" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/accessibility/traversal" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/accessibility/traversal" ><span class="devsite-nav-text" tooltip>Control traversal order</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/accessibility/testing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/accessibility/testing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/accessibility/testing" ><span class="devsite-nav-text" tooltip>Testing</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Touch and input</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Pointer input</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/pointer-input" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/pointer-input" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/pointer-input" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/pointer-input/understand-gestures" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/pointer-input/understand-gestures" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/pointer-input/understand-gestures" ><span class="devsite-nav-text" tooltip>Understand gestures</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/pointer-input/tap-and-press" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/pointer-input/tap-and-press" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/pointer-input/tap-and-press" ><span class="devsite-nav-text" tooltip>Tap and press</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/pointer-input/scroll" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/pointer-input/scroll" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/pointer-input/scroll" ><span class="devsite-nav-text" tooltip>Scroll</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/pointer-input/drag-swipe-fling" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/pointer-input/drag-swipe-fling" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/pointer-input/drag-swipe-fling" ><span class="devsite-nav-text" tooltip>Drag, swipe, and fling</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/pointer-input/multi-touch" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/pointer-input/multi-touch" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/pointer-input/multi-touch" ><span class="devsite-nav-text" tooltip>Multi-touch gestures</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Keyboard input</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/keyboard-input/commands" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/keyboard-input/commands" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/keyboard-input/commands" ><span class="devsite-nav-text" tooltip>Handle keyboard actions</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/keyboard-input/keyboard-shortcuts-helper" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/keyboard-input/keyboard-shortcuts-helper" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/keyboard-input/keyboard-shortcuts-helper" ><span class="devsite-nav-text" tooltip>Keyboard Shortcuts Helper</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Focus</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/focus" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/focus" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/focus" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/focus/change-focus-traversal-order" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/focus/change-focus-traversal-order" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/focus/change-focus-traversal-order" ><span class="devsite-nav-text" tooltip>Change focus traversal order</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/focus/change-focus-behavior" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/focus/change-focus-behavior" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/focus/change-focus-behavior" ><span class="devsite-nav-text" tooltip>Change focus behavior</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/focus/react-to-focus" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/focus/react-to-focus" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/focus/react-to-focus" ><span class="devsite-nav-text" tooltip>React to focus</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>User interactions</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/user-interactions/handling-interactions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/user-interactions/handling-interactions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/user-interactions/handling-interactions" ><span class="devsite-nav-text" tooltip>Handling interactions</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/user-interactions/migrate-indication-ripple" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/user-interactions/migrate-indication-ripple" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/user-interactions/migrate-indication-ripple" ><span class="devsite-nav-text" tooltip>Migrate to Indication and Ripple APIs</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/user-interactions/drag-and-drop" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/user-interactions/drag-and-drop" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/user-interactions/drag-and-drop" ><span class="devsite-nav-text" tooltip>Drag and Drop</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Stylus input</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/stylus-input" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/stylus-input" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/stylus-input" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/stylus-input/stylus-input-in-text-fields" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/stylus-input/stylus-input-in-text-fields" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/stylus-input/stylus-input-in-text-fields" ><span class="devsite-nav-text" tooltip>Stylus input in text fields</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/stylus-input/advanced-stylus-features" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/stylus-input/advanced-stylus-features" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/stylus-input/advanced-stylus-features" ><span class="devsite-nav-text" tooltip>Advanced stylus features</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/stylus-input/create-a-note-taking-app" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/stylus-input/create-a-note-taking-app" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/stylus-input/create-a-note-taking-app" ><span class="devsite-nav-text" tooltip>Note-taking apps</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Add inking to your app with the Ink API</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/stylus-input/about-ink-api" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/stylus-input/about-ink-api" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/stylus-input/about-ink-api" ><span class="devsite-nav-text" tooltip>About the Ink API</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/stylus-input/ink-api-setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/stylus-input/ink-api-setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/stylus-input/ink-api-setup" ><span class="devsite-nav-text" tooltip>Setup</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/stylus-input/ink-api-modules" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/stylus-input/ink-api-modules" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/stylus-input/ink-api-modules" ><span class="devsite-nav-text" tooltip>Pick your module</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/stylus-input/ink-api-draw-stroke" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/stylus-input/ink-api-draw-stroke" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/stylus-input/ink-api-draw-stroke" ><span class="devsite-nav-text" tooltip>Draw a stroke</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/stylus-input/ink-api-brush-apis" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/stylus-input/ink-api-brush-apis" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/stylus-input/ink-api-brush-apis" ><span class="devsite-nav-text" tooltip>Define your brushes</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/stylus-input/ink-api-geometry-apis" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/stylus-input/ink-api-geometry-apis" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/stylus-input/ink-api-geometry-apis" ><span class="devsite-nav-text" tooltip>Create interactive tools with the Geometry APIs</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/stylus-input/ink-api-state-preservation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/stylus-input/ink-api-state-preservation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/stylus-input/ink-api-state-preservation" ><span class="devsite-nav-text" tooltip>State preservation and persistent storage</span></a></li></ul></div></li></ul></div></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/copy-and-paste" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/copy-and-paste" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/copy-and-paste" ><span class="devsite-nav-text" tooltip>Copy and paste</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Performance</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/performance" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/performance" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/performance" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/performance/phases" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/performance/phases" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/performance/phases" ><span class="devsite-nav-text" tooltip>Phases</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/performance/baseline-profiles" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/performance/baseline-profiles" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/performance/baseline-profiles" ><span class="devsite-nav-text" tooltip>Baseline profiles</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Stability</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/performance/stability" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/performance/stability" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/performance/stability" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/performance/stability/diagnose" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/performance/stability/diagnose" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/performance/stability/diagnose" ><span class="devsite-nav-text" tooltip>Diagnose stability issues</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/performance/stability/fix" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/performance/stability/fix" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/performance/stability/fix" ><span class="devsite-nav-text" tooltip>Fix stability issues</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/performance/stability/strongskipping" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/performance/stability/strongskipping" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/performance/stability/strongskipping" ><span class="devsite-nav-text" tooltip>Strong skipping</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/develop/ui/compose/performance/tooling" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/performance/tooling" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/performance/tooling" ><span class="devsite-nav-text" tooltip>Tools</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/performance/bestpractices" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/performance/bestpractices" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/performance/bestpractices" ><span class="devsite-nav-text" tooltip>Best practices</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Style guidelines</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/api-guidelines" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/api-guidelines" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/api-guidelines" ><span class="devsite-nav-text" tooltip>Compose API guidelines</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/kotlin" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/kotlin" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/kotlin" ><span class="devsite-nav-text" tooltip>Kotlin for Compose</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>UI testing</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/testing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/testing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/testing" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/testing/testing-cheatsheet" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/testing/testing-cheatsheet" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/testing/testing-cheatsheet" ><span class="devsite-nav-text" tooltip>Cheatsheet</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/testing/semantics" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/testing/semantics" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/testing/semantics" ><span class="devsite-nav-text" tooltip>Semantics</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/testing/apis" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/testing/apis" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/testing/apis" ><span class="devsite-nav-text" tooltip>Testing APIs</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/testing/synchronization" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/testing/synchronization" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/testing/synchronization" ><span class="devsite-nav-text" tooltip>Synchronize tests</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/testing/interoperability" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/testing/interoperability" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/testing/interoperability" ><span class="devsite-nav-text" tooltip>Interoperability</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/testing/common-patterns" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/testing/common-patterns" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/testing/common-patterns" ><span class="devsite-nav-text" tooltip>Common patterns</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/testing/debug" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/testing/debug" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/testing/debug" ><span class="devsite-nav-text" tooltip>Debug tests</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Migrate to Compose</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/migrate" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/migrate" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/migrate" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/migrate/strategy" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/migrate/strategy" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/migrate/strategy" ><span class="devsite-nav-text" tooltip>Migration strategy</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Interoperability APIs</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/migrate/interoperability-apis" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/migrate/interoperability-apis" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/migrate/interoperability-apis" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/migrate/interoperability-apis/compose-in-views" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/migrate/interoperability-apis/compose-in-views" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/migrate/interoperability-apis/compose-in-views" ><span class="devsite-nav-text" tooltip>Using Compose in Views</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/migrate/interoperability-apis/views-in-compose" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/migrate/interoperability-apis/views-in-compose" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/migrate/interoperability-apis/views-in-compose" ><span class="devsite-nav-text" tooltip>Using Views in Compose</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Common migration scenarios</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/migrate/migration-scenarios/recycler-view" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/migrate/migration-scenarios/recycler-view" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/migrate/migration-scenarios/recycler-view" ><span class="devsite-nav-text" tooltip>Migrate RecyclerView to Compose</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/migrate/migration-scenarios/coordinator-layout" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/migrate/migration-scenarios/coordinator-layout" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/migrate/migration-scenarios/coordinator-layout" ><span class="devsite-nav-text" tooltip>Migrate CoordinatorLayout to Compose</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/migrate/migration-scenarios/navigation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/migrate/migration-scenarios/navigation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/migrate/migration-scenarios/navigation" ><span class="devsite-nav-text" tooltip>Migrate Jetpack Navigation to Navigation Compose</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/develop/ui/compose/migrate/other-considerations" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/migrate/other-considerations" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/migrate/other-considerations" ><span class="devsite-nav-text" tooltip>Other considerations</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/adopt/for-large-teams" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/adopt/for-large-teams" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/adopt/for-large-teams" ><span class="devsite-nav-text" tooltip>Adopt Compose for teams</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/libraries" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/libraries" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/libraries" ><span class="devsite-nav-text" tooltip>Compose and other libraries</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/migrate/compare-metrics" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/migrate/compare-metrics" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/migrate/compare-metrics" ><span class="devsite-nav-text" tooltip>Compare Compose and View metrics</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Tools</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Design</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/previews" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/previews" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/previews" ><span class="devsite-nav-text" tooltip>Preview your UI</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/animation-preview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/animation-preview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/animation-preview" ><span class="devsite-nav-text" tooltip>Preview and debug animations</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Develop</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/iterative-development" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/iterative-development" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/iterative-development" ><span class="devsite-nav-text" tooltip>Develop code iteratively</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/editor-actions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/editor-actions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/editor-actions" ><span class="devsite-nav-text" tooltip>Editor actions</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Debug</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/layout-inspector" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/layout-inspector" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/layout-inspector" ><span class="devsite-nav-text" tooltip>Inspect your layout</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/tracing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/tracing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/tracing" ><span class="devsite-nav-text" tooltip>Trace app performance</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Relay designer and developer tooling</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/install-relay" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/install-relay" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/install-relay" ><span class="devsite-nav-text" tooltip>Install Relay</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/android-project-setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/android-project-setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/android-project-setup" ><span class="devsite-nav-text" tooltip>Set up your Android project</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Basic tutorial</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/basic-tutorial" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/basic-tutorial" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/basic-tutorial" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/create-ui-package-in-figma" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/create-ui-package-in-figma" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/create-ui-package-in-figma" ><span class="devsite-nav-text" tooltip>Create UI Package in Figma</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/convert-designs-android-studio" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/convert-designs-android-studio" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/convert-designs-android-studio" ><span class="devsite-nav-text" tooltip>Convert the designs to code in Android Studio</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/design-updates" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/design-updates" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/design-updates" ><span class="devsite-nav-text" tooltip>Make and propagate design updates</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/content-parameters" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/content-parameters" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/content-parameters" ><span class="devsite-nav-text" tooltip>Content parameters</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Advanced tutorial</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/advanced-tutorial" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/advanced-tutorial" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/advanced-tutorial" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/design-variants" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/design-variants" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/design-variants" ><span class="devsite-nav-text" tooltip>Handling design variants</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/content-parameters-advanced" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/content-parameters-advanced" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/content-parameters-advanced" ><span class="devsite-nav-text" tooltip>Content parameters</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/interaction-handlers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/interaction-handlers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/interaction-handlers" ><span class="devsite-nav-text" tooltip>Add interaction handlers to designs</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Relay workflow</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/relay-workflow" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/relay-workflow" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/relay-workflow" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/create-ui-packages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/create-ui-packages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/create-ui-packages" ><span class="devsite-nav-text" tooltip>Create UI Packages</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/add-parameters" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/add-parameters" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/add-parameters" ><span class="devsite-nav-text" tooltip>Add parameters</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/check-errors" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/check-errors" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/check-errors" ><span class="devsite-nav-text" tooltip>Check errors</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/share-ui-packages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/share-ui-packages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/share-ui-packages" ><span class="devsite-nav-text" tooltip>Share UI Packages</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/android-studio-workflow" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/android-studio-workflow" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/android-studio-workflow" ><span class="devsite-nav-text" tooltip>Android Studio workflow</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/understand-ui-package" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/understand-ui-package" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/understand-ui-package" ><span class="devsite-nav-text" tooltip>Understand UI Package & generated code</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/figma-devmode" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/figma-devmode" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/figma-devmode" ><span class="devsite-nav-text" tooltip>Figma DevMode</span></a></li></ul></div></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Design-to-code translation details</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/figma-component-properties" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/figma-component-properties" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/figma-component-properties" ><span class="devsite-nav-text" tooltip>Figma Component Properties</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/children-parameters" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/children-parameters" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/children-parameters" ><span class="devsite-nav-text" tooltip>Children parameters</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/nested-package-instances" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/nested-package-instances" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/nested-package-instances" ><span class="devsite-nav-text" tooltip>Nested package instances</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/vector-graphics" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/vector-graphics" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/vector-graphics" ><span class="devsite-nav-text" tooltip>Vector graphics</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/multiple-styles-in-text" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/multiple-styles-in-text" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/multiple-styles-in-text" ><span class="devsite-nav-text" tooltip>Multiple styles in text</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/absolute-positioning" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/absolute-positioning" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/absolute-positioning" ><span class="devsite-nav-text" tooltip>Absolute positioning within auto layout</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/fill-color" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/fill-color" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/fill-color" ><span class="devsite-nav-text" tooltip>Fill color</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/effects" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/effects" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/effects" ><span class="devsite-nav-text" tooltip>Effects</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/limitations-and-troubleshooting" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/limitations-and-troubleshooting" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/limitations-and-troubleshooting" ><span class="devsite-nav-text" tooltip>Limitations and troubleshooting</span></a></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Experimental features</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/mapping-styles-to-compose-theme" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/mapping-styles-to-compose-theme" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/mapping-styles-to-compose-theme" ><span class="devsite-nav-text" tooltip>Mapping styles to Compose theme</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/mapping-components-to-existing-code" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/mapping-components-to-existing-code" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/mapping-components-to-existing-code" ><span class="devsite-nav-text" tooltip>Mapping components to existing code</span></a></li></ul></div></li><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/relay/releases" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/relay/releases" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/relay/releases" ><span class="devsite-nav-text" tooltip>Releases</span></a></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Leverage system capabilities</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/insets" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/layouts/insets" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/insets" ><span class="devsite-nav-text" tooltip>Window Insets</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/system/cutouts" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/system/cutouts" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/system/cutouts" ><span class="devsite-nav-text" tooltip>Cutouts</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/system/picture-in-picture" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/system/picture-in-picture" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/system/picture-in-picture" ><span class="devsite-nav-text" tooltip>Picture-in-picture</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable devsite-nav-accordion"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Create widgets</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/glance" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/glance" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/glance" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/glance/setup" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/glance/setup" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/glance/setup" ><span class="devsite-nav-text" tooltip>Glance setup</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/glance/create-app-widget" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/glance/create-app-widget" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/glance/create-app-widget" ><span class="devsite-nav-text" tooltip>Create an app widget with Glance</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/glance/error-handling" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/glance/error-handling" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/glance/error-handling" ><span class="devsite-nav-text" tooltip>Handle errors with Glance</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/glance/testing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/glance/testing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/glance/testing" ><span class="devsite-nav-text" tooltip>Unit testing with Glance</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/glance/user-interaction" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/glance/user-interaction" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/glance/user-interaction" ><span class="devsite-nav-text" tooltip>Handle user interaction with Glance</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/glance/glance-app-widget" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/glance/glance-app-widget" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/glance/glance-app-widget" ><span class="devsite-nav-text" tooltip>Manage and update GlanceAppWidget</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/glance/build-ui" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/glance/build-ui" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/glance/build-ui" ><span class="devsite-nav-text" tooltip>Build UI with Glance</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/glance/theme" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/glance/theme" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/glance/theme" ><span class="devsite-nav-text" tooltip>Implement a Glance theme</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/glance/interoperability" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/glance/interoperability" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/glance/interoperability" ><span class="devsite-nav-text" tooltip>Glance interoperability</span></a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/glance/additional-resources" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/glance/additional-resources" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/glance/additional-resources" ><span class="devsite-nav-text" tooltip>Additional resources</span></a></li></ul></div></li> </ul> <ul class="devsite-nav-list" menu="Essentials" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Gemini in Android Studio </span> </span> </li> <li class="devsite-nav-item"> <a href="/gemini-in-android" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn more" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn more </span> </a> </li> <li class="devsite-nav-item"> <a href="/studio" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get Android Studio" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get Android Studio </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Get started </span> </span> </li> <li class="devsite-nav-item"> <a href="/get-started/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Hello world" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Hello world </span> </a> </li> <li class="devsite-nav-item"> <a href="/courses" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Training courses" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Training courses </span> </a> </li> <li class="devsite-nav-item"> <a href="/get-started/codelabs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Tutorials" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Tutorials </span> </a> </li> <li class="devsite-nav-item"> <a href="/kotlin" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Kotlin for Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Kotlin for Android </span> </a> </li> <li class="devsite-nav-item"> <a href="https://play.google.com/console/about/guides/monetize/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Monetization with Play ↗️" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Monetization with Play ↗️ </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Extend by device </span> </span> </li> <li class="devsite-nav-item"> <a href="/adaptive-apps" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Adaptive apps" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Adaptive apps </span> </a> </li> <li class="devsite-nav-item"> <a href="/wear" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Wear OS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Wear OS </span> </a> </li> <li class="devsite-nav-item"> <a href="/cars" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android for Cars" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android for Cars </span> </a> </li> <li class="devsite-nav-item"> <a href="/tv" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android TV" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android TV </span> </a> </li> <li class="devsite-nav-item"> <a href="/chrome-os" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: ChromeOS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > ChromeOS </span> </a> </li> <li class="devsite-nav-item"> <a href="/multi-device-development" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Cross-device SDK" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Cross-device SDK </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build by category </span> </span> </li> <li class="devsite-nav-item"> <a href="/games" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Games" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Games </span> </a> </li> <li class="devsite-nav-item"> <a href="/media" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Camera & Media" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Camera & Media </span> </a> </li> <li class="devsite-nav-item"> <a href="/social-and-messaging" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Social & messaging" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Social & messaging </span> </a> </li> <li class="devsite-nav-item"> <a href="/health-and-fitness" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Health & Fitness" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Health & Fitness </span> </a> </li> <li class="devsite-nav-item"> <a href="/productivity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Productivity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Productivity </span> </a> </li> <li class="devsite-nav-item"> <a href="/work/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Enterprise apps" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Enterprise apps </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Get the latest </span> </span> </li> <li class="devsite-nav-item"> <a href="/latest-updates" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Latest updates" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Latest updates </span> </a> </li> <li class="devsite-nav-item"> <a href="/latest-updates/experimental" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Experimental updates" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Experimental updates </span> </a> </li> <li class="devsite-nav-item"> <a href="/studio/preview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android Studio preview" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android Studio preview </span> </a> </li> <li class="devsite-nav-item"> <a href="/jetpack/androidx/versions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Jetpack & Compose libraries" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Jetpack & Compose libraries </span> </a> </li> <li class="devsite-nav-item"> <a href="/training/wearables/versions/4" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Wear OS preview" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Wear OS preview </span> </a> </li> <li class="devsite-nav-item"> <a href="/design-for-safety/privacy-sandbox" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy Sandbox" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy Sandbox </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Design & Plan" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > UI Design </span> </span> </li> <li class="devsite-nav-item"> <a href="/design/ui" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Design for Android" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Design for Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/design/ui/mobile" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Mobile" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Mobile </span> </a> </li> <li class="devsite-nav-item"> <a href="/design/ui/large-screens" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Large screens (e.g., tablets)" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Large screens (e.g., tablets) </span> </a> </li> <li class="devsite-nav-item"> <a href="/design/ui/widget" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Widgets" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Widgets </span> </a> </li> <li class="devsite-nav-item"> <a href="/design/ui/wear" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Wear OS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Wear OS </span> </a> </li> <li class="devsite-nav-item"> <a href="/design/ui/tv" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android TV" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android TV </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Architecture </span> </span> </li> <li class="devsite-nav-item"> <a href="/topic/architecture/intro" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Introduction" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Introduction </span> </a> </li> <li class="devsite-nav-item"> <a href="/topic/libraries/view-binding" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Libraries" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Libraries </span> </a> </li> <li class="devsite-nav-item"> <a href="/guide/navigation/navigation-principles" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Navigation" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Navigation </span> </a> </li> <li class="devsite-nav-item"> <a href="/topic/modularization" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Modularization" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Modularization </span> </a> </li> <li class="devsite-nav-item"> <a href="/training/testing/fundamentals" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Testing" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Testing </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Quality </span> </span> </li> <li class="devsite-nav-item"> <a href="/quality" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Overview </span> </a> </li> <li class="devsite-nav-item"> <a href="/quality/core-value" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Core value" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Core value </span> </a> </li> <li class="devsite-nav-item"> <a href="/quality/user-experience" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: User experience" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > User experience </span> </a> </li> <li class="devsite-nav-item"> <a href="/quality/technical" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Technical quality" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Technical quality </span> </a> </li> <li class="devsite-nav-item"> <a href="/quality/privacy-and-security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Security" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Security </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Security </span> </span> </li> <li class="devsite-nav-item"> <a href="/security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Overview </span> </a> </li> <li class="devsite-nav-item"> <a href="/privacy-and-security/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Privacy </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item"> <a href="/security/fraud-prevention" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Fraud prevention" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Fraud prevention </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build for Billions </span> </span> </li> <li class="devsite-nav-item"> <a href="/build-for-billions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Overview </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs/quality-guidelines/build-for-billions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: About new markets" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About new markets </span> </a> </li> <li class="devsite-nav-item"> <a href="/guide/topics/androidgo" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android (Go edition)" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android (Go edition) </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Develop" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Build AI experiences </span> </span> </li> <li class="devsite-nav-item"> <a href="/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Get started" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Get started </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Core areas </span> </span> </li> <li class="devsite-nav-item"> <a href="/samples" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Samples </span> </a> </li> <li class="devsite-nav-item"> <a href="/quick-guides" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Try Quick Guidesᵇᵉᵗᵃ" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Try Quick Guidesᵇᵉᵗᵃ </span> </a> </li> <li class="devsite-nav-item"> <a href="/develop/ui" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: User interfaces" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > User interfaces </span> </a> </li> <li class="devsite-nav-item"> <a href="/guide/topics/permissions/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Permissions" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Permissions </span> </a> </li> <li class="devsite-nav-item"> <a href="/develop/background-work" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Background work" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Background work </span> </a> </li> <li class="devsite-nav-item"> <a href="/guide/topics/data" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Data and files" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Data and files </span> </a> </li> <li class="devsite-nav-item"> <a href="/develop#core-areas" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: All core areas ⤵️" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > All core areas ⤵️ </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Tools and workflow </span> </span> </li> <li class="devsite-nav-item"> <a href="/studio/write" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Write and debug code" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Write and debug code </span> </a> </li> <li class="devsite-nav-item"> <a href="/build/gradle-build-overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Build projects" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Build projects </span> </a> </li> <li class="devsite-nav-item"> <a href="/training/testing" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Test your app" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Test your app </span> </a> </li> <li class="devsite-nav-item"> <a href="/topic/performance/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/tools" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Command-line tools" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Command-line tools </span> </a> </li> <li class="devsite-nav-item"> <a href="/reference/tools/gradle-api" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Gradle plugin API" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Gradle plugin API </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Device tech </span> </span> </li> <li class="devsite-nav-item"> <a href="/guide/topics/large-screens/get-started-with-large-screens" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Large screens (e.g., tablets)" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Large screens (e.g., tablets) </span> </a> </li> <li class="devsite-nav-item"> <a href="/training/wearables" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Wear OS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Wear OS </span> </a> </li> <li class="devsite-nav-item"> <a href="/health-and-fitness/guides" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android Health" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android Health </span> </a> </li> <li class="devsite-nav-item"> <a href="/guide/topics/connectivity/cross-device-sdk/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Cross-device SDK" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Cross-device SDK </span> </a> </li> <li class="devsite-nav-item"> <a href="/training/cars" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android for Cars" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android for Cars </span> </a> </li> <li class="devsite-nav-item"> <a href="/training/tv" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android TV" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android TV </span> </a> </li> <li class="devsite-nav-item"> <a href="/chrome-os/intro" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: ChromeOS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > ChromeOS </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Libraries </span> </span> </li> <li class="devsite-nav-item"> <a href="/reference/packages" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android platform" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Android platform </span> </a> </li> <li class="devsite-nav-item"> <a href="/jetpack/androidx/explorer" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Jetpack libraries" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Jetpack libraries </span> </a> </li> <li class="devsite-nav-item"> <a href="/jetpack/androidx/releases/compose" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Compose libraries" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Compose libraries </span> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/android/reference/packages" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Play services ↗️" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Play services ↗️ </span> </a> </li> <li class="devsite-nav-item"> <a href="https://play.google.com/sdks" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Play SDK index ↗️" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Play SDK index ↗️ </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-book-nav has-sidebar > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars ></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developer.android.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Android Developers" > Android Developers </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.android.com/develop" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Develop" > Develop </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.android.com/develop/core-areas" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Core areas" > Core areas </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.android.com/develop/ui" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail="Jetpack Compose" > UI </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developer.android.com/develop/ui/compose/documentation" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="5" track-type="globalNav" track-name="breadcrumb" track-metadata-position="5" track-metadata-eventdetail="" > Guides </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Make your app fold aware </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <devsite-recommendations-dropdown class="nocontent"></devsite-recommendations-dropdown> <div class="devsite-article-body clearfix "> <p>Large unfolded displays and unique folded states enable new user experiences on foldable devices. To make your app fold aware, use the <a href="/jetpack/androidx/releases/window">Jetpack WindowManager library</a>, which provides an API surface for foldable device window features such as folds and hinges. When your app is fold aware, it can adapt its layout to avoid placing important content in the area of folds or hinges and use folds and hinges as natural separators.</p> <p>Understanding whether a device supports configurations such as tabletop or book posture can guide decisions about supporting different layouts or providing specific features.</p> <h2 id="window_information" data-text="Window information" tabindex="-1">Window information</h2> <p>The <a href="/reference/kotlin/androidx/window/layout/WindowInfoTracker"><code translate="no" dir="ltr">WindowInfoTracker</code></a> interface in Jetpack WindowManager exposes window layout information. The interface's <a href="/reference/kotlin/androidx/window/layout/WindowInfoTracker#windowLayoutInfo(android.app.Activity)"><code translate="no" dir="ltr">windowLayoutInfo()</code></a> method returns a stream of <a href="/reference/kotlin/androidx/window/layout/WindowLayoutInfo"><code translate="no" dir="ltr">WindowLayoutInfo</code></a> data that informs your app about a foldable device's fold state. The <a href="/reference/kotlin/androidx/window/layout/WindowInfoTracker#getOrCreate(android.content.Context)"><code translate="no" dir="ltr">WindowInfoTracker#getOrCreate()</code></a> method creates an instance of <code translate="no" dir="ltr">WindowInfoTracker</code>.</p> <p>WindowManager provides support for collecting <code translate="no" dir="ltr">WindowLayoutInfo</code> data using Kotlin flows and Java callbacks.</p> <h3 id="kotlin_flows" data-text="Kotlin flows" tabindex="-1">Kotlin flows</h3> <p>To start and stop <code translate="no" dir="ltr">WindowLayoutInfo</code> data collection, you can use a <a href="/topic/libraries/architecture/coroutines#restart">restartable lifecycle-aware coroutine</a> in which the <code translate="no" dir="ltr">repeatOnLifecycle</code> code block is executed when the lifecycle is at least <code translate="no" dir="ltr">STARTED</code> and is stopped when the lifecycle is <code translate="no" dir="ltr">STOPPED</code>. Execution of the code block is automatically restarted when the lifecycle is <code translate="no" dir="ltr">STARTED</code> again. In the following example, the code block collects and uses <code translate="no" dir="ltr">WindowLayoutInfo</code> data:</p> <pre class="prettyprint lang-kotlin" translate="no" dir="ltr"><code translate="no" dir="ltr">class DisplayFeaturesActivity : AppCompatActivity() { private lateinit var binding: ActivityDisplayFeaturesBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivityDisplayFeaturesBinding.inflate(layoutInflater) setContentView(binding.root) lifecycleScope.launch(Dispatchers.Main) { lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) { WindowInfoTracker.getOrCreate(this@DisplayFeaturesActivity) .windowLayoutInfo(this@DisplayFeaturesActivity) .collect { newLayoutInfo -> // Use newLayoutInfo to update the layout. } } } } } </code></pre> <h3 id="java_callbacks" data-text="Java callbacks" tabindex="-1">Java callbacks</h3> <p>The callback compatibility layer included in the <a href="/jetpack/androidx/releases/window#declaring_dependencies"><code translate="no" dir="ltr">androidx.window:window-java</code></a> dependency enables you to collect <code translate="no" dir="ltr">WindowLayoutInfo</code> updates without using a Kotlin flow. The artifact includes the <a href="/reference/kotlin/androidx/window/java/layout/WindowInfoTrackerCallbackAdapter"><code translate="no" dir="ltr">WindowInfoTrackerCallbackAdapter</code></a> class, which adapts a <code translate="no" dir="ltr">WindowInfoTracker</code> to support registering (and unregistering) callbacks to receive <code translate="no" dir="ltr">WindowLayoutInfo</code> updates, for example:</p> <pre class="prettyprint lang-java" translate="no" dir="ltr"><code translate="no" dir="ltr">public class SplitLayoutActivity extends AppCompatActivity { private WindowInfoTrackerCallbackAdapter windowInfoTracker; private ActivitySplitLayoutBinding binding; private final LayoutStateChangeCallback layoutStateChangeCallback = new LayoutStateChangeCallback(); @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); binding = ActivitySplitLayoutBinding.inflate(getLayoutInflater()); setContentView(binding.getRoot()); windowInfoTracker = new WindowInfoTrackerCallbackAdapter(WindowInfoTracker.getOrCreate(this)); } @Override protected void onStart() { super.onStart(); windowInfoTracker.addWindowLayoutInfoListener( this, Runnable::run, layoutStateChangeCallback); } @Override protected void onStop() { super.onStop(); windowInfoTracker .removeWindowLayoutInfoListener(layoutStateChangeCallback); } class LayoutStateChangeCallback implements Consumer<WindowLayoutInfo> { @Override public void accept(WindowLayoutInfo newLayoutInfo) { SplitLayoutActivity.this.runOnUiThread( () -> { // Use newLayoutInfo to update the layout. }); } } } </code></pre> <h3 id="rxjava_support" data-text="RxJava support" tabindex="-1">RxJava support</h3> <p>If you're already using <a href="https://github.com/ReactiveX/RxJava" class="external"><code translate="no" dir="ltr">RxJava</code></a> (version <a href="https://github.com/ReactiveX/RxJava#version-2x"><code translate="no" dir="ltr">2</code></a> or <a href="https://github.com/ReactiveX/RxJava#version-3x-javadoc"><code translate="no" dir="ltr">3</code></a>), you can take advantage of artifacts that enable you to use an <a href="http://reactivex.io/documentation/observable.html" class="external"><code translate="no" dir="ltr">Observable</code></a> or <a href="http://reactivex.io/RxJava/3.x/javadoc/io/reactivex/rxjava3/core/Flowable.html" class="external"><code translate="no" dir="ltr">Flowable</code></a> to collect <code translate="no" dir="ltr">WindowLayoutInfo</code> updates without using a Kotlin flow.</p> <p>The compatibility layer provided by the <code translate="no" dir="ltr">androidx.window:window-rxjava2</code> and <code translate="no" dir="ltr">androidx.window:window-rxjava3</code> dependencies includes the <a href="/reference/kotlin/androidx/window/rxjava2/layout/package-summary#(androidx.window.layout.WindowInfoTracker).windowLayoutInfoFlowable(android.app.Activity)"><code translate="no" dir="ltr">WindowInfoTracker#windowLayoutInfoFlowable()</code></a> and <a href="/reference/kotlin/androidx/window/rxjava2/layout/package-summary#(androidx.window.layout.WindowInfoTracker).windowLayoutInfoObservable(android.app.Activity)"><code translate="no" dir="ltr">WindowInfoTracker#windowLayoutInfoObservable()</code></a> methods, which enable your app to receive <code translate="no" dir="ltr">WindowLayoutInfo</code> updates, for example:</p> <pre class="prettyprint lang-kotlin" translate="no" dir="ltr"><code translate="no" dir="ltr">class RxActivity: AppCompatActivity { private lateinit var binding: ActivityRxBinding private var disposable: Disposable? = null private lateinit var observable: Observable<WindowLayoutInfo> @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); binding = ActivitySplitLayoutBinding.inflate(getLayoutInflater()); setContentView(binding.getRoot()); // Create a new observable. observable = WindowInfoTracker.getOrCreate(this@RxActivity) .windowLayoutInfoObservable(this@RxActivity) } @Override protected void onStart() { super.onStart(); // Subscribe to receive WindowLayoutInfo updates. disposable?.dispose() disposable = observable .observeOn(AndroidSchedulers.mainThread()) .subscribe { newLayoutInfo -> // Use newLayoutInfo to update the layout. } } @Override protected void onStop() { super.onStop(); // Dispose of the WindowLayoutInfo observable. disposable?.dispose() } } </code></pre> <h2 id="features_of_foldable_displays" data-text="Features of foldable displays" tabindex="-1">Features of foldable displays</h2> <p>The <code translate="no" dir="ltr">WindowLayoutInfo</code> class of Jetpack WindowManager makes the features of a display window available as a list of <a href="/reference/kotlin/androidx/window/layout/DisplayFeature"><code translate="no" dir="ltr">DisplayFeature</code></a> elements.</p> <p>A <a href="/reference/kotlin/androidx/window/layout/FoldingFeature"><code translate="no" dir="ltr">FoldingFeature</code></a> is a type of <code translate="no" dir="ltr">DisplayFeature</code> that provides information about foldable displays, including the following:</p> <ul> <li><p><code translate="no" dir="ltr">state</code>: The folded state of the device, <a href="/reference/kotlin/androidx/window/layout/FoldingFeature.State#FLAT()"><code translate="no" dir="ltr">FLAT</code></a> or <a href="/reference/kotlin/androidx/window/layout/FoldingFeature.State#HALF_OPENED()"><code translate="no" dir="ltr">HALF_OPENED</code></a></p></li> <li><p><code translate="no" dir="ltr">orientation</code>: The orientation of the fold or hinge, <a href="/reference/kotlin/androidx/window/layout/FoldingFeature.Orientation#HORIZONTAL()"><code translate="no" dir="ltr">HORIZONTAL</code></a> or <a href="/reference/kotlin/androidx/window/layout/FoldingFeature.Orientation#VERTICAL()"><code translate="no" dir="ltr">VERTICAL</code></a></p></li> <li><p><code translate="no" dir="ltr">occlusionType</code>: Whether the fold or hinge conceals part of the display, <a href="/reference/kotlin/androidx/window/layout/FoldingFeature.OcclusionType#NONE()"><code translate="no" dir="ltr">NONE</code></a> or <a href="/reference/kotlin/androidx/window/layout/FoldingFeature.OcclusionType#FULL()"><code translate="no" dir="ltr">FULL</code></a></p></li> <li><p><code translate="no" dir="ltr">isSeparating</code>: Whether the fold or hinge creates two logical display areas, true or false</p></li> </ul> <aside class="note"><strong>Note:</strong><span> Although the hinge on foldable devices allows the device to fold to various angles, <code translate="no" dir="ltr">FoldingFeature</code> does not expose the angle as part of the API. Different devices have different reporting ranges, and sensor accuracy can vary from device to device; so, animations or logic based on the precise hinge angle must be tuned to the device.</span></aside> <p>A foldable device that is <code translate="no" dir="ltr">HALF_OPENED</code> always reports <code translate="no" dir="ltr">isSeparating</code> as true because the screen is separated into two display areas. Also, <code translate="no" dir="ltr">isSeparating</code> is always true on a dual‑screen device when the application spans both screens.</p> <p>The <code translate="no" dir="ltr">FoldingFeature</code> <a href="/reference/kotlin/androidx/window/layout/DisplayFeature#bounds()"><code translate="no" dir="ltr">bounds</code></a> property (inherited from <code translate="no" dir="ltr">DisplayFeature</code>) represents the bounding rectangle of a folding feature such as a fold or hinge. The bounds can be used to position elements on screen relative to the feature:</p> <div> <div class="ds-selector-tabs"><section><h3 id="kotlin" data-text="Kotlin" tabindex="-1">Kotlin</h3> <pre class="prettyprint lang-kotlin" translate="no" dir="ltr"> override fun onCreate(savedInstanceState: Bundle?) { ... lifecycleScope.launch(Dispatchers.Main) { lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) { // Safely collects from WindowInfoTracker when the lifecycle is // STARTED and stops collection when the lifecycle is STOPPED. WindowInfoTracker.getOrCreate(this@MainActivity) .windowLayoutInfo(this@MainActivity) .collect { layoutInfo -> // New posture information. val foldingFeature = layoutInfo.displayFeatures .filterIsInstance<FoldingFeature>() .firstOrNull() // Use information from the foldingFeature object. } } } } </pre> </section><section><h3 id="java" data-text="Java" tabindex="-1">Java</h3> <pre class="prettyprint lang-java" translate="no" dir="ltr"> private WindowInfoTrackerCallbackAdapter windowInfoTracker; private final LayoutStateChangeCallback layoutStateChangeCallback = new LayoutStateChangeCallback(); @Override protected void onCreate(@Nullable Bundle savedInstanceState) { ... windowInfoTracker = new WindowInfoTrackerCallbackAdapter(WindowInfoTracker.getOrCreate(this)); } @Override protected void onStart() { super.onStart(); windowInfoTracker.addWindowLayoutInfoListener( this, Runnable::run, layoutStateChangeCallback); } @Override protected void onStop() { super.onStop(); windowInfoTracker.removeWindowLayoutInfoListener(layoutStateChangeCallback); } class LayoutStateChangeCallback implements Consumer<WindowLayoutInfo> { @Override public void accept(WindowLayoutInfo newLayoutInfo) { // Use newLayoutInfo to update the Layout. List<DisplayFeature> displayFeatures = newLayoutInfo.getDisplayFeatures(); for (DisplayFeature feature : displayFeatures) { if (feature instanceof FoldingFeature) { // Use information from the feature object. } } } } </pre> </section></div></div> <h3 id="tabletop_posture" data-text="Tabletop posture" tabindex="-1">Tabletop posture</h3> <p>Using the information included in the <code translate="no" dir="ltr">FoldingFeature</code> object, your app can support postures like tabletop, where the phone sits on a surface, the hinge is in a horizontal position, and the foldable screen is half opened.</p> <p>Tabletop posture offers users the convenience of operating their phones without holding the phone in their hands. Tabletop posture is great for watching media, taking photos, and making video calls.</p> <figure style="width: 50%; margin: 0.75rem auto 2.0rem;"> <img style="margin: 0.5rem 0;" src="/static/images/large-screens/gallery/media/tabletop.png" alt=""/> <figcaption> <b>Figure 1.</b> A video player app in tabletop posture. </figcaption> </figure> <p>Use <a href="/reference/kotlin/androidx/window/layout/FoldingFeature.State"><code translate="no" dir="ltr">FoldingFeature.State</code></a> and <a href="/reference/kotlin/androidx/window/layout/FoldingFeature.Orientation"><code translate="no" dir="ltr">FoldingFeature.Orientation</code></a> to determine whether the device is in tabletop posture:</p> <div> <div class="ds-selector-tabs"><section><h3 id="kotlin" data-text="Kotlin" tabindex="-1">Kotlin</h3> <pre class="prettyprint lang-kotlin" translate="no" dir="ltr"> fun isTableTopPosture(foldFeature : FoldingFeature?) : Boolean { contract { returns(true) implies (foldFeature != null) } return foldFeature?.state == FoldingFeature.State.HALF_OPENED && foldFeature.orientation == FoldingFeature.Orientation.HORIZONTAL } </pre> </section><section><h3 id="java" data-text="Java" tabindex="-1">Java</h3> <pre class="prettyprint lang-java" translate="no" dir="ltr"> boolean isTableTopPosture(FoldingFeature foldFeature) { return (foldFeature != null) && (foldFeature.getState() == FoldingFeature.State.HALF_OPENED) && (foldFeature.getOrientation() == FoldingFeature.Orientation.HORIZONTAL); } </pre> </section></div></div> <p>Once you know the device is in tabletop posture, update your app layout accordingly. For media apps, that typically means placing the playback above the fold and positioning controls and supplementary content just below for a hands‑free viewing or listening experience.</p> <p>On Android 15 (API level 35) and higher, you can invoke a synchronous API to detect whether a device supports tabletop posture regardless of the current state of the device.</p> <aside class="note"><strong>Note:</strong><span> The API requires <a href="https://source.android.com/docs/core/display/windowmanager-extensions">WindowManager Extensions</a> version 6, which ships with Android 15 or higher.</span></aside> <p>The API provides a list of postures supported by the device. If the list contains tabletop posture, you can split your app layout to support the posture and run A/B tests on your app UI for tabletop and full‑screen layouts.</p> <div> <div class="ds-selector-tabs"><section><h3 id="kotlin" data-text="Kotlin" tabindex="-1">Kotlin</h3> <pre class="prettyprint lang-kotlin" translate="no" dir="ltr"> if (WindowSdkExtensions.getInstance().extensionsVersion >= 6) { val postures = WindowInfoTracker.getOrCreate(context).supportedPostures if (postures.contains(TABLE_TOP)) { // Device supports tabletop posture. } } </pre> </section><section><h3 id="java" data-text="Java" tabindex="-1">Java</h3> <pre class="prettyprint lang-java" translate="no" dir="ltr"> if (WindowSdkExtensions.getInstance().getExtensionVersion() >= 6) { List<SupportedPosture> postures = WindowInfoTracker.getOrCreate(context).getSupportedPostures(); if (postures.contains(SupportedPosture.TABLETOP)) { // Device supports tabletop posture. } } </pre> </section></div></div> <aside class="note"><strong>Note:</strong><span> The function returns only the <code translate="no" dir="ltr">TABLETOP</code> posture, but you can use the hinge sensor orientation to determine whether the device is horizontal (tabletop posture) or vertical (book posture).</span></aside> <h4 id="tabletop_examples" data-text="Examples" tabindex="-1">Examples</h4> <ul> <li><p><a href="https://github.com/android/platform-samples/blob/main/samples/user-interface/windowmanager/src/main/java/com/example/platform/ui/windowmanager/MediaPlayerActivity.kt" class="external"><code translate="no" dir="ltr">MediaPlayerActivity</code></a> app: See how to use <a href="/guide/topics/media/exoplayer">Media3 Exoplayer</a> and <a href="https://github.com/android/platform-samples/tree/main/samples/user-interface/windowmanager">WindowManager</a> to create a fold‑aware video player.</p></li> <li><p><a href="/codelabs/android-camera-foldables#5">Optimize your camera app on foldable devices with Jetpack WindowManager</a> codelab: Learn how to implement tabletop posture for photography apps. Show the viewfinder on the top half of the screen (above the fold) and the controls on the bottom half (below the fold).</p></li> </ul> <h3 id="book_posture" data-text="Book posture" tabindex="-1">Book posture</h3> <p>Another unique foldable feature is book posture, where the device is half opened and the hinge is vertical. Book posture is great for reading e‑books. With a two‑page layout on a large screen foldable open like a bound book, book posture captures the experience of reading a real book.</p> <p>It can also be used for photography if you want to capture a different aspect ratio while taking pictures hands‑free.</p> <p>Implement book posture with the same techniques used for tabletop posture. The only difference is the code should check that the folding feature orientation is vertical instead of horizontal:</p> <div> <div class="ds-selector-tabs"><section><h3 id="kotlin" data-text="Kotlin" tabindex="-1">Kotlin</h3> <pre class="prettyprint lang-kotlin" translate="no" dir="ltr"> fun isBookPosture(foldFeature : FoldingFeature?) : Boolean { contract { returns(true) implies (foldFeature != null) } return foldFeature?.state == FoldingFeature.State.HALF_OPENED && foldFeature.orientation == FoldingFeature.Orientation.VERTICAL } </pre> </section><section><h3 id="java" data-text="Java" tabindex="-1">Java</h3> <pre class="prettyprint lang-java" translate="no" dir="ltr"> boolean isBookPosture(FoldingFeature foldFeature) { return (foldFeature != null) && (foldFeature.getState() == FoldingFeature.State.HALF_OPENED) && (foldFeature.getOrientation() == FoldingFeature.Orientation.VERTICAL); } </pre> </section></div></div> <aside class="note"><strong>Note:</strong><span> On foldable devices that have two screens separated by a hinge, use layouts designed for tabletop and book postures even if the <code translate="no" dir="ltr">FoldingFeature.State</code> is <code translate="no" dir="ltr">FLAT</code>. Don't place UI controls too close to a fold or hinge when <code translate="no" dir="ltr">isSeparating</code> is true because the controls can be difficult to reach. Use <code translate="no" dir="ltr">occlusionType</code> to decide whether to place content within the folding feature <code translate="no" dir="ltr">bounds</code>.</span></aside> <h2 id="window_size_changes" data-text="Window size changes" tabindex="-1">Window size changes</h2> <p>An app's display area can change as a result of a device configuration change, for example, when the device is folded or unfolded, rotated, or a window is resized in multi‑window mode.</p> <p>The Jetpack WindowManager <a href="/reference/kotlin/androidx/window/layout/WindowMetricsCalculator"><code translate="no" dir="ltr">WindowMetricsCalculator</code></a> class enables you to retrieve the current and maximum window metrics. Like the platform <a href="/reference/kotlin/android/view/WindowMetrics"><code translate="no" dir="ltr">WindowMetrics</code></a> introduced in API level 30, the <a href="/reference/kotlin/androidx/window/layout/WindowMetrics">WindowManager <code translate="no" dir="ltr">WindowMetrics</code></a> provide the window bounds, but the API is backward compatible down to API level 14.</p> <p>See <a href="/develop/ui/compose/layouts/adaptive/use-window-size-classes">Use window size classes</a>.</p> <h2 id="additional_resources" data-text="Additional resources" tabindex="-1">Additional resources</h2> <h3 id="samples" data-text="Samples" tabindex="-1">Samples</h3> <ul> <li>Jetpack <a href="https://github.com/android/platform-samples/tree/main/samples/user-interface/windowmanager" class="external">WindowManager</a>: Example of how to use the Jetpack WindowManager library</li> <li><a href="https://github.com/android/compose-samples/tree/main/Jetcaster" class="external">Jetcaster</a> : Tabletop posture implementation with Compose</li> </ul> <h3 id="codelabs" data-text="Codelabs" tabindex="-1">Codelabs</h3> <ul> <li><a href="/codelabs/android-window-manager-dual-screen-foldables#0">Support foldable and dual-screen devices with Jetpack WindowManager</a></li> <li><a href="/codelabs/android-camera-foldables#0">Optimize your camera app on foldable devices with Jetpack WindowManager</a></li> </ul> <devsite-hats-survey class="nocontent" hats-id="m71UDKaJT0kxBYCLVTd0U6CJGcqa" listnr-id="5207477"></devsite-hats-survey> </div> <div class="devsite-steps"> <div class="steps-previous steps-direction"> <a href="/develop/ui/compose/layouts/adaptive/foldables/learn-about-foldables" class="steps-link gc-analytics-event" data-category="Site-Wide Custom Events" data-action="Previous step" data-label="/develop/ui/compose/layouts/adaptive/foldables/learn-about-foldables"> <div class="steps-link-direction">Previous</div> <span class="steps-link-arrow steps-link-arrow-left material-icons" aria-hidden="true"> arrow_back </span> <span class="steps-link-title-previous steps-link-title"> Learn about foldables </span> </a> </div> <div class="steps-next steps-direction"> <a href="/develop/ui/compose/layouts/adaptive/foldables/support-foldable-display-modes" class="steps-link gc-analytics-event" data-category="Site-Wide Custom Events" data-action="Next step" data-label="/develop/ui/compose/layouts/adaptive/foldables/support-foldable-display-modes"> <div class="steps-link-direction">Next</div> <span class="steps-link-title-next steps-link-title"> Support foldable display modes </span> <span class="steps-link-arrow steps-link-arrow-right material-icons" aria-hidden="true"> arrow_forward </span> </a> </div> </div> <devsite-recommendations display="in-page" hidden yield> </devsite-recommendations> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <devsite-recommendations id="recommendations-link" yield></devsite-recommendations> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Content and code samples on this page are subject to the licenses described in the <a href="/license">Content License</a>. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.</p> <p>Last updated 2024-10-09 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-10-09 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> <nav class="devsite-footer-promos nocontent" aria-label="Promotions"> <ul class="devsite-footer-promos-list"> <li class="devsite-footer-promo"> <a href="//x.com/AndroidDev" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer X Promo" > <picture> <source class="devsite-dark-theme" srcset="https://developer.android.com/_static/android/images/logo-x_dt.svg" media="(prefers-color-scheme: dark)" loading="lazy" alt="X"> <img class="devsite-footer-promo-icon" src="/_static/android/images/logo-x.svg" loading="lazy" alt="X"> </picture> <span class="devsite-footer-promo-label"> X </span> </a> <div class="devsite-footer-promo-description">Follow @AndroidDev on X</div> </li> <li class="devsite-footer-promo"> <a href="//www.youtube.com/user/androiddevelopers" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer YouTube Promo" > <picture> <source class="devsite-dark-theme" srcset="https://developer.android.com/_static/android/images/logo-youtube_dt.svg" media="(prefers-color-scheme: dark)" loading="lazy" alt="YouTube"> <img class="devsite-footer-promo-icon" src="//www.gstatic.com/images/icons/material/product/2x/youtube_48dp.png" loading="lazy" alt="YouTube"> </picture> <span class="devsite-footer-promo-label"> YouTube </span> </a> <div class="devsite-footer-promo-description">Check out Android Developers on YouTube</div> </li> <li class="devsite-footer-promo"> <a href="//www.linkedin.com/showcase/androiddev" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer LinkedIn Promo" > <picture> <source class="devsite-dark-theme" srcset="https://developer.android.com/_static/android/images/logo-linkedin_dt.svg" media="(prefers-color-scheme: dark)" loading="lazy" alt="LinkedIn"> <img class="devsite-footer-promo-icon" src="/_static/android/images/logo-linkedin.svg" loading="lazy" alt="LinkedIn"> </picture> <span class="devsite-footer-promo-label"> LinkedIn </span> </a> <div class="devsite-footer-promo-description">Connect with the Android Developers community on LinkedIn</div> </li> </ul> </nav> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">More Android</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//www.android.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Android </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//www.android.com/enterprise/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Android for Enterprise </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//www.android.com/security-center/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Security </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//source.android.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Source </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/news" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > News </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//android-developers.googleblog.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)" > Blog </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/podcasts" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 7)" > Podcasts </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Discover</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/games" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Gaming </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/ml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Machine Learning </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/health-and-fitness" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Health & Fitness </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/media" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Camera & Media </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/privacy" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Privacy </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/training/connectivity/5g" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)" > 5G </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Android Devices</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/large-screens" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Large screens </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/wear" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Wear OS </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/chrome-os" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > ChromeOS devices </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/cars" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Android for cars </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/tv" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Android TV </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Releases</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/about/versions/15" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Android 15 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/about/versions/14" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Android 14 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/about/versions/13" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Android 13 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/about/versions/12" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Android 12 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/about/versions/11" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Android 11 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/about/versions/10" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)" > Android 10 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/about/versions/pie" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 7)" > Pie </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Documentation and Downloads</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/studio/intro" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Android Studio guide </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/guide" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Developers guides </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/reference" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > API reference </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/studio" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Download Studio </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/ndk" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Android NDK </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Support</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//issuetracker.google.com/issues/new?component=190923&template=841312" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Report platform bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//issuetracker.google.com/issues/new?component=192697" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Report documentation bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//support.google.com/googleplay/android-developer" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Google Play support </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://g.co/userresearch/androiddeveloperfooter" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Join research studies </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-sites" aria-label="Other Google Developers websites"> <a href="https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/lockup-google-for-developers-dark-theme.svg" media="(prefers-color-scheme: none)" class="devsite-dark-theme" loading="lazy" alt="Google Developers"> <img class="devsite-footer-sites-logo" src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/lockup-google-for-developers.svg" loading="lazy" alt="Google Developers"> </picture> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//developer.android.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link" > Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link" > Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//firebase.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link" > Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//cloud.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link" > Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="//developers.google.com/products/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link" > All products </a> </li> </ul> </nav> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="/license" data-category="Site-Wide Custom Events" data-label="Footer License link" > License </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="/distribute/marketing-tools/brand-guidelines" data-category="Site-Wide Custom Events" data-label="Footer Brand guidelines link" > Brand guidelines </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> <li class="devsite-footer-utility-item devsite-footer-utility-button"> <span class="devsite-footer-utility-description">Get news and tips by email</span> <a class="devsite-footer-utility-link gc-analytics-event" href="/updates" data-category="Site-Wide Custom Events" data-label="Footer Subscribe link" > Subscribe </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [{"id": "G-QFRN08RN6E", "purpose": 0}], "ga4p": [{"id": "G-QFRN08RN6E", "purpose": 0}], "gtm": [{"id": "GTM-KMSWPCJ", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Jetpack Compose", "signedIn": "False", "tenant": "android", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <android-fully-clickable target=" .android-case-study .devsite-landing-row-item, .android-grouped-resources .devsite-landing-row-item, .android-grouped-resources-primary .devsite-landing-row-item, .android-grouped-resources-secondary .devsite-landing-row-item, .android-guide-cards .devsite-landing-row-item, .android-illustrated-resources-index .devsite-landing-row-item, .android-illustrated-resources-primary .devsite-landing-row-item, .android-illustrated-resources-secondary .devsite-landing-row-item, .android-illustrated-resources-secondary-small .devsite-landing-row-item, .android-illustrated-resources-tertiary .devsite-landing-row-item, .android-illustrated-resources-tertiary-small .devsite-landing-row-item, .android-promo .devsite-landing-row-item, .android-quick-link, .android-samples .devsite-card-wrapper, .fully-clickable" watch=".android-samples, devsite-content"></android-fully-clickable> <script nonce="nU5B02jaoX7LvibpW8VdhqF6SAQs17"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/js/app_loader.js', '[3,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android","https://android-dot-devsite-v2-prod.appspot.com",null,null,["/_pwa/android/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/favicon.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500,600,700|Google+Sans+Text:400,400italic,500,500italic,600,600italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","developer.android.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Profiles__enable_page_saving","MiscFeatureFlags__developers_footer_image","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloudx_ping","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_dashboard_curated_recommendations","DevPro__enable_developer_subscriptions","Search__enable_page_map","MiscFeatureFlags__emergency_css","Cloud__enable_cloud_shell_fte_user_flow","Concierge__enable_pushui","Search__enable_ai_search_summaries","Cloud__enable_cloud_dlp_service","Cloud__enable_free_trial_server_call","Cloud__enable_cloudx_experiment_ids","DevPro__enable_cloud_innovators_plus","Cloud__enable_cloud_facet_chat","MiscFeatureFlags__enable_firebase_utm","Profiles__enable_profile_collections","Experiments__reqs_query_experiments","MiscFeatureFlags__enable_explain_this_code","Significatio__enable_by_tenant","Profiles__enable_complete_playlist_endpoint","Profiles__enable_release_notes_notifications","Cloud__enable_cloud_shell","MiscFeatureFlags__enable_dark_theme","CloudShell__cloud_code_overflow_menu","MiscFeatureFlags__enable_project_variables","Search__enable_suggestions_from_borg","CloudShell__cloud_shell_button","TpcFeatures__enable_required_headers","Cloud__enable_legacy_calculator_redirect","Profiles__enable_recognition_badges","BookNav__enable_tenant_cache_key","MiscFeatureFlags__enable_view_transitions","Profiles__enable_public_developer_profiles","Search__enable_ai_eligibility_checks","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_variable_operator","Profiles__enable_completecodelab_endpoint","Cloud__enable_llm_concierge_chat","Profiles__require_profile_eligibility_for_signin","EngEduTelemetry__enable_engedu_telemetry","Analytics__enable_clearcut_logging","Profiles__enable_developer_profiles_callout","Profiles__enable_awarding_url"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://developerscontentserving-pa.googleapis.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[3,"android","Android Developers","developer.android.com",null,"android-dot-devsite-v2-prod.appspot.com",null,null,[null,1,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],[1,null,null,[1,20],"/recommendations"],null,null,null,[1,null,1],[1,1,null,1,1]],null,[18,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,null,null,null,null,null,null,null,null,null,null,1,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[6,1,14,15,20,22,23,28,29,37,43],null,[[null,null,1],[1,1]],[[null,null,null,null,null,null,null,[["G-QFRN08RN6E"],null,null,[["G-QFRN08RN6E",1]]],null,null,null,null,1],null,[[1,1],[2,2]]],null,4,null,null,null,null,null,null,null,null,null,null,null,null,null,"android.devsite.google"],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Make your app fold aware | Jetpack Compose | Android Developers