Using Views in Compose | Jetpack Compose

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Android Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#34a853"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/android/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500,600,700|Google+Sans+Text:400,400italic,500,500italic,600,600italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/favicon.svg"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/touchicon-180.png"><link rel="canonical" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose"><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/migrate/interoperability-apis/views-in-compose" /><link rel="alternate" hreflang="x-default" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose" /><link rel="alternate" hreflang="ar" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose?hl=vi" /><title>Using Views in Compose  |  Jetpack Compose  |  Android Developers</title> <meta property="og:title" content="Using Views in Compose  |  Jetpack Compose  |  Android Developers"><meta property="og:url" content="https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose"><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": "Using Views 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": "Using Views in Compose", "item": "https://developer.android.com/develop/ui/compose/migrate/interoperability-apis/views-in-compose" }] } </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"> Using Views 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>You can include an Android View hierarchy in a Compose UI. This approach is particularly useful if you want to use UI elements that are not yet available in Compose, like <a href="https://developers.google.com/android/reference/com/google/android/gms/ads/AdView"><code translate="no" dir="ltr">AdView</code></a>. This approach also lets you reuse custom views you may have designed.</p> <p>To include a view element or hierarchy, use the <a href="/reference/kotlin/androidx/compose/ui/viewinterop/package-summary#AndroidView(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)"><code translate="no" dir="ltr">AndroidView</code> </a> composable. <code translate="no" dir="ltr">AndroidView</code> is passed a lambda that returns a <a href="/reference/android/view/View"><code translate="no" dir="ltr">View</code></a>. <code translate="no" dir="ltr">AndroidView</code> also provides an <code translate="no" dir="ltr">update</code> callback that is called when the view is inflated. The <code translate="no" dir="ltr">AndroidView</code> recomposes whenever a <code translate="no" dir="ltr">State</code> read within the callback changes. <code translate="no" dir="ltr">AndroidView</code>, like many other built-in composables, takes a <code translate="no" dir="ltr">Modifier</code> parameter that can be used, for example, to set its position in the parent composable.</p> <p> <pre id="android_compose_interop_apis_views_in_compose-code-sample" data-scope="android_compose_interop_apis_views_in_compose" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt" data-region-tag="android_compose_interop_apis_views_in_compose" data-copy-event-label="android_compose_interop_apis_views_in_compose-InteroperabilityAPIsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun CustomView() { var selectedItem by remember { mutableStateOf(0) } // Adds view to Compose AndroidView( modifier = Modifier.fillMaxSize(), // Occupy the max size in the Compose UI tree factory = { context -> // Creates view MyView(context).apply { // Sets up listeners for View -> Compose communication setOnClickListener { selectedItem = 1 } } }, update = { view -> // View's been inflated or state read in this block has been updated // Add logic here if necessary // As selectedItem is read here, AndroidView will recompose // whenever the state changes // Example of Compose -> View communication view.selectedItem = selectedItem } ) } @Composable fun ContentExample() { Column(Modifier.fillMaxSize()) { Text("Look at this CustomView!") CustomView() } } <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/interop/InteroperabilityAPIsSnippets.kt#L195-L235" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt#android_compose_interop_apis_views_in_compose" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt" data-region-tag="android_compose_interop_apis_views_in_compose">InteroperabilityAPIsSnippets.kt</a></div></pre></p> <aside class="note"><strong>Note:</strong><span> Prefer to construct a View in the <code translate="no" dir="ltr">AndroidView</code> <code translate="no" dir="ltr">factory</code> lambda instead of using <code translate="no" dir="ltr">remember</code> to hold a View reference outside of <code translate="no" dir="ltr">AndroidView</code>.</span></aside> <h2 id="androidview_with_view_binding" data-text="AndroidView with view binding" tabindex="-1"><code translate="no" dir="ltr">AndroidView</code> with view binding</h2> <p>To embed an XML layout, use the <a href="/reference/kotlin/androidx/compose/ui/viewinterop/package-summary#AndroidViewBinding(kotlin.Function3,%20androidx.compose.ui.Modifier,%20kotlin.Function1)"><code translate="no" dir="ltr">AndroidViewBinding</code></a> API, which is provided by the <code translate="no" dir="ltr">androidx.compose.ui:ui-viewbinding</code> library. To do this, your project must enable <a href="/topic/libraries/view-binding#setup">view binding</a>.</p> <p> <pre id="android_compose_interop_apis_android_view_binding-code-sample" data-scope="android_compose_interop_apis_android_view_binding" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt" data-region-tag="android_compose_interop_apis_android_view_binding" data-copy-event-label="android_compose_interop_apis_android_view_binding-InteroperabilityAPIsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun AndroidViewBindingExample() { AndroidViewBinding(ExampleLayoutBinding::inflate) { exampleView.setBackgroundColor(Color.GRAY) } }<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/interop/InteroperabilityAPIsSnippets.kt#L239-L244" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt#android_compose_interop_apis_android_view_binding" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt" data-region-tag="android_compose_interop_apis_android_view_binding">InteroperabilityAPIsSnippets.kt</a></div></pre></p> <h2 id="androidview_in_lazy_lists" data-text="AndroidView in Lazy lists" tabindex="-1"><code translate="no" dir="ltr">AndroidView</code> in Lazy lists</h2> <p>If you are using an <code translate="no" dir="ltr">AndroidView</code> in a Lazy list (<code translate="no" dir="ltr">LazyColumn</code>, <code translate="no" dir="ltr">LazyRow</code>, <code translate="no" dir="ltr">Pager</code>, etc.), consider using the <a href="/reference/kotlin/androidx/compose/ui/viewinterop/package-summary#AndroidView(kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1,kotlin.Function1)"><code translate="no" dir="ltr">AndroidView</code></a> overload introduced in version 1.4.0-rc01. This overload allows Compose to reuse the underlying <code translate="no" dir="ltr">View</code> instance when the containing composition is reused as is the case for Lazy lists.</p> <p>This overload of <code translate="no" dir="ltr">AndroidView</code> adds 2 additional parameters: </p> <ul> <li><code translate="no" dir="ltr">onReset</code> - A callback invoked to signal that the <code translate="no" dir="ltr">View</code> is about to be reused. This must be non-null to enable View reuse.</li> <li><code translate="no" dir="ltr">onRelease</code> (optional) - A callback invoked to signal that the <code translate="no" dir="ltr">View</code> has exited the composition and will not be reused again.</li> </ul> <p> <pre id="android_compose_interop_apis_android_view_reuse-code-sample" data-scope="android_compose_interop_apis_android_view_reuse" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt" data-region-tag="android_compose_interop_apis_android_view_reuse" data-copy-event-label="android_compose_interop_apis_android_view_reuse-InteroperabilityAPIsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@OptIn(ExperimentalComposeUiApi::class) @Composable fun AndroidViewInLazyList() { LazyColumn { items(100) { index -> AndroidView( modifier = Modifier.fillMaxSize(), // Occupy the max size in the Compose UI tree factory = { context -> MyView(context) }, update = { view -> view.selectedItem = index }, onReset = { view -> view.clear() } ) } } }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/1d381ff086395f4c3bd9bb8b5085ab67bb3e9a0f/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt#L170-L189" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt#android_compose_interop_apis_android_view_reuse" data-code-snippet="true" data-git-revision="androidview_reuse" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt" data-region-tag="android_compose_interop_apis_android_view_reuse">InteroperabilityAPIsSnippets.kt</a></div></pre></p> <h2 id="fragments-in-compose" data-text="Fragments in Compose" tabindex="-1">Fragments in Compose</h2> <p>Use the <code translate="no" dir="ltr">AndroidViewBinding</code> composable to add a <code translate="no" dir="ltr">Fragment</code> in Compose. <code translate="no" dir="ltr">AndroidViewBinding</code> has fragment-specific handling such as removing the fragment when the composable leaves the composition.</p> <p>Do so by inflating an XML containing a <a href="/reference/androidx/fragment/app/FragmentContainerView"><code translate="no" dir="ltr">FragmentContainerView</code></a> as the holder for your <code translate="no" dir="ltr">Fragment</code>.</p> <p>For example, if you have the <code translate="no" dir="ltr">my_fragment_layout.xml</code> defined, you could use code like this while replacing the <code translate="no" dir="ltr">android:name</code> XML attribute with your <code translate="no" dir="ltr">Fragment</code>'s class name:</p> <pre class="prettyprint lang-xml notranslate" dir="ltr"> <androidx.fragment.app.FragmentContainerView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/fragment_container_view" android:layout_width="match_parent" android:layout_height="match_parent" android:name="com.example.compose.snippets.interop.MyFragment" /><div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/f4e49876ac3fad90376323fa23b6991581d547c7/compose/snippets/src/main/res/layout/my_fragment_layout.xml#L19-L23" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/res/layout/my_fragment_layout.xml#android_compose_migration_fragment_in_compose_xml" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/res/layout/my_fragment_layout.xml" data-region-tag="android_compose_migration_fragment_in_compose_xml">my_fragment_layout.xml</a></div> </pre> <p>Inflate this fragment in Compose as follows:</p> <p> <pre id="android_compose_interop_apis_fragments_in_compose-code-sample" data-scope="android_compose_interop_apis_fragments_in_compose" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt" data-region-tag="android_compose_interop_apis_fragments_in_compose" data-copy-event-label="android_compose_interop_apis_fragments_in_compose-InteroperabilityAPIsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun FragmentInComposeExample() { AndroidViewBinding(MyFragmentLayoutBinding::inflate) { val myFragment = fragmentContainerView.getFragment<MyFragment>() // ... } } <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/interop/InteroperabilityAPIsSnippets.kt#L248-L258" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt#android_compose_interop_apis_fragments_in_compose" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt" data-region-tag="android_compose_interop_apis_fragments_in_compose">InteroperabilityAPIsSnippets.kt</a></div></pre></p> <p>If you need to use multiple fragments in the same layout, ensure that you have defined a unique ID for each <code translate="no" dir="ltr">FragmentContainerView</code>.</p> <h2 id="call-view" data-text="Calling the Android framework from Compose" tabindex="-1">Calling the Android framework from Compose</h2> <p>Compose operates within the Android framework classes. For example, it's hosted on Android View classes, like <code translate="no" dir="ltr">Activity</code> or <code translate="no" dir="ltr">Fragment</code>, and might use Android framework classes like the <code translate="no" dir="ltr">Context</code>, system resources, <code translate="no" dir="ltr">Service</code>, or <code translate="no" dir="ltr">BroadcastReceiver</code>.</p> <p>To learn more about system resources, see <a href="/develop/ui/compose/resources">Resources in Compose</a>.</p> <h3 id="composition-locals" data-text="Composition Locals" tabindex="-1">Composition Locals</h3> <p><a href="/reference/kotlin/androidx/compose/runtime/CompositionLocal"><code translate="no" dir="ltr">CompositionLocal</code></a> classes allow passing data implicitly through composable functions. They're usually provided with a value in a certain node of the UI tree. That value can be used by its composable descendants without declaring the <code translate="no" dir="ltr">CompositionLocal</code> as a parameter in the composable function.</p> <p><code translate="no" dir="ltr">CompositionLocal</code> is used to propagate values for Android framework types in Compose such as <code translate="no" dir="ltr">Context</code>, <code translate="no" dir="ltr">Configuration</code> or the <code translate="no" dir="ltr">View</code> in which the Compose code is hosted with the corresponding <a href="/reference/kotlin/androidx/compose/ui/platform/package-summary#LocalContext()"><code translate="no" dir="ltr">LocalContext</code></a>, <a href="/reference/kotlin/androidx/compose/ui/platform/package-summary#LocalConfiguration()"><code translate="no" dir="ltr">LocalConfiguration</code></a>, or <a href="/reference/kotlin/androidx/compose/ui/platform/package-summary#LocalView()"><code translate="no" dir="ltr">LocalView</code></a>. Note that <code translate="no" dir="ltr">CompositionLocal</code> classes are prefixed with <code translate="no" dir="ltr">Local</code> for better discoverability with auto-complete in the IDE.</p> <p>Access the current value of a <code translate="no" dir="ltr">CompositionLocal</code> by using its <code translate="no" dir="ltr">current</code> property. For example, the code below shows a toast message by providing <code translate="no" dir="ltr">LocalContext.current</code> into the <code translate="no" dir="ltr">Toast.makeToast</code> method.</p> <p> <pre id="android_compose_interop_apis_composition_locals-code-sample" data-scope="android_compose_interop_apis_composition_locals" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt" data-region-tag="android_compose_interop_apis_composition_locals" data-copy-event-label="android_compose_interop_apis_composition_locals-InteroperabilityAPIsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun ToastGreetingButton(greeting: String) { val context = LocalContext.current Button(onClick = { Toast.makeText(context, greeting, Toast.LENGTH_SHORT).show() }) { Text("Greet") } }<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/interop/InteroperabilityAPIsSnippets.kt#L262-L270" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt#android_compose_interop_apis_composition_locals" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt" data-region-tag="android_compose_interop_apis_composition_locals">InteroperabilityAPIsSnippets.kt</a></div></pre></p> <p>For a more complete example, take a look at the <a href="#case-study-broadcastreceivers">Case Study: BroadcastReceivers</a> section at the end of this document.</p> <h2 id="other-interactions" data-text="Other interactions" tabindex="-1">Other interactions</h2> <p>If there isn't a utility defined for the interaction you need, the best practice is to follow the general Compose guideline, <em>data flows down, events flow up</em> (discussed at more length in <a href="/develop/ui/compose/mental-model">Thinking in Compose</a>). For example, this composable launches a different activity:</p> <p> <pre id="android_compose_interop_apis_other_interactions-code-sample" data-scope="android_compose_interop_apis_other_interactions" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt" data-region-tag="android_compose_interop_apis_other_interactions" data-copy-event-label="android_compose_interop_apis_other_interactions-InteroperabilityAPIsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">class OtherInteractionsActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // get data from savedInstanceState setContent { MaterialTheme { ExampleComposable(data, onButtonClick = { startActivity(Intent(this, MyActivity::class.java)) }) } } } } @Composable fun ExampleComposable(data: DataExample, onButtonClick: () -> Unit) { Button(onClick = onButtonClick) { Text(data.title) } }<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/interop/InteroperabilityAPIsSnippets.kt#L274-L299" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt#android_compose_interop_apis_other_interactions" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt" data-region-tag="android_compose_interop_apis_other_interactions">InteroperabilityAPIsSnippets.kt</a></div></pre></p> <h2 id="case-study-broadcastreceivers" data-text="Case study: Broadcast receivers" tabindex="-1">Case study: Broadcast receivers</h2> <p>For a more realistic example of features you might want to migrate or implement in Compose, and to showcase <code translate="no" dir="ltr">CompositionLocal</code> and <a href="/develop/ui/compose/side-effects">side effects</a>, let's say a <a href="/guide/components/broadcasts"><code translate="no" dir="ltr">BroadcastReceiver</code></a> needs to be registered from a composable function.</p> <p>The solution makes use of <code translate="no" dir="ltr">LocalContext</code> to use the current context, and <code translate="no" dir="ltr">rememberUpdatedState</code> and <code translate="no" dir="ltr">DisposableEffect</code> side effects.</p> <p> <pre id="android_compose_interop_apis_broadcast_receivers-code-sample" data-scope="android_compose_interop_apis_broadcast_receivers" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt" data-region-tag="android_compose_interop_apis_broadcast_receivers" data-copy-event-label="android_compose_interop_apis_broadcast_receivers-InteroperabilityAPIsSnippets" class="prettyprint lang-kotlin notranslate" dir="ltr">@Composable fun SystemBroadcastReceiver( systemAction: String, onSystemEvent: (intent: Intent?) -> Unit ) { // Grab the current context in this part of the UI tree val context = LocalContext.current // Safely use the latest onSystemEvent lambda passed to the function val currentOnSystemEvent by rememberUpdatedState(onSystemEvent) // If either context or systemAction changes, unregister and register again DisposableEffect(context, systemAction) { val intentFilter = IntentFilter(systemAction) val broadcast = object : BroadcastReceiver() { override fun onReceive(context: Context?, intent: Intent?) { currentOnSystemEvent(intent) } } context.registerReceiver(broadcast, intentFilter) // When the effect leaves the Composition, remove the callback onDispose { context.unregisterReceiver(broadcast) } } } @Composable fun HomeScreen() { SystemBroadcastReceiver(Intent.ACTION_BATTERY_CHANGED) { batteryStatus -> val isCharging = /* Get from batteryStatus ... */ true /* Do something if the device is charging */ } /* Rest of the HomeScreen */ }<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/interop/InteroperabilityAPIsSnippets.kt#L303-L341" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt#android_compose_interop_apis_broadcast_receivers" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/interop/InteroperabilityAPIsSnippets.kt" data-region-tag="android_compose_interop_apis_broadcast_receivers">InteroperabilityAPIsSnippets.kt</a></div></pre></p> <h2 id="next-steps" data-text="Next steps" tabindex="-1">Next steps</h2> <p>Now that you know the interoperability APIs when using Compose in Views and vice versa, explore the <a href="/develop/ui/compose/migrate/other-considerations">Other considerations</a> page to learn more.</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/migrate/other-considerations">Other considerations</a></li> <li><a href="/develop/ui/compose/side-effects">Side-effects in Compose</a></li> <li><a href="/develop/ui/compose/compositionlocal">Locally scoped data with CompositionLocal</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="midyrA8m+LcI+0OcT+8zKgvlrO6EUA"> (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__require_profile_eligibility_for_signin","Profiles__enable_recognition_badges","Cloud__enable_legacy_calculator_redirect","Profiles__enable_public_developer_profiles","Search__enable_ai_search_summaries","MiscFeatureFlags__emergency_css","Significatio__enable_by_tenant","MiscFeatureFlags__enable_variable_operator","DevPro__enable_developer_subscriptions","EngEduTelemetry__enable_engedu_telemetry","Cloud__enable_cloud_facet_chat","MiscFeatureFlags__developers_footer_image","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__enable_firebase_utm","Profiles__enable_completecodelab_endpoint","MiscFeatureFlags__enable_explain_this_code","Profiles__enable_complete_playlist_endpoint","Cloud__enable_cloudx_experiment_ids","Search__enable_suggestions_from_borg","Profiles__enable_page_saving","Experiments__reqs_query_experiments","Cloud__enable_cloud_shell","Profiles__enable_release_notes_notifications","DevPro__enable_cloud_innovators_plus","Search__enable_page_map","MiscFeatureFlags__enable_view_transitions","Concierge__enable_pushui","Profiles__enable_profile_collections","MiscFeatureFlags__enable_dark_theme","BookNav__enable_tenant_cache_key","Analytics__enable_clearcut_logging","Cloud__enable_cloud_dlp_service","MiscFeatureFlags__developers_footer_dark_image","TpcFeatures__enable_required_headers","TpcFeatures__enable_mirror_tenant_redirects","Search__enable_ai_eligibility_checks","Cloud__enable_llm_concierge_chat","Cloud__enable_free_trial_server_call","Search__enable_dynamic_content_confidential_banner","CloudShell__cloud_code_overflow_menu","MiscFeatureFlags__enable_project_variables","Profiles__enable_awarding_url","CloudShell__cloud_shell_button","Cloud__enable_cloud_shell_fte_user_flow","Cloud__enable_cloudx_ping","Profiles__enable_dashboard_curated_recommendations"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://developerscontentserving-pa.googleapis.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[3,"android","Android Developers","developer.android.com",null,"android-dot-devsite-v2-prod.appspot.com",null,null,[null,1,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],[1,null,null,[1,20],"/recommendations"],null,null,null,[1,null,1],[1,1,null,1,1]],null,[18,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,null,null,null,null,null,null,null,null,null,null,1,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[6,1,14,15,20,22,23,28,29,37,43],null,[[null,null,1],[1,1]],[[null,null,null,null,null,null,null,[["G-QFRN08RN6E"],null,null,[["G-QFRN08RN6E",1]]],null,null,null,null,1],null,[[1,1],[2,2]]],null,4,null,null,null,null,null,null,null,null,null,null,null,null,null,"android.devsite.google"],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Using Views in Compose | Jetpack Compose | Android Developers