Thinking in Compose | 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/mental-model"><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/mental-model" /><link rel="alternate" hreflang="x-default" href="https://developer.android.com/develop/ui/compose/mental-model" /><link rel="alternate" hreflang="ar" href="https://developer.android.com/develop/ui/compose/mental-model?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.android.com/develop/ui/compose/mental-model?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.android.com/develop/ui/compose/mental-model?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.android.com/develop/ui/compose/mental-model?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://developer.android.com/develop/ui/compose/mental-model?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.android.com/develop/ui/compose/mental-model?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.android.com/develop/ui/compose/mental-model?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.android.com/develop/ui/compose/mental-model?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.android.com/develop/ui/compose/mental-model?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.android.com/develop/ui/compose/mental-model?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.android.com/develop/ui/compose/mental-model?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.android.com/develop/ui/compose/mental-model?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.android.com/develop/ui/compose/mental-model?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.android.com/develop/ui/compose/mental-model?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.android.com/develop/ui/compose/mental-model?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.android.com/develop/ui/compose/mental-model?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.android.com/develop/ui/compose/mental-model?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.android.com/develop/ui/compose/mental-model?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.android.com/develop/ui/compose/mental-model?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.android.com/develop/ui/compose/mental-model?hl=vi" /><title>Thinking in Compose  |  Jetpack Compose  |  Android Developers</title> <meta property="og:title" content="Thinking in Compose  |  Jetpack Compose  |  Android Developers"><meta property="og:url" content="https://developer.android.com/develop/ui/compose/mental-model"><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": "Thinking in Compose" } </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": "Thinking in Compose", "item": "https://developer.android.com/develop/ui/compose/mental-model" }] } </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"> Thinking in Compose </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 "> <div class="video-wrapper"> <iframe class="devsite-embedded-youtube-video" data-video-id="4zf30a34OOA" data-autohide="1" data-showinfo="0" allowfullscreen> </iframe> </div> <p>Jetpack Compose is a modern declarative UI Toolkit for Android. Compose makes it easier to write and maintain your app UI by providing a <em>declarative API</em> that allows you to render your app UI without imperatively mutating frontend views. This terminology needs some explanation, but the implications are important for your app design.</p> <h2 id="paradigm" data-text="The declarative programming paradigm" tabindex="-1">The declarative programming paradigm</h2> <p>Historically, an Android view hierarchy has been representable as a tree of UI widgets. As the state of the app changes because of things like user interactions, the UI hierarchy needs to be updated to display the current data. The most common way of updating the UI is to walk the tree using functions like <a href="/reference/android/view/View#findViewById(int)"><code translate="no" dir="ltr">findViewById()</code></a>, and change nodes by calling methods like <code translate="no" dir="ltr">button.setText(String)</code>, <code translate="no" dir="ltr">container.addChild(View)</code>, or <code translate="no" dir="ltr">img.setImageBitmap(Bitmap)</code>. These methods change the internal state of the widget.</p> <p>Manipulating views manually increases the likelihood of errors. If a piece of data is rendered in multiple places, it’s easy to forget to update one of the views that shows it. It’s also easy to create illegal states, when two updates conflict in an unexpected way. For example, an update might try to set a value of a node that was just removed from the UI. In general, the software maintenance complexity grows with the number of views that require updating.</p> <p>Over the last several years, the entire industry has started shifting to a declarative UI model, which greatly simplifies the engineering associated with building and updating user interfaces. The technique works by conceptually regenerating the entire screen from scratch, then applying only the necessary changes. This approach avoids the complexity of manually updating a stateful view hierarchy. Compose is a declarative UI framework.</p> <p>One challenge with regenerating the entire screen is that it is potentially expensive, in terms of time, computing power, and battery usage. To mitigate this cost, Compose intelligently chooses which parts of the UI need to be redrawn at any given time. This does have some implications for how you design your UI components, as discussed in <a href="#recomposition">Recomposition</a>.</p> <h2 id="simple-example" data-text="A simple composable function" tabindex="-1">A simple composable function</h2> <p>Using Compose, you can build your user interface by defining a set of <em>composable</em> functions that take in data and emit UI elements. A simple example is a <code translate="no" dir="ltr">Greeting</code> widget, which takes in a <code translate="no" dir="ltr">String</code> and emits a <code translate="no" dir="ltr">Text</code> widget which displays a greeting message.</p> <p><img src="/static/develop/ui/compose/images/mmodel-simple.png" alt="A screenshot of a phone showing the text "Hello World", and the code for the simple Composable function that generates that UI" width="500"> </p> <p><strong>Figure 1.</strong> A simple composable function that is passed data and uses it to render a text widget on the screen.</p> <p>A few noteworthy things about this function:</p> <ul> <li><p>The function is annotated with the <code translate="no" dir="ltr">@Composable</code> annotation. All Composable functions must have this annotation; this annotation informs the Compose compiler that this function is intended to convert data into UI.</p></li> <li><p>The function takes in data. Composable functions can accept parameters, which allow the app logic to describe the UI. In this case, our widget accepts a <code translate="no" dir="ltr">String</code> so it can greet the user by name.</p></li> <li><p>The function displays text in the UI. It does so by calling the <code translate="no" dir="ltr">Text()</code> composable function, which actually creates the text UI element. Composable functions emit UI hierarchy by calling other composable functions.</p></li> <li><p>The function doesn't return anything. Compose functions that emit UI do not need to return anything, because they describe the desired screen state instead of constructing UI widgets.</p></li> <li><p>This function is fast, <a href="https://en.wikipedia.org/wiki/Idempotence#Computer_science_meaning" class="external">idempotent</a>, and free of <em>side-effects</em>.</p> <ul> <li>The function behaves the same way when called multiple times with the same argument, and it does not use other values such as global variables or calls to <code translate="no" dir="ltr">random()</code>.</li> <li>The function describes the UI without any side-effects, such as modifying properties or global variables.</li> </ul> <p>In general, all composable functions should be written with these properties, for reasons discussed in <a href="#recomposition">Recomposition</a>.</p></li> </ul> <h2 id="paradigm" data-text="The declarative paradigm shift" tabindex="-1">The declarative paradigm shift</h2> <p>With many imperative object-oriented UI toolkits, you initialize the UI by instantiating a tree of widgets. You often do this by inflating an XML layout file. Each widget maintains its own internal state, and exposes getter and setter methods that allow the app logic to interact with the widget.</p> <p>In Compose's declarative approach, widgets are relatively stateless and don't expose setter or getter functions. In fact, widgets are not exposed as objects. You update the UI by calling the same composable function with different arguments. This makes it easy to provide state to architectural patterns such as a <a href="/reference/androidx/lifecycle/ViewModel"><code translate="no" dir="ltr">ViewModel</code></a>, as described in the <a href="/jetpack/guide">Guide to app architecture</a>. Then, your composables are responsible for transforming the current application state into a UI every time the observable data updates.</p> <p><img src="/static/develop/ui/compose/images/mmodel-flow-data.png" alt="Illustration of the flow of data in a Compose UI, from high-level objects down to their children." width="500"> </p> <p><strong>Figure 2.</strong> The app logic provides data to the top-level composable function. That function uses the data to describe the UI by calling other composables, and passes the appropriate data to those composables, and on down the hierarchy.</p> <p>When the user interacts with the UI, the UI raises events such as <code translate="no" dir="ltr">onClick</code>. Those events should notify the app logic, which can then change the app's state. When the state changes, the composable functions are called again with the new data. This causes the UI elements to be redrawn--this process is called <em>recomposition</em>.</p> <p><img src="/static/develop/ui/compose/images/mmodel-flow-events.png" alt="Illustration of how UI elements respond to interaction, by triggering events that are handled by the app logic." width="500"> </p> <p><strong>Figure 3.</strong> The user interacted with a UI element, causing an event to be triggered. The app logic responds to the event, then the composable functions are automatically called again with new parameters, if necessary.</p> <h2 id="dynamic" data-text="Dynamic content" tabindex="-1">Dynamic content</h2> <p>Because composable functions are written in Kotlin instead of XML, they can be as dynamic as any other Kotlin code. For example, suppose you want to build a UI that greets a list of users:</p> <p> <pre id="android_compose_thinking_in_compose_dynamic_content-code-sample" data-scope="android_compose_thinking_in_compose_dynamic_content" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt" data-region-tag="android_compose_thinking_in_compose_dynamic_content" data-copy-event-label="android_compose_thinking_in_compose_dynamic_content-ThinkingInComposeSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun Greeting(names: List<String>) { for (name in names) { Text("Hello $name") } }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/f4e49876ac3fad90376323fa23b6991581d547c7/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt#L37-L42" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt#android_compose_thinking_in_compose_dynamic_content" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt" data-region-tag="android_compose_thinking_in_compose_dynamic_content">ThinkingInComposeSnippets.kt</a></div></pre></p> <p>This function takes in a list of names and generates a greeting for each user. Composable functions can be quite sophisticated. You can use <code translate="no" dir="ltr">if</code> statements to decide if you want to show a particular UI element. You can use loops. You can call helper functions. You have the full flexibility of the underlying language. This power and flexibility is one of the key advantages of Jetpack Compose.</p> <h2 id="recomposition" data-text="Recomposition" tabindex="-1">Recomposition</h2> <p>In an imperative UI model, to change a widget, you call a setter on the widget to change its internal state. In Compose, you call the composable function again with new data. Doing so causes the function to be <em>recomposed</em>--the widgets emitted by the function are redrawn, if necessary, with new data. The Compose framework can intelligently recompose only the components that changed.</p> <p>For example, consider this composable function which displays a button:</p> <p> <pre id="android_compose_thinking_in_compose_recomposition-code-sample" data-scope="android_compose_thinking_in_compose_recomposition" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt" data-region-tag="android_compose_thinking_in_compose_recomposition" data-copy-event-label="android_compose_thinking_in_compose_recomposition-ThinkingInComposeSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun ClickCounter(clicks: Int, onClick: () -> Unit) { Button(onClick = onClick) { Text("I've been clicked $clicks times") } }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/f4e49876ac3fad90376323fa23b6991581d547c7/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt#L46-L51" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt#android_compose_thinking_in_compose_recomposition" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt" data-region-tag="android_compose_thinking_in_compose_recomposition">ThinkingInComposeSnippets.kt</a></div></pre></p> <p>Every time the button is clicked, the caller updates the value of <code translate="no" dir="ltr">clicks</code>. Compose calls the lambda with the <code translate="no" dir="ltr">Text</code> function again to show the new value; this process is called <em>recomposition</em>. Other functions that don't depend on the value are not recomposed.</p> <p>As we discussed, recomposing the entire UI tree can be computationally expensive, which uses computing power and battery life. Compose solves this problem with this <em>intelligent recomposition</em>.</p> <p>Recomposition is the process of calling your composable functions again when inputs change. This happens when the function's inputs change. When Compose recomposes based on new inputs, it only calls the functions or lambdas that might have changed, and skips the rest. By skipping all functions or lambdas that don't have changed parameters, Compose can recompose efficiently.</p> <p>Never depend on side-effects from executing composable functions, since a function's recomposition may be skipped. If you do, users may experience strange and unpredictable behavior in your app. A side-effect is any change that is visible to the rest of your app. For example, these actions are all dangerous side-effects:</p> <ul> <li>Writing to a property of a shared object</li> <li>Updating an observable in <code translate="no" dir="ltr">ViewModel</code></li> <li>Updating shared preferences</li> </ul> <p>Composable functions might be re-executed as often as every frame, such as when an animation is being rendered. Composable functions should be fast to avoid jank during animations. If you need to do expensive operations, such as reading from shared preferences, do it in a background coroutine and pass the value result to the composable function as a parameter.</p> <p>As an example, this code creates a composable to update a value in <code translate="no" dir="ltr">SharedPreferences</code>. The composable shouldn't read or write from shared preferences itself. Instead, this code moves the read and write to a <code translate="no" dir="ltr">ViewModel</code> in a background coroutine. The app logic passes the current value with a callback to trigger an update.</p> <p> <pre id="android_compose_thinking_in_compose_recomposition_logic-code-sample" data-scope="android_compose_thinking_in_compose_recomposition_logic" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt" data-region-tag="android_compose_thinking_in_compose_recomposition_logic" data-copy-event-label="android_compose_thinking_in_compose_recomposition_logic-ThinkingInComposeSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun SharedPrefsToggle( text: String, value: Boolean, onValueChanged: (Boolean) -> Unit ) { Row { Text(text) Checkbox(checked = value, onCheckedChange = onValueChanged) } }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/f4e49876ac3fad90376323fa23b6991581d547c7/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt#L55-L65" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt#android_compose_thinking_in_compose_recomposition_logic" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt" data-region-tag="android_compose_thinking_in_compose_recomposition_logic">ThinkingInComposeSnippets.kt</a></div></pre></p> <p>This document discusses a number of things to be aware of when you use Compose:</p> <ul> <li>Recomposition skips as many composable functions and lambdas as possible.</li> <li>Recomposition is optimistic and may be canceled.</li> <li>A composable function might be run quite frequently, as often as every frame of an animation.</li> <li>Composable functions can execute in parallel.</li> <li>Composable functions can execute in any order.</li> </ul> <p>The following sections will cover how to build composable functions to support recomposition. In every case, the best practice is to keep your composable functions fast, idempotent, and side-effect free.</p> <h3 id="skips" data-text="Recomposition skips as much as possible" tabindex="-1">Recomposition skips as much as possible</h3> <p>When portions of your UI are invalid, Compose does its best to recompose just the portions that need to be updated. This means it may skip to re-run a single Button's composable without executing any of the composables above or below it in the UI tree.</p> <p>Every composable function and lambda might recompose by itself. Here's an example that demonstrates how recomposition can skip some elements when rendering a list:</p> <p> <pre id="android_compose_thinking_in_compose_skips-code-sample" data-scope="android_compose_thinking_in_compose_skips" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt" data-region-tag="android_compose_thinking_in_compose_skips" data-copy-event-label="android_compose_thinking_in_compose_skips-ThinkingInComposeSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">/** * Display a list of names the user can click with a header */ @Composable fun NamePicker( header: String, names: List<String>, onNameClicked: (String) -> Unit ) { Column { // this will recompose when [header] changes, but not when [names] changes Text(header, style = MaterialTheme.typography.bodyLarge) HorizontalDivider() // LazyColumn is the Compose version of a RecyclerView. // The lambda passed to items() is similar to a RecyclerView.ViewHolder. LazyColumn { items(names) { name -> // When an item's [name] updates, the adapter for that item // will recompose. This will not recompose when [header] changes NamePickerItem(name, onNameClicked) } } } } /** * Display a single name the user can click. */ @Composable private fun NamePickerItem(name: String, onClicked: (String) -> Unit) { Text(name, Modifier.clickable(onClick = { onClicked(name) })) }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/f4e49876ac3fad90376323fa23b6991581d547c7/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt#L130-L162" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt#android_compose_thinking_in_compose_skips" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt" data-region-tag="android_compose_thinking_in_compose_skips">ThinkingInComposeSnippets.kt</a></div></pre></p> <p>Each of these scopes might be the only thing to execute during a recomposition. Compose might skip to the <code translate="no" dir="ltr">Column</code> lambda without executing any of its parents when the <code translate="no" dir="ltr">header</code> changes. And when executing <code translate="no" dir="ltr">Column</code>, Compose might choose to skip the <code translate="no" dir="ltr">LazyColumn</code>'s items if <code translate="no" dir="ltr">names</code> didn't change.</p> <p>Again, executing all composable functions or lambdas should be side-effect free. When you need to perform a side-effect, trigger it from a callback.</p> <h3 id="optimistic" data-text="Recomposition is optimistic" tabindex="-1">Recomposition is optimistic</h3> <p>Recomposition starts whenever Compose thinks that the parameters of a composable might have changed. Recomposition is <em>optimistic,</em> which means Compose expects to finish recomposition before the parameters change again. If a parameter <em>does</em> change before recomposition finishes, Compose might cancel the recomposition and restart it with the new parameter.</p> <p>When recomposition is canceled, Compose discards the UI tree from the recomposition. If you have any side-effects that depend on the UI being displayed, the side-effect will be applied even if composition is canceled. This can lead to inconsistent app state.</p> <p>Ensure that all composable functions and lambdas are idempotent and side-effect free to handle optimistic recomposition.</p> <h3 id="frequent" data-text="Composable functions might run quite frequently" tabindex="-1">Composable functions might run quite frequently</h3> <p>In some cases, a composable function might run for every frame of a UI animation. If the function performs expensive operations, like reading from device storage, the function can cause UI jank.</p> <p>For example, if your widget tried to read device settings, it could potentially read those settings hundreds of times a second, with disastrous effects on your app's performance.</p> <p>If your composable function needs data, it should define parameters for the data. You can then move expensive work to another thread, outside of composition, and pass the data to Compose using <code translate="no" dir="ltr">mutableStateOf</code> or <code translate="no" dir="ltr">LiveData</code>.</p> <h3 id="parallel" data-text="Composable functions could be run in parallel" tabindex="-1">Composable functions could be run in parallel</h3> <aside class="note"><strong>Note:</strong><span> Composable functions cannot currently be run in parallel, but you should write Compose code in a multithreaded way. In the future, Compose may be multithreaded.</span></aside> <p>Compose could optimize recomposition by running composable functions in parallel. This would let Compose take advantage of multiple cores, and run composable functions not on the screen at a lower priority.</p> <p>This optimization would mean a composable function might execute within a pool of background threads. If a composable function calls a function on a <code translate="no" dir="ltr">ViewModel</code>, Compose might call that function from several threads at the same time.</p> <p>To ensure your application behaves correctly, all composable functions should have no side-effects. Instead, trigger side-effects from callbacks such as <code translate="no" dir="ltr">onClick</code> that always execute on the UI thread.</p> <p>When a composable function is invoked, the invocation might occur on a different thread from the caller. That means code that modifies variables in a composable lambda should be avoided–both because such code is not thread-safe, and because it is an impermissible side-effect of the composable lambda.</p> <p>Here's an example showing a composable that displays a list and its count:</p> <p> <pre id="android_compose_thinking_in_compose_parallel-code-sample" data-scope="android_compose_thinking_in_compose_parallel" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt" data-region-tag="android_compose_thinking_in_compose_parallel" data-copy-event-label="android_compose_thinking_in_compose_parallel-ThinkingInComposeSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun ListComposable(myList: List<String>) { Row(horizontalArrangement = Arrangement.SpaceBetween) { Column { for (item in myList) { Text("Item: $item") } } Text("Count: ${myList.size}") } }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/f4e49876ac3fad90376323fa23b6991581d547c7/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt#L97-L107" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt#android_compose_thinking_in_compose_parallel" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt" data-region-tag="android_compose_thinking_in_compose_parallel">ThinkingInComposeSnippets.kt</a></div></pre></p> <p>This code is side-effect free, and transforms the input list to UI. This is great code for displaying a small list. However, if the function writes to a local variable, this code won't be thread-safe or correct:</p> <p> <pre id="android_compose_thinking_in_compose_incorrect-code-sample" data-scope="android_compose_thinking_in_compose_incorrect" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt" data-region-tag="android_compose_thinking_in_compose_incorrect" data-copy-event-label="android_compose_thinking_in_compose_incorrect-ThinkingInComposeSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun ListWithBug(myList: List<String>) { var items = 0 Row(horizontalArrangement = Arrangement.SpaceBetween) { Column { for (item in myList) { Card { Text("Item: $item") items++ // Avoid! Side-effect of the column recomposing. } } } Text("Count: $items") } }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/f4e49876ac3fad90376323fa23b6991581d547c7/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt#L111-L126" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt#android_compose_thinking_in_compose_incorrect" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt" data-region-tag="android_compose_thinking_in_compose_incorrect">ThinkingInComposeSnippets.kt</a></div></pre></p> <p>In this example, <code translate="no" dir="ltr">items</code> is modified with every recomposition. That could be every frame of an animation, or when the list updates. Either way, the UI will display the wrong count. Because of this, writes like this are not supported in Compose; by prohibiting those writes, we allow the framework to change threads to execute composable lambdas.</p> <h3 id="any-order" data-text="Composable functions can execute in any order" tabindex="-1">Composable functions can execute in any order</h3> <aside class="note"><strong>Note:</strong><span> Compose operates on the main thread, but it has been designed from the start with multithreading in mind and we don't guarantee a single threaded model will remain in the future. Because of this, you should always write your composables as if they can be run on multiple threads.</span></aside> <p>If you look at the code for a composable function, you might assume that the code is run in the order it appears. But this isn't guaranteed to be true. If a composable function contains calls to other composable functions, those functions might run in any order. Compose has the option of recognizing that some UI elements are higher priority than others, and drawing them first.</p> <p>For example, suppose you have code like this to draw three screens in a tab layout:</p> <p> <pre id="android_compose_thinking_in_compose_order-code-sample" data-scope="android_compose_thinking_in_compose_order" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt" data-region-tag="android_compose_thinking_in_compose_order" data-copy-event-label="android_compose_thinking_in_compose_order-ThinkingInComposeSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun ButtonRow() { MyFancyNavigation { StartScreen() MiddleScreen() EndScreen() } }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/f4e49876ac3fad90376323fa23b6991581d547c7/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt#L86-L93" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt#android_compose_thinking_in_compose_order" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/mentalmodel/ThinkingInComposeSnippets.kt" data-region-tag="android_compose_thinking_in_compose_order">ThinkingInComposeSnippets.kt</a></div></pre></p> <p>The calls to <code translate="no" dir="ltr">StartScreen</code>, <code translate="no" dir="ltr">MiddleScreen</code>, and <code translate="no" dir="ltr">EndScreen</code> might happen in any order. This means you can't, for example, have <code translate="no" dir="ltr">StartScreen()</code> set some global variable (a side-effect) and have <code translate="no" dir="ltr">MiddleScreen()</code> take advantage of that change. Instead, each of those functions needs to be self-contained.</p> <h2 id="learn_more" data-text="Learn more" tabindex="-1">Learn more</h2> <p>To learn more about how to think in Compose and composable functions, check out the following additional resources.</p> <h3 id="videos" data-text="Videos" tabindex="-1">Videos</h3> <ul> <li><a href="https://www.youtube.com/watch?v=fFLBCgoHHys">Composable functions - MAD Skills</a></li> </ul> <devsite-recommendations> <h2 id="recommended_for_you" data-text="Recommended for you" tabindex="-1">Recommended for you</h2> <ul> <li>Note: link text is displayed when JavaScript is off</li> <li><a href="/develop/ui/compose/kotlin">Kotlin for Jetpack Compose</a></li> <li><a href="/develop/ui/compose/state">State and Jetpack Compose</a></li> <li><a href="/develop/ui/compose/layering">Jetpack Compose architectural layering</a></li> </ul> </devsite-recommendations> <devsite-hats-survey class="nocontent" hats-id="m71UDKaJT0kxBYCLVTd0U6CJGcqa" listnr-id="5207477"></devsite-hats-survey> </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-11-12 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-11-12 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="5Jk+IotbE2JUOrX0zOawLJjPKFhOH9"> (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,["Experiments__reqs_query_experiments","Profiles__enable_completecodelab_endpoint","Profiles__enable_complete_playlist_endpoint","Profiles__require_profile_eligibility_for_signin","MiscFeatureFlags__enable_explain_this_code","CloudShell__cloud_code_overflow_menu","MiscFeatureFlags__enable_firebase_utm","Cloud__enable_cloud_dlp_service","Analytics__enable_clearcut_logging","Search__enable_page_map","Profiles__enable_profile_collections","Search__enable_ai_eligibility_checks","Concierge__enable_pushui","Profiles__enable_developer_profiles_callout","CloudShell__cloud_shell_button","DevPro__enable_cloud_innovators_plus","Profiles__enable_page_saving","Profiles__enable_release_notes_notifications","MiscFeatureFlags__enable_dark_theme","Significatio__enable_by_tenant","TpcFeatures__enable_mirror_tenant_redirects","Cloud__enable_free_trial_server_call","Search__enable_dynamic_content_confidential_banner","Search__enable_ai_search_summaries","Cloud__enable_cloudx_experiment_ids","Cloud__enable_cloud_shell","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__enable_project_variables","EngEduTelemetry__enable_engedu_telemetry","Profiles__enable_awarding_url","Cloud__enable_legacy_calculator_redirect","MiscFeatureFlags__emergency_css","Cloud__enable_llm_concierge_chat","Profiles__enable_dashboard_curated_recommendations","TpcFeatures__enable_required_headers","Cloud__enable_cloudx_ping","MiscFeatureFlags__enable_view_transitions","Cloud__enable_cloud_shell_fte_user_flow","MiscFeatureFlags__enable_variable_operator","MiscFeatureFlags__developers_footer_dark_image","DevPro__enable_developer_subscriptions","Cloud__enable_cloud_facet_chat","Profiles__enable_public_developer_profiles","BookNav__enable_tenant_cache_key","Search__enable_suggestions_from_borg","Profiles__enable_recognition_badges"],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,[[2,2],[1,1]]],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

Thinking in Compose | Jetpack Compose | Android Developers