CINXE.COM
Side-effects in Compose | Jetpack Compose | Android Developers
<!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/side-effects"><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/side-effects" /><link rel="alternate" hreflang="x-default" href="https://developer.android.com/develop/ui/compose/side-effects" /><link rel="alternate" hreflang="ar" href="https://developer.android.com/develop/ui/compose/side-effects?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.android.com/develop/ui/compose/side-effects?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.android.com/develop/ui/compose/side-effects?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.android.com/develop/ui/compose/side-effects?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://developer.android.com/develop/ui/compose/side-effects?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.android.com/develop/ui/compose/side-effects?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.android.com/develop/ui/compose/side-effects?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.android.com/develop/ui/compose/side-effects?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.android.com/develop/ui/compose/side-effects?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.android.com/develop/ui/compose/side-effects?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.android.com/develop/ui/compose/side-effects?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.android.com/develop/ui/compose/side-effects?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.android.com/develop/ui/compose/side-effects?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.android.com/develop/ui/compose/side-effects?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.android.com/develop/ui/compose/side-effects?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.android.com/develop/ui/compose/side-effects?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.android.com/develop/ui/compose/side-effects?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.android.com/develop/ui/compose/side-effects?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.android.com/develop/ui/compose/side-effects?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.android.com/develop/ui/compose/side-effects?hl=vi" /><title>Side-effects in Compose | Jetpack Compose | Android Developers</title> <meta property="og:title" content="Side-effects in Compose | Jetpack Compose | Android Developers"><meta property="og:url" content="https://developer.android.com/develop/ui/compose/side-effects"><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": "Side-effects 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": "Side-effects in Compose", "item": "https://developer.android.com/develop/ui/compose/side-effects" }] } </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"> Side-effects 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 "> <p>A <strong>side-effect</strong> is a change to the state of the app that happens outside the scope of a composable function. Due to composables' lifecycle and properties such as unpredictable recompositions, executing recompositions of composables in different orders, or recompositions that can be discarded, composables <a href="/develop/ui/compose/mental-model">should ideally be side-effect free</a>.</p> <p>However, sometimes side-effects are necessary, for example, to trigger a one-off event such as showing a snackbar or navigate to another screen given a certain state condition. These actions should be called from a controlled environment that is aware of the lifecycle of the composable. In this page, you'll learn about the different side-effect APIs Jetpack Compose offers.</p> <h2 id="state-effect-use-cases" data-text="State and effect use cases" tabindex="-1">State and effect use cases</h2> <p>As covered in the <a href="/develop/ui/compose/mental-model">Thinking in Compose</a> documentation, composables should be side-effect free. When you need to make changes to the state of the app (as described in the <a href="/develop/ui/compose/state">Managing state documentation</a> doc), <strong>you should use the Effect APIs so that those side effects are executed in a predictable manner</strong>.</p> <aside class="key-term"><strong>Key Term:</strong><span> An <strong>effect</strong> is a composable function that doesn't emit UI and causes side effects to run when a composition completes.</span></aside> <p>Due to the different possibilities effects open up in Compose, they can be easily overused. Make sure that the work you do in them is UI related and doesn't break <strong>unidirectional data flow</strong> as explained in the <a href="/develop/ui/compose/state#unidirectional-data-flow-in-jetpack-compose">Managing state documentation</a>.</p> <aside class="note"><strong>Note:</strong><span> A responsive UI is inherently asynchronous, and Jetpack Compose solves this by embracing coroutines at the API level instead of using callbacks. To learn more about coroutines, check out the <a href="/kotlin/coroutines">Kotlin coroutines on Android</a> guide.</span></aside> <h3 id="launchedeffect" data-text="LaunchedEffect: run suspend functions in the scope of a composable" tabindex="-1"><code translate="no" dir="ltr">LaunchedEffect</code>: run suspend functions in the scope of a composable</h3> <p>To perform work over the life of a composable and have the ability to call suspend functions, use the <a href="/reference/kotlin/androidx/compose/runtime/package-summary#LaunchedEffect(kotlin.Any,kotlin.coroutines.SuspendFunction1)"><code translate="no" dir="ltr">LaunchedEffect</code></a> composable. When <code translate="no" dir="ltr">LaunchedEffect</code> enters the Composition, it launches a coroutine with the block of code passed as a parameter. The coroutine will be cancelled if <code translate="no" dir="ltr">LaunchedEffect</code> leaves the composition. If <code translate="no" dir="ltr">LaunchedEffect</code> is recomposed with different keys (see the <a href="#restarting-effects">Restarting Effects</a> section below), the existing coroutine will be cancelled and the new suspend function will be launched in a new coroutine.</p> <p>For example, here is an animation that pulses the alpha value with a configurable delay:</p> <p> <pre id="android_compose_side_effects_launchedeffect-code-sample" data-scope="android_compose_side_effects_launchedeffect" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_launchedeffect" data-copy-event-label="android_compose_side_effects_launchedeffect-SideEffectsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">// Allow the pulse rate to be configured, so it can be sped up if the user is running // out of time var pulseRateMs by remember { mutableStateOf(3000L) } val alpha = remember { Animatable(1f) } LaunchedEffect(pulseRateMs) { // Restart the effect when the pulse rate changes while (isActive) { delay(pulseRateMs) // Pulse the alpha every pulseRateMs to alert the user alpha.animateTo(0f) alpha.animateTo(1f) } }<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/sideeffects/SideEffectsSnippets.kt#L60-L70" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt#android_compose_side_effects_launchedeffect" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_launchedeffect">SideEffectsSnippets.kt</a></div></pre></p> <p>In the code above, the animation uses the suspending function <a href="https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines/delay.html"><code translate="no" dir="ltr">delay</code></a> to wait the set amount of time. Then, it sequentially animates the alpha to zero and back again using <a href="https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Animatable#animateTo(kotlin.Any,androidx.compose.animation.core.AnimationSpec,kotlin.Any,kotlin.Function1)"><code translate="no" dir="ltr">animateTo</code></a>. This will repeat for the life of the composable.</p> <h3 id="remembercoroutinescope" data-text="rememberCoroutineScope: obtain a composition-aware scope to launch a coroutine outside a composable" tabindex="-1"><code translate="no" dir="ltr">rememberCoroutineScope</code>: obtain a composition-aware scope to launch a coroutine outside a composable</h3> <p>As <code translate="no" dir="ltr">LaunchedEffect</code> is a composable function, it can only be used inside other composable functions. In order to launch a coroutine outside of a composable, but scoped so that it will be automatically canceled once it leaves the composition, use <a href="/reference/kotlin/androidx/compose/runtime/package-summary#rememberCoroutineScope(kotlin.Function0)"><code translate="no" dir="ltr">rememberCoroutineScope</code></a>. Also use <code translate="no" dir="ltr">rememberCoroutineScope</code> whenever you need to control the lifecycle of one or more coroutines manually, for example, cancelling an animation when a user event happens.</p> <p><code translate="no" dir="ltr">rememberCoroutineScope</code> is a composable function that returns a <code translate="no" dir="ltr">CoroutineScope</code> bound to the point of the Composition where it's called. The scope will be cancelled when the call leaves the Composition.</p> <p>Following the previous example, you could use this code to show a <code translate="no" dir="ltr">Snackbar</code> when the user taps on a <code translate="no" dir="ltr">Button</code>:</p> <p> <pre id="android_compose_side_effects_remembercoroutinescope-code-sample" data-scope="android_compose_side_effects_remembercoroutinescope" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_remembercoroutinescope" data-copy-event-label="android_compose_side_effects_remembercoroutinescope-SideEffectsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun MoviesScreen(snackbarHostState: SnackbarHostState) { // Creates a CoroutineScope bound to the MoviesScreen's lifecycle val scope = rememberCoroutineScope() Scaffold( snackbarHost = { SnackbarHost(hostState = snackbarHostState) } ) { contentPadding -> Column(Modifier.padding(contentPadding)) { Button( onClick = { // Create a new coroutine in the event handler to show a snackbar scope.launch { snackbarHostState.showSnackbar("Something happened!") } } ) { Text("Press me") } } } }<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/sideeffects/SideEffectsSnippets.kt#L81-L105" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt#android_compose_side_effects_remembercoroutinescope" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_remembercoroutinescope">SideEffectsSnippets.kt</a></div></pre></p> <h3 id="rememberupdatedstate" data-text="rememberUpdatedState: reference a value in an effect that shouldn't restart if the value changes" tabindex="-1"><code translate="no" dir="ltr">rememberUpdatedState</code>: reference a value in an effect that shouldn't restart if the value changes</h3> <p><code translate="no" dir="ltr">LaunchedEffect</code> restarts when one of the key parameters changes. However, in some situations you might want to capture a value in your effect that, if it changes, you do not want the effect to restart. In order to do this, it is required to use <code translate="no" dir="ltr">rememberUpdatedState</code> to create a reference to this value which can be captured and updated. This approach is helpful for effects that contain long-lived operations that may be expensive or prohibitive to recreate and restart.</p> <p>For example, suppose your app has a <code translate="no" dir="ltr">LandingScreen</code> that disappears after some time. Even if <code translate="no" dir="ltr">LandingScreen</code> is recomposed, the effect that waits for some time and notifies that the time passed shouldn't be restarted:</p> <p> <pre id="android_compose_side_effects_rememberupdatedstate-code-sample" data-scope="android_compose_side_effects_rememberupdatedstate" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_rememberupdatedstate" data-copy-event-label="android_compose_side_effects_rememberupdatedstate-SideEffectsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun LandingScreen(onTimeout: () -> Unit) { // This will always refer to the latest onTimeout function that // LandingScreen was recomposed with val currentOnTimeout by rememberUpdatedState(onTimeout) // Create an effect that matches the lifecycle of LandingScreen. // If LandingScreen recomposes, the delay shouldn't start again. LaunchedEffect(true) { delay(SplashWaitTimeMillis) currentOnTimeout() } /* Landing screen content */ }<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/sideeffects/SideEffectsSnippets.kt#L109-L127" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt#android_compose_side_effects_rememberupdatedstate" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_rememberupdatedstate">SideEffectsSnippets.kt</a></div></pre></p> <p>To create an effect that matches the lifecycle of the call site, a never-changing constant like <code translate="no" dir="ltr">Unit</code> or <code translate="no" dir="ltr">true</code> is passed as a parameter. In the code above, <code translate="no" dir="ltr">LaunchedEffect(true)</code> is used. To make sure that the <code translate="no" dir="ltr">onTimeout</code> lambda <em>always</em> contains the latest value that <code translate="no" dir="ltr">LandingScreen</code> was recomposed with, <code translate="no" dir="ltr">onTimeout</code> needs to be wrapped with the <code translate="no" dir="ltr">rememberUpdatedState</code> function. The returned <code translate="no" dir="ltr">State</code>, <code translate="no" dir="ltr">currentOnTimeout</code> in the code, should be used in the effect.</p> <aside class="warning"><strong>Warning:</strong><span> <code translate="no" dir="ltr">LaunchedEffect(true)</code> is as suspicious as a <code translate="no" dir="ltr">while(true)</code>. Even though there are valid use cases for it, <em>always</em> pause and make sure that's what you need.</span></aside> <h3 id="disposableeffect" data-text="DisposableEffect: effects that require cleanup" tabindex="-1"><code translate="no" dir="ltr">DisposableEffect</code>: effects that require cleanup</h3> <p>For side effects that need to be <em>cleaned up</em> after the keys change or if the composable leaves the Composition, use <a href="/reference/kotlin/androidx/compose/runtime/package-summary#DisposableEffect(kotlin.Any,kotlin.Function1)"><code translate="no" dir="ltr">DisposableEffect</code></a>. If the <code translate="no" dir="ltr">DisposableEffect</code> keys change, the composable needs to <em>dispose</em> (do the cleanup for) its current effect, and reset by calling the effect again.</p> <p>As an example, you might want to send analytics events based on <a href="/topic/libraries/architecture/lifecycle#lc"><code translate="no" dir="ltr">Lifecycle</code> events</a> by using a <a href="/reference/androidx/lifecycle/LifecycleObserver"><code translate="no" dir="ltr">LifecycleObserver</code></a>. To listen for those events in Compose, use a <code translate="no" dir="ltr">DisposableEffect</code> to register and unregister the observer when needed.</p> <p> <pre id="android_compose_side_effects_disposableeffect-code-sample" data-scope="android_compose_side_effects_disposableeffect" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_disposableeffect" data-copy-event-label="android_compose_side_effects_disposableeffect-SideEffectsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun HomeScreen( lifecycleOwner: LifecycleOwner = LocalLifecycleOwner.current, onStart: () -> Unit, // Send the 'started' analytics event onStop: () -> Unit // Send the 'stopped' analytics event ) { // Safely update the current lambdas when a new one is provided val currentOnStart by rememberUpdatedState(onStart) val currentOnStop by rememberUpdatedState(onStop) // If `lifecycleOwner` changes, dispose and reset the effect DisposableEffect(lifecycleOwner) { // Create an observer that triggers our remembered callbacks // for sending analytics events val observer = LifecycleEventObserver { _, event -> if (event == Lifecycle.Event.ON_START) { currentOnStart() } else if (event == Lifecycle.Event.ON_STOP) { currentOnStop() } } // Add the observer to the lifecycle lifecycleOwner.lifecycle.addObserver(observer) // When the effect leaves the Composition, remove the observer onDispose { lifecycleOwner.lifecycle.removeObserver(observer) } } /* Home screen content */ }<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/sideeffects/SideEffectsSnippets.kt#L131-L163" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt#android_compose_side_effects_disposableeffect" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_disposableeffect">SideEffectsSnippets.kt</a></div></pre></p> <p>In the code above, the effect will add the <code translate="no" dir="ltr">observer</code> to the <code translate="no" dir="ltr">lifecycleOwner</code>. If <code translate="no" dir="ltr">lifecycleOwner</code> changes, the effect is disposed and restarted with the new <code translate="no" dir="ltr">lifecycleOwner</code>.</p> <p>A <code translate="no" dir="ltr">DisposableEffect</code> must include an <code translate="no" dir="ltr">onDispose</code> clause as the final statement in its block of code. Otherwise, the IDE displays a build-time error.</p> <aside class="note"><strong>Note:</strong><span> Having an empty block in <code translate="no" dir="ltr">onDispose</code> is not a good practice. Always reconsider to see if there's an effect that fits your use case better.</span></aside> <h3 id="sideeffect-publish" data-text="SideEffect: publish Compose state to non-Compose code" tabindex="-1"><code translate="no" dir="ltr">SideEffect</code>: publish Compose state to non-Compose code</h3> <p>To share Compose state with objects not managed by compose, use the <a href="/reference/kotlin/androidx/compose/runtime/package-summary#SideEffect(kotlin.Function0)"><code translate="no" dir="ltr">SideEffect</code></a> composable. Using a <code translate="no" dir="ltr">SideEffect</code> guarantees that the effect executes after every successful recomposition. On the other hand, it is incorrect to perform an effect before a successful recomposition is guaranteed, which is the case when writing the effect directly in a composable.</p> <p>For example, your analytics library might allow you to segment your user population by attaching custom metadata ("user properties" in this example) to all subsequent analytics events. To communicate the user type of the current user to your analytics library, use <code translate="no" dir="ltr">SideEffect</code> to update its value.</p> <p> <pre id="android_compose_side_effects_sideeffect-code-sample" data-scope="android_compose_side_effects_sideeffect" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_sideeffect" data-copy-event-label="android_compose_side_effects_sideeffect-SideEffectsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun rememberFirebaseAnalytics(user: User): FirebaseAnalytics { val analytics: FirebaseAnalytics = remember { FirebaseAnalytics() } // On every successful composition, update FirebaseAnalytics with // the userType from the current User, ensuring that future analytics // events have this metadata attached SideEffect { analytics.setUserProperty("userType", user.userType) } return analytics }<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/sideeffects/SideEffectsSnippets.kt#L167-L180" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt#android_compose_side_effects_sideeffect" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_sideeffect">SideEffectsSnippets.kt</a></div></pre></p> <h3 id="producestate" data-text="produceState: convert non-Compose state into Compose state" tabindex="-1"><code translate="no" dir="ltr">produceState</code>: convert non-Compose state into Compose state</h3> <p><a href="/reference/kotlin/androidx/compose/runtime/package-summary#produceState(kotlin.Any,kotlin.coroutines.SuspendFunction1)"><code translate="no" dir="ltr">produceState</code></a> launches a coroutine scoped to the Composition that can push values into a returned <a href="/reference/kotlin/androidx/compose/runtime/State"><code translate="no" dir="ltr">State</code></a>. Use it to convert non-Compose state into Compose state, for example bringing external subscription-driven state such as <code translate="no" dir="ltr">Flow</code>, <code translate="no" dir="ltr">LiveData</code>, or <code translate="no" dir="ltr">RxJava</code> into the Composition.</p> <p>The producer is launched when <code translate="no" dir="ltr">produceState</code> enters the Composition, and will be cancelled when it leaves the Composition. The returned <code translate="no" dir="ltr">State</code> conflates; setting the same value won't trigger a recomposition.</p> <p>Even though <code translate="no" dir="ltr">produceState</code> creates a coroutine, it can also be used to observe non-suspending sources of data. To remove the subscription to that source, use the <a href="/reference/kotlin/androidx/compose/runtime/ProduceStateScope#awaitDispose(kotlin.Function0)"><code translate="no" dir="ltr">awaitDispose</code></a> function.</p> <p>The following example shows how to use <code translate="no" dir="ltr">produceState</code> to load an image from the network. The <code translate="no" dir="ltr">loadNetworkImage</code> composable function returns a <code translate="no" dir="ltr">State</code> that can be used in other composables.</p> <p> <pre id="android_compose_side_effects_producestate-code-sample" data-scope="android_compose_side_effects_producestate" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_producestate" data-copy-event-label="android_compose_side_effects_producestate-SideEffectsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun loadNetworkImage( url: String, imageRepository: ImageRepository = ImageRepository() ): State<Result<Image>> { // Creates a State<T> with Result.Loading as initial value // If either `url` or `imageRepository` changes, the running producer // will cancel and will be re-launched with the new inputs. return produceState<Result<Image>>(initialValue = Result.Loading, url, imageRepository) { // In a coroutine, can make suspend calls val image = imageRepository.load(url) // Update State with either an Error or Success result. // This will trigger a recomposition where this State is read value = if (image == null) { Result.Error } else { Result.Success(image) } } }<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/sideeffects/SideEffectsSnippets.kt#L186-L216" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt#android_compose_side_effects_producestate" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_producestate">SideEffectsSnippets.kt</a></div></pre></p> <aside class="note"><strong>Note:</strong><span> Composables with a return type should be named the way you'd name a normal Kotlin function, starting with a lowercase letter.</span></aside> <aside class="key-point"> <p><b>Key Point:</b> Under the hood, <code translate="no" dir="ltr">produceState</code> makes use of other effects! It holds a <code translate="no" dir="ltr">result</code> variable using <code translate="no" dir="ltr">remember { mutableStateOf(initialValue) }</code>, and triggers the <code translate="no" dir="ltr">producer</code> block in a <code translate="no" dir="ltr">LaunchedEffect</code>. Whenever <code translate="no" dir="ltr">value</code> is updated in the <code translate="no" dir="ltr">producer</code> block, the <code translate="no" dir="ltr">result</code> state is updated to the new value.</p> <p>You can easily create your own effects building on top of the existing APIs.</p> </aside> <h3 id="derivedstateof" data-text="derivedStateOf: convert one or multiple state objects into another state" tabindex="-1"><code translate="no" dir="ltr">derivedStateOf</code>: convert one or multiple state objects into another state</h3> <p>In Compose, <a href="/develop/ui/compose/mental-model#recomposition">recomposition</a> occurs each time an observed state object or composable input changes. A state object or input may be changing more often than the UI actually needs to update, leading to unnecessary recomposition.</p> <p>You should use the <a href="/reference/kotlin/androidx/compose/runtime/package-summary#derivedStateOf(kotlin.Function0)"><code translate="no" dir="ltr">derivedStateOf</code></a> function when your inputs to a composable are changing more often than you need to recompose. This often occurs when something is frequently changing, such as a scroll position, but the composable only needs to react to it once it crosses a certain threshold. <code translate="no" dir="ltr">derivedStateOf</code> creates a new Compose state object you can observe that only updates as much as you need. In this way, it acts similarly to the Kotlin Flows <a href="https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/distinct-until-changed.html#:%7E:text=Returns%20flow%20where%20all%20subsequent,a%20StateFlow%20has%20no%20effect." class="external"><code translate="no" dir="ltr">distinctUntilChanged()</code></a> operator.</p> <aside class="caution"><strong>Caution:</strong><span> <code translate="no" dir="ltr">derivedStateOf</code> is expensive, and you should only use it to avoid unnecessary recomposition when a result hasn't changed.</span></aside> <h4 id="correct-usage" data-text="Correct usage" tabindex="-1">Correct usage</h4> <p>The following snippet shows an appropriate use case for <code translate="no" dir="ltr">derivedStateOf</code>:</p> <p> <pre id="android_compose_side_effects_derivedstateof-code-sample" data-scope="android_compose_side_effects_derivedstateof" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_derivedstateof" data-copy-event-label="android_compose_side_effects_derivedstateof-SideEffectsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable // When the messages parameter changes, the MessageList // composable recomposes. derivedStateOf does not // affect this recomposition. fun MessageList(messages: List<Message>) { Box { val listState = rememberLazyListState() LazyColumn(state = listState) { // ... } // Show the button if the first visible item is past // the first item. We use a remembered derived state to // minimize unnecessary compositions val showButton by remember { derivedStateOf { listState.firstVisibleItemIndex > 0 } } AnimatedVisibility(visible = showButton) { ScrollToTopButton() } } }<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/sideeffects/SideEffectsSnippets.kt#L220-L245" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt#android_compose_side_effects_derivedstateof" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_derivedstateof">SideEffectsSnippets.kt</a></div></pre></p> <p>In this snippet, <code translate="no" dir="ltr">firstVisibleItemIndex</code> changes any time the first visible item changes. As you scroll, the value becomes <code translate="no" dir="ltr">0</code>, <code translate="no" dir="ltr">1</code>, <code translate="no" dir="ltr">2</code>, <code translate="no" dir="ltr">3</code>, <code translate="no" dir="ltr">4</code>, <code translate="no" dir="ltr">5</code>, etc. However, recomposition only needs to occur if the value is greater than <code translate="no" dir="ltr">0</code>. This mismatch in update frequency means that this is a good use case for <code translate="no" dir="ltr">derivedStateOf</code>.</p> <h4 id="incorrect-usage" data-text="Incorrect usage" tabindex="-1">Incorrect usage</h4> <p>A common mistake is to assume that, when you combine two Compose state objects, you should use <code translate="no" dir="ltr">derivedStateOf</code> because you are "deriving state". However, this is purely overhead and not required, as shown in the following snippet:</p> <aside class="warning"><strong>Warning:</strong><span> The following snippet shows an incorrect usage of <code translate="no" dir="ltr">derivedStateOf</code>. Do not use this code in your project.</span></aside> <p> <pre id="android_compose_side_effects_derivedstateof_wrong-code-sample" data-scope="android_compose_side_effects_derivedstateof_wrong" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_derivedstateof_wrong" data-copy-event-label="android_compose_side_effects_derivedstateof_wrong-SideEffectsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">// DO NOT USE. Incorrect usage of derivedStateOf. var firstName by remember { mutableStateOf("") } var lastName by remember { mutableStateOf("") } val fullNameBad by remember { derivedStateOf { "$firstName $lastName" } } // This is bad!!! val fullNameCorrect = "$firstName $lastName" // This is correct<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/sideeffects/SideEffectsSnippets.kt#L257-L262" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt#android_compose_side_effects_derivedstateof_wrong" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/sideeffects/SideEffectsSnippets.kt" data-region-tag="android_compose_side_effects_derivedstateof_wrong">SideEffectsSnippets.kt</a></div></pre></p> <p>In this snippet, <code translate="no" dir="ltr">fullName</code> needs to update just as often as <code translate="no" dir="ltr">firstName</code> and <code translate="no" dir="ltr">lastName</code>. Therefore, no excess recomposition is occurring, and using <code translate="no" dir="ltr">derivedStateOf</code> is not necessary.</p> <h3 id="snapshotFlow" data-text="snapshotFlow: convert Compose's State into Flows" tabindex="-1"><code translate="no" dir="ltr">snapshotFlow</code>: convert Compose's State into Flows</h3> <p>Use <a href="/reference/kotlin/androidx/compose/runtime/package-summary#snapshotFlow(kotlin.Function0)"><code translate="no" dir="ltr">snapshotFlow</code></a> to convert <a href="/reference/kotlin/androidx/compose/runtime/State"><code translate="no" dir="ltr">State<T></code></a> objects into a cold Flow. <code translate="no" dir="ltr">snapshotFlow</code> runs its block when collected and emits the result of the <code translate="no" dir="ltr">State</code> objects read in it. When one of the <code translate="no" dir="ltr">State</code> objects read inside the <code translate="no" dir="ltr">snapshotFlow</code> block mutates, the Flow will emit the new value to its collector if the new value is not <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/equals.html">equal to</a> the previous emitted value (this behavior is similar to that of <a href="https://kotlin.github.io/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines.flow/distinct-until-changed.html"><code translate="no" dir="ltr">Flow.distinctUntilChanged</code></a>).</p> <p>The following example shows a side effect that records when the user scrolls past the first item in a list to analytics:</p> <pre class="prettyprint lang-kotlin" translate="no" dir="ltr"><code translate="no" dir="ltr">val listState = rememberLazyListState() LazyColumn(state = listState) { // ... } LaunchedEffect(listState) { snapshotFlow { listState.firstVisibleItemIndex } .map { index -> index > 0 } .distinctUntilChanged() .filter { it == true } .collect { MyAnalyticsService.sendScrolledPastFirstItemEvent() } } </code></pre> <p>In the code above, <code translate="no" dir="ltr">listState.firstVisibleItemIndex</code> is converted to a Flow that can benefit from the power of Flow's operators.</p> <h2 id="restarting-effects" data-text="Restarting effects" tabindex="-1">Restarting effects</h2> <p>Some effects in Compose, like <code translate="no" dir="ltr">LaunchedEffect</code>, <code translate="no" dir="ltr">produceState</code>, or <code translate="no" dir="ltr">DisposableEffect</code>, take a variable number of arguments, keys, that are used to cancel the running effect and start a new one with the new keys.</p> <p>The typical form for these APIs is:</p> <pre class="prettyprint lang-kotlin" translate="no" dir="ltr"><code translate="no" dir="ltr">EffectName(restartIfThisKeyChanges, orThisKey, orThisKey, ...) { block } </code></pre> <p>Due to the subtleties of this behavior, problems can occur if the parameters used to restart the effect are not the right ones:</p> <ul> <li>Restarting effects less than they should could cause bugs in your app.</li> <li>Restarting effects more than they should could be inefficient.</li> </ul> <p>As a rule of thumb, mutable and immutable variables used in the effect block of code should be added as parameters to the effect composable. Apart from those, more parameters can be added to force restarting the effect. If the change of a variable shouldn't cause the effect to restart, the variable should be wrapped in <a href="#rememberupdatedstate"><code translate="no" dir="ltr">rememberUpdatedState</code></a>. If the variable never changes because it's wrapped in a <code translate="no" dir="ltr">remember</code> with no keys, you don't need to pass the variable as a key to the effect.</p> <aside class="key-point"><strong>Key Point:</strong><span> Variables used in an effect should be added as a parameter of the effect composable, or use <code translate="no" dir="ltr">rememberUpdatedState</code>.</span></aside> <p>In the <code translate="no" dir="ltr">DisposableEffect</code> code shown above, the effect takes as a parameter the <code translate="no" dir="ltr">lifecycleOwner</code> used in its block, because any change to them should cause the effect to restart.</p> <pre class="prettyprint lang-kotlin" translate="no" dir="ltr"><code translate="no" dir="ltr">@Composable fun HomeScreen( lifecycleOwner: LifecycleOwner = LocalLifecycleOwner.current, onStart: () -> Unit, // Send the 'started' analytics event onStop: () -> Unit // Send the 'stopped' analytics event ) { // These values never change in Composition val currentOnStart by rememberUpdatedState(onStart) val currentOnStop by rememberUpdatedState(onStop) DisposableEffect(lifecycleOwner) { val observer = LifecycleEventObserver { _, event -> /* ... */ } lifecycleOwner.lifecycle.addObserver(observer) onDispose { lifecycleOwner.lifecycle.removeObserver(observer) } } } </code></pre> <p><code translate="no" dir="ltr">currentOnStart</code> and <code translate="no" dir="ltr">currentOnStop</code> are not needed as <code translate="no" dir="ltr">DisposableEffect</code> keys, because their value never change in Composition due to the usage of <code translate="no" dir="ltr">rememberUpdatedState</code>. If you don't pass <code translate="no" dir="ltr">lifecycleOwner</code> as a parameter and it changes, <code translate="no" dir="ltr">HomeScreen</code> recomposes, but the <code translate="no" dir="ltr">DisposableEffect</code> isn't disposed of and restarted. That causes problems because the wrong <code translate="no" dir="ltr">lifecycleOwner</code> is used from that point onward.</p> <h3 id="constants-as-keys" data-text="Constants as keys" tabindex="-1">Constants as keys</h3> <p>You can use a constant like <code translate="no" dir="ltr">true</code> as an effect key to make it <strong>follow the lifecycle of the call site</strong>. There are valid use cases for it, like the <code translate="no" dir="ltr">LaunchedEffect</code> example shown above. However, before doing that, think twice and make sure that's what you need.</p> <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/state">State and Jetpack Compose</a></li> <li><a href="/develop/ui/compose/kotlin">Kotlin for Jetpack Compose</a></li> <li><a href="/develop/ui/compose/migrate/interoperability-apis/views-in-compose">Using Views in Compose</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="IgRoa321EnwqkR5u1FLi9WFpLGWR6O"> (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,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","developer.android.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Profiles__enable_profile_collections","Cloud__enable_llm_concierge_chat","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_dark_theme","Cloud__enable_cloudx_experiment_ids","MiscFeatureFlags__enable_variable_operator","MiscFeatureFlags__enable_project_variables","MiscFeatureFlags__developers_footer_image","Significatio__enable_by_tenant","BookNav__enable_tenant_cache_key","TpcFeatures__enable_mirror_tenant_redirects","EngEduTelemetry__enable_engedu_telemetry","TpcFeatures__enable_required_headers","Profiles__enable_release_notes_notifications","DevPro__enable_developer_subscriptions","Search__enable_suggestions_from_borg","Profiles__enable_developer_profiles_callout","Cloud__enable_cloud_dlp_service","Cloud__enable_legacy_calculator_redirect","MiscFeatureFlags__enable_explain_this_code","CloudShell__cloud_shell_button","Profiles__enable_recognition_badges","Cloud__enable_cloud_shell_fte_user_flow","Concierge__enable_pushui","Cloud__enable_cloudx_ping","MiscFeatureFlags__enable_firebase_utm","Analytics__enable_clearcut_logging","DevPro__enable_cloud_innovators_plus","CloudShell__cloud_code_overflow_menu","Search__enable_ai_search_summaries","Cloud__enable_cloud_facet_chat","Search__enable_page_map","Profiles__enable_dashboard_curated_recommendations","Experiments__reqs_query_experiments","Profiles__enable_completecodelab_endpoint","Profiles__require_profile_eligibility_for_signin","Cloud__enable_free_trial_server_call","Profiles__enable_public_developer_profiles","Cloud__enable_cloud_shell","Search__enable_dynamic_content_confidential_banner","MiscFeatureFlags__emergency_css","Profiles__enable_awarding_url","Profiles__enable_page_saving","Search__enable_ai_eligibility_checks","MiscFeatureFlags__enable_view_transitions","Profiles__enable_complete_playlist_endpoint"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://developerscontentserving-pa.googleapis.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[3,"android","Android Developers","developer.android.com",null,"android-dot-devsite-v2-prod.appspot.com",null,null,[null,1,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],[1,null,null,[1,20],"/recommendations"],null,null,null,[1,null,1],[1,1,null,1,1]],null,[18,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,null,null,null,null,null,null,null,null,null,null,1,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[6,1,14,15,20,22,23,28,29,37,43],null,[[null,null,1],[1,1]],[[null,null,null,null,null,null,null,[["G-QFRN08RN6E"],null,null,[["G-QFRN08RN6E",1]]],null,null,null,null,1],null,[[1,1],[2,2]]],null,4,null,null,null,null,null,null,null,null,null,null,null,null,null,"android.devsite.google"],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>