Material Design 3 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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/android/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/android/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/android/images/favicon.svg"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/android/images/touchicon-180.png"><link rel="canonical" href="https://developer.android.com/develop/ui/compose/designsystems/material3"><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/designsystems/material3" /><link rel="alternate" hreflang="x-default" href="https://developer.android.com/develop/ui/compose/designsystems/material3" /><link rel="alternate" hreflang="ar" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=fr" /><link rel="alternate" hreflang="de" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=de" /><link rel="alternate" hreflang="he" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=he" /><link rel="alternate" hreflang="hi" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=hi" /><link rel="alternate" hreflang="id" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=id" /><link rel="alternate" hreflang="it" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=it" /><link rel="alternate" hreflang="ja" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=th" /><link rel="alternate" hreflang="tr" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developer.android.com/develop/ui/compose/designsystems/material3?hl=vi" /><title>Material Design 3 in Compose  |  Jetpack Compose  |  Android Developers</title> <meta property="og:title" content="Material Design 3 in Compose  |  Jetpack Compose  |  Android Developers"><meta property="og:url" content="https://developer.android.com/develop/ui/compose/designsystems/material3"><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": "Material Design 3 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": "Material Design 3 in Compose", "item": "https://developer.android.com/develop/ui/compose/designsystems/material3" }] } </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> <a href="#main-content" class="skip-link button"> Skip to main content </a> <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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/android/images/lockup.svg" class="devsite-site-logo" alt="Android Developers"> </picture> </a> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </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" class="devsite-tabs-content gc-analytics-event android-dropdown-tab" track-metadata-eventdetail="https://developer.android.com/get-started" 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> <button aria-haspopup="menu" 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"></button> <div class="devsite-tabs-dropdown" role="menu" 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/develop/ui/compose/adopt" track-type="nav" track-metadata-eventdetail="https://developer.android.com/develop/ui/compose/adopt" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="get started" tooltip > <div class="devsite-nav-item-title"> Compose for teams </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, headsets, 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/xr" track-type="nav" track-metadata-eventdetail="https://developer.android.com/xr" 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 XR </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> </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" class="devsite-tabs-content gc-analytics-event android-dropdown-tab" track-metadata-eventdetail="https://developer.android.com/design" 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> <button aria-haspopup="menu" 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"></button> <div class="devsite-tabs-dropdown" role="menu" 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"> Adaptive UI </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developer.android.com/design/ui/xr" track-type="nav" track-metadata-eventdetail="https://developer.android.com/design/ui/xr" 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 XR </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/guide/topics/ui/accessibility" track-type="nav" track-metadata-eventdetail="https://developer.android.com/guide/topics/ui/accessibility" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="quality" tooltip > <div class="devsite-nav-item-title"> Accessibility </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/guide/topics/permissions/overview" track-type="nav" track-metadata-eventdetail="https://developer.android.com/guide/topics/permissions/overview" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="security" tooltip > <div class="devsite-nav-item-title"> Permissions </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" class="devsite-tabs-content gc-analytics-event android-dropdown-tab" track-metadata-eventdetail="https://developer.android.com/develop" 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> <button aria-haspopup="menu" 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"></button> <div class="devsite-tabs-dropdown" role="menu" 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/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/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/connectivity" track-type="nav" track-metadata-eventdetail="https://developer.android.com/develop/connectivity" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="core areas" tooltip > <div class="devsite-nav-item-title"> Connectivity </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"> Adaptive UI </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/develop/xr" track-type="nav" track-metadata-eventdetail="https://developer.android.com/develop/xr" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="device tech" tooltip > <div class="devsite-nav-item-title"> Android XR </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/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/develop#devices" track-type="nav" track-metadata-eventdetail="https://developer.android.com/develop#devices" track-metadata-position="nav - develop" track-metadata-module="tertiary nav" track-metadata-module_headline="device tech" tooltip > <div class="devsite-nav-item-title"> All devices ⤵️ </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" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.android.com/distribute" 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" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.android.com/community" 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"> Sign in </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" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.android.com/develop/ui" 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" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.android.com/develop/ui/compose/tutorial" 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" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.android.com/develop/ui/compose/samples" 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" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.android.com/develop/ui/compose/documentation" track-type="nav" track-metadata-position="nav - docs" track-metadata-module="primary nav" aria-label="Docs, selected" data-category="Site-Wide Custom Events" data-label="Tab: Docs" track-name="docs" > Docs </a> </tab> <tab > <a href="https://developer.android.com/develop/ui/compose/quick-guides" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://developer.android.com/develop/ui/compose/quick-guides" track-type="nav" track-metadata-position="nav - quick guides" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Quick Guides" track-name="quick guides" > Quick Guides </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> </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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/android/images/lockup.svg" class="devsite-site-logo" alt="Android Developers"> </picture> </a> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </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"> Essentials </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> More </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"> Design & Plan </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> More </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"> Develop </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> More </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"> Overview </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"> Tutorial </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"> Samples </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: Docs" track-name="docs" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Docs" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> Docs </a> </li> <li class="devsite-nav-item"> <a href="/develop/ui/compose/quick-guides" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Quick Guides" track-name="quick guides" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Quick Guides" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> Quick Guides </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"> Google Play </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"> Community </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"> Android Studio </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"> Introduction </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" >Documentation</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" >Why Compose</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" >Quick start</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" >Compose Compiler Gradle Plugin</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" >Thinking in Compose</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" >Building adaptive apps</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"> Bill of Materials </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" >Using the Bill of Materials</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" >BOM to library version mapping</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"> UI architecture </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" >Lifecycle</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" >Side-effects</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" >Phases</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"> Managing state </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" >Overview</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" >Where to hoist state</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" >Save UI state</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" >Architecture</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" >Architectural layering</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" >CompositionLocal</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" >Navigation</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"> App layout </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" >Overview</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" >Layout basics</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" >Modifiers</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" >Constraints and modifier order</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" >Custom modifiers</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" >List of modifiers</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" >Pager</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" >Flow layouts</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" >Custom layouts</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"> Adaptive layouts </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" >Overview</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" >Canonical layouts</a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/layouts/adaptive/support-different-display-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-display-sizes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/layouts/adaptive/support-different-display-sizes" >Support different display sizes</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" >Use window size classes</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" >Support multi-window mode</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" >Support desktop windowing</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" >Build adaptive navigation</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" >Build a list-detail layout</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" >Build a supporting pane layout</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" >Adaptive do's and don'ts</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"> Foldables </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" >Learn about foldables</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" >Make your app fold-aware</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" >Support foldable display modes</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" >Alignment lines</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" >Intrinsic measurements</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" >ConstraintLayout</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"> Components </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" >Overview</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"> App bars </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" >Overview</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" >Navigate from top app bar</a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/app-bars-dynamic" 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-dynamic" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/app-bars-dynamic" >Create a dynamic top app bar</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" >Badges</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"> Bottom sheets </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" >Overview</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" >Partial bottom sheet</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" >Button</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" >Card</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" >Checkbox</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" >Chip</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" >Date pickers</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" >Dialog</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" >Divider</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" >Floating action button</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" >Lists and grids</a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/menu" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/menu" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/menu" >Menus</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" >Navigation drawer</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" >Progress indicators</a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/pull-to-refresh" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/pull-to-refresh" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/pull-to-refresh" >Pull to refresh</a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/radio-button" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/radio-button" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/radio-button" >Radio button</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" >Resources</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" >Scaffold</a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/components/segmented-button" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/components/segmented-button" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/components/segmented-button" >Segmented button</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" >Slider</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" >Snackbar</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" >Switch</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"> Time pickers </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" >Overview</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" >Time picker dialogs</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"> Theming </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" >Overview</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" >Material Design 3</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" >Migrate from Material 2 to Material 3</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" >Material Design 2</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" >Custom theming</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" >Anatomy of a theme</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" >Migrating XML themes to Compose</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"> Text and typography </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" >Overview</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"> Display and style text </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" >Display text from resource</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" >Style text</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" >Style paragraph</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" >Configure text layout</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" >Handle user input</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" >Enable user interactions</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" >Work with fonts</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" >Display emoji</a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/text/autofill" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/text/autofill" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/text/autofill" >Enable Autofill</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"> Images and graphics </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" >Overview</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"> Images </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" >Overview</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" >Loading images</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" >ImageBitmap vs ImageVector</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" >Material icons</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" >Customize an image</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" >Custom painter</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" >Optimizing performance</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"> Graphics </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" >Overview</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" >Graphics Modifiers</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" >Brush</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" >Shapes</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"> Animation </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" >Overview</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" >Choose an animation API</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" >Quick guide</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" >Animation modifiers and composables</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" >Value-based animations</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" >Animated vector images</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" >Advanced animation example</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" >Customize animations</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"> Shared elements </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" >Introduction</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" >Customize</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" >Common use cases</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" >With navigation</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" >Additional samples</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" >Test animations</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" >Tools</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" >Additional resources</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"> Accessibility </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" >Overview</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" >Key steps</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" >Semantics</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" >Control traversal order</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" >Testing</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"> Touch and input </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" >Overview</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"> Pointer input </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" >Overview</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" >Understand gestures</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" >Tap and press</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" >Scroll</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" >Drag, swipe, and fling</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" >Multi-touch gestures</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"> Keyboard input </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" >Handle keyboard actions</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" >Keyboard Shortcuts Helper</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"> Focus </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" >Overview</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" >Change focus traversal order</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" >Change focus behavior</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" >React to focus</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"> User interactions </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" >Handling interactions</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" >Migrate to Indication and Ripple APIs</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" >Drag and drop</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"> Stylus input </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" >Overview</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" >Stylus input in text fields</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" >Advanced stylus features</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" >Note-taking apps</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"> Add inking to your app with the Ink API </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" >About the Ink API</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" >Setup</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" >Pick your module</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" >Draw a stroke</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" >Define your brushes</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" >Create interactive tools with the Geometry APIs</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" >State preservation and persistent storage</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" >Copy and paste</a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/touch-input/input-compatibility-on-large-screens" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/touch-input/input-compatibility-on-large-screens" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/touch-input/input-compatibility-on-large-screens" >Input compatibility on large screens</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"> Performance </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" >Overview</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" >Phases</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" >Baseline profiles</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"> Stability </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" >Overview</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" >Diagnose stability issues</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" >Fix stability issues</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" >Strong skipping</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" >Tools</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" >Best practices</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"> Style guidelines </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" >Compose API guidelines</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" >Kotlin for Compose</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"> UI testing </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" >Overview</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" >Cheatsheet</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" >Semantics</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" >Testing APIs</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" >Synchronize tests</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" >Interoperability</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" >Common patterns</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" >Debug tests</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"> Migrate to Compose </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" >Overview</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" >Migration strategy</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"> Interoperability APIs </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" >Overview</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" >Using Compose in Views</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" >Using Views in Compose</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"> Common migration scenarios </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" >Migrate RecyclerView to Compose</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" >Migrate CoordinatorLayout to Compose</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" >Migrate Jetpack Navigation to Navigation Compose</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" >Other considerations</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" >Adopt Compose for teams</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" >Compose and other libraries</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" >Compare Compose and View metrics</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"> Tools </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" >Overview</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"> Design </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" >Preview your UI</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" >Preview and debug animations</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"> Develop </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" >Develop code iteratively</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" >Editor actions</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"> Debug </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/develop/ui/compose/tooling/debug" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/tooling/debug" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/tooling/debug" >Overview</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" >Trace app performance</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"> Relay designer and developer tooling </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" >Overview</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" >Install Relay</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" >Set up your Android project</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"> Basic tutorial </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" >Overview</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" >Create UI Package in Figma</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" >Convert the designs to code in Android Studio</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" >Make and propagate design updates</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" >Content parameters</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"> Advanced tutorial </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" >Overview</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" >Handling design variants</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" >Content parameters</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" >Add interaction handlers to designs</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"> Relay workflow </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" >Overview</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" >Create UI Packages</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" >Add parameters</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" >Check errors</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" >Share UI Packages</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" >Android Studio workflow</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" >Understand UI Package & generated code</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" >Figma DevMode</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"> Design-to-code translation details </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" >Figma Component Properties</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" >Children parameters</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" >Nested package instances</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" >Vector graphics</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" >Multiple styles in text</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" >Absolute positioning within auto layout</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" >Fill color</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" >Effects</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" >Limitations and troubleshooting</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"> Experimental features </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" >Mapping styles to Compose theme</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" >Mapping components to existing code</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" >Releases</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"> Leverage system capabilities </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" >Window Insets</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" >Cutouts</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" >Picture-in-picture</a></li><li class="devsite-nav-item"><a href="/develop/ui/compose/system/predictive-back" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /develop/ui/compose/system/predictive-back" track-type="bookNav" track-name="click" track-metadata-eventdetail="/develop/ui/compose/system/predictive-back" >Predictive back</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"> Create widgets </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" >Overview</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" >Glance setup</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" >Create an app widget with Glance</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" >Handle errors with Glance</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" >Unit testing with Glance</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" >Handle user interaction with Glance</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" >Manage and update GlanceAppWidget</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" >Build UI with Glance</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" >Implement a Glance theme</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" >Glance interoperability</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" >Additional resources</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"> Gemini in Android Studio </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"> Learn more </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"> Get Android Studio </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Get started </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"> Hello world </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"> Training courses </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"> Tutorials </a> </li> <li class="devsite-nav-item"> <a href="/develop/ui/compose/adopt" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Compose for teams" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> Compose for teams </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"> Kotlin for Android </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"> Monetization with Play ↗️ </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Extend by device </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"> Adaptive apps </a> </li> <li class="devsite-nav-item"> <a href="/xr" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android XR" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> Android XR </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"> Wear OS </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"> Android for Cars </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"> Android TV </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"> ChromeOS </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Build by category </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"> Games </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"> Camera & media </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"> Social & messaging </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"> Health & fitness </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"> Productivity </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"> Enterprise apps </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Get the latest </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"> Latest updates </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"> Experimental updates </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"> Android Studio preview </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"> Jetpack & Compose libraries </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"> Wear OS preview </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"> Privacy Sandbox </a> </li> </ul> <ul class="devsite-nav-list" menu="Design & Plan" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> UI Design </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"> Design for Android </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"> Mobile </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: Adaptive UI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> Adaptive UI </a> </li> <li class="devsite-nav-item"> <a href="/design/ui/xr" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android XR" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> Android XR </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"> Widgets </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"> Wear OS </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"> Android TV </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Architecture </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"> Introduction </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"> Libraries </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"> Navigation </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"> Modularization </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"> Testing </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Quality </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"> Overview </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"> Core value </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"> User experience </a> </li> <li class="devsite-nav-item"> <a href="/guide/topics/ui/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> Accessibility </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"> Technical quality </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"> Security </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Security </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"> Overview </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"> Privacy </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"> Permissions </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"> Identity </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"> Fraud prevention </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Build for Billions </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"> Overview </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"> About new markets </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"> Android (Go edition) </a> </li> </ul> <ul class="devsite-nav-list" menu="Develop" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> Build AI experiences </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"> Get started </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Core areas </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"> Samples </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"> User interfaces </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"> Background work </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"> Data and files </a> </li> <li class="devsite-nav-item"> <a href="/develop/connectivity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Connectivity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> Connectivity </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"> All core areas ⤵️ </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Tools and workflow </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"> Write and debug code </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"> Build projects </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"> Test your app </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"> Performance </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"> Command-line tools </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"> Gradle plugin API </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Device tech </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: Adaptive UI" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> Adaptive UI </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"> Wear OS </a> </li> <li class="devsite-nav-item"> <a href="/develop/xr" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android XR" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> Android XR </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"> Android Health </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"> Android for Cars </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"> Android TV </a> </li> <li class="devsite-nav-item"> <a href="/develop#devices" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: All devices ⤵️" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> All devices ⤵️ </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Libraries </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"> Android platform </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"> Jetpack libraries </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"> Compose libraries </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"> Google Play services ↗️ </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"> Google Play SDK index ↗️ </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" 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="" > Docs </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <h1 class="devsite-page-title" tabindex="-1"> Material Design 3 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> Stay organized with collections Save and categorize content based on your preferences. </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 "> Jetpack Compose offers an implementation of <a href="https://m3.material.io/" class="external">Material Design 3</a>, the next evolution of Material Design. Material 3 includes updated theming, components and Material You personalization features like dynamic color, and is designed to be cohesive with the new visual style and system UI on Android 12 and above. <aside class="note">Note: The terms “Material Design 3”, “Material 3”, and “M3” are interchangeable. The existing Material Design spec and corresponding androidx.compose.material library are referred to as “Material Design 2”, “Material 2”, or “M2”.</aside> Below, we demonstrate the <a href="https://m3.material.io/" class="external">Material Design 3</a> implementation using the <a href="https://github.com/android/compose-samples/tree/main/Reply" class="external">Reply sample app</a> as an example. The Reply sample is based entirely on Material Design 3. <figure id ="image-1" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-sampleapp.png" width = "70%" alt = "Reply sample app using Material Design 3"> <figcaption>Figure 1. Reply sample app using Material Design 3</figcaption> </figure> <h2 id="dependency" data-text="Dependency" tabindex="-1">Dependency</h2> To start using Material 3 in your Compose app, add the <a href="/reference/kotlin/androidx/compose/material3/package-summary">Compose Material 3</a> dependency to your <code translate="no" dir="ltr">build.gradle</code> files: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Kotlin"><code translate="no" dir="ltr">implementation "androidx.compose.material3:material3:$material3_version" </code></pre></devsite-code> Once the dependency is added, you can start adding Material Design systems, including color, typography, and shape, to your apps. <h3 id="experimental-apis" data-text="Experimental APIs" tabindex="-1">Experimental APIs</h3> Some M3 APIs are considered experimental. In such cases you need to opt in at the function or file level using the <a href="/reference/kotlin/androidx/compose/material3/ExperimentalMaterial3Api"><code translate="no" dir="ltr">ExperimentalMaterial3Api</code></a> annotation: <div></div><devsite-code><pre id="android_compose_material3_experimental_annotation-code-sample" data-scope="android_compose_material3_experimental_annotation" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_experimental_annotation" data-copy-event-label="android_compose_material3_experimental_annotation-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">// import androidx.compose.material3.ExperimentalMaterial3Api @Composable fun AppComposable() { // M3 composables } <div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L72-L77" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_experimental_annotation" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_experimental_annotation">Material3Snippets.kt</a></div></pre></devsite-code> <h2 id="material-theming" data-text="Material theming" tabindex="-1">Material theming</h2> An M3 theme contains the following subsystems: <a href="https://m3.material.io/styles/color/overview" class="external">color scheme</a>, <a href="https://m3.material.io/styles/typography/overview" class="external">typography</a> and <a href="https://m3.material.io/styles/shape/overview" class="external">shapes</a>. When you customize these values, your changes are automatically reflected in the M3 components you use to build your app. <figure id = "image-2" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-theming.png" width = "60%" alt = "Subsystems of Material design: Color, Typography and Shapes"> <figcaption>Figure 2. Subsystems of Material Design: color, typography and shapes</figcaption> </figure> Jetpack Compose implements these concepts with the M3 <code translate="no" dir="ltr">MaterialTheme</code> composable: <div></div><devsite-code><pre id="android_compose_material3_theme_definition-code-sample" data-scope="android_compose_material3_theme_definition" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_theme_definition" data-copy-event-label="android_compose_material3_theme_definition-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">MaterialTheme( colorScheme = /* ... typography = /* ... shapes = /* ... ) { // M3 app content }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L84-L90" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_theme_definition" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_theme_definition">Material3Snippets.kt</a></div></pre></devsite-code> To theme your application content, define the color scheme, typography, and shapes specific to your app. <h3 id="color-scheme" data-text="Color scheme" tabindex="-1">Color scheme</h3> The foundation of a color scheme is the set of five key colors. Each of these colors relate to a tonal palette of 13 tones, which are used by Material 3 components. For example, this is the color scheme for light theme for <a href="https://github.com/android/compose-samples/tree/main/Reply" class="external">Reply</a>: <figure id = "image-3" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-light.png" width = "70%" alt = "Reply sample app light color scheme"> <figcaption>Figure 3. Reply sample app light color scheme</figcaption> </figure> Read more about the <a href="https://m3.material.io/styles/color/the-color-system/key-colors-tones" class="external">Color scheme and color roles</a>. <h4 id="generate_color_schemes" data-text="Generate color schemes" tabindex="-1">Generate color schemes</h4> While you can create a custom <code translate="no" dir="ltr">ColorScheme</code> manually, it’s often easier to generate one using source colors from your brand. The <a href="https://material.io/material-theme-builder" class="external">Material Theme Builder</a> tool allows you to do this, and optionally export Compose theming code. The following files are generated: <ul> <li><code translate="no" dir="ltr">Color.kt</code> contains the colors of your theme with all the roles defined for both light and dark theme colors.</li> </ul> <div></div><devsite-code><pre id="android_compose_material3_theme_colors-code-sample" data-scope="android_compose_material3_theme_colors" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_theme_colors" data-copy-event-label="android_compose_material3_theme_colors-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">val md_theme_light_primary = Color(0xFF476810) val md_theme_light_onPrimary = Color(0xFFFFFFFF) val md_theme_light_primaryContainer = Color(0xFFC7F089) // .. // .. val md_theme_dark_primary = Color(0xFFACD370) val md_theme_dark_onPrimary = Color(0xFF213600) val md_theme_dark_primaryContainer = Color(0xFF324F00) // .. // ..<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L96-L106" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_theme_colors" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_theme_colors">Material3Snippets.kt</a></div></pre></devsite-code> <ul> <li><code translate="no" dir="ltr">Theme.kt</code> contains a setup for light and dark color schemes and the app theme.</li> </ul> <div></div><devsite-code><pre id="android_compose_material3_theme_color_setup-code-sample" data-scope="android_compose_material3_theme_color_setup" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_theme_color_setup" data-copy-event-label="android_compose_material3_theme_color_setup-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">private val LightColorScheme = lightColorScheme( primary = md_theme_light_primary, onPrimary = md_theme_light_onPrimary, primaryContainer = md_theme_light_primaryContainer, // .. ) private val DarkColorScheme = darkColorScheme( primary = md_theme_dark_primary, onPrimary = md_theme_dark_onPrimary, primaryContainer = md_theme_dark_primaryContainer, // .. ) @Composable fun ReplyTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { val colorScheme = if (!darkTheme) { LightColorScheme } else { DarkColorScheme } MaterialTheme( colorScheme = colorScheme, content = content ) }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L110-L138" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_theme_color_setup" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_theme_color_setup">Material3Snippets.kt</a></div></pre></devsite-code> To support light and dark themes, use <code translate="no" dir="ltr">isSystemInDarkTheme()</code>. Based on the system setting, define which color scheme to use: light or dark. <h4 id="dynamic_color_schemes" data-text="Dynamic color schemes" tabindex="-1">Dynamic color schemes</h4> <a href="https://m3.material.io/styles/color/dynamic-color/overview" class="external">Dynamic color</a> is the key part of Material You, in which an algorithm derives custom colors from a user’s wallpaper to be applied to their apps and system UI. This color palette is used as the starting point to generate light and dark color schemes. <figure id = "image-4" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-dynamic.png" width = "70%" alt = "Reply sample app dynamic theming from wallpaper (left) and default app theming (right) "> <figcaption>Figure 4. Reply sample app dynamic theming from wallpaper (left) and default app theming (right)</figcaption> </figure> Dynamic color is available on Android 12 and above. If dynamic color is available, you can set up a dynamic <code translate="no" dir="ltr">ColorScheme</code>. If not, you should fall back to using a custom light or dark <code translate="no" dir="ltr">ColorScheme</code>. <code translate="no" dir="ltr">ColorScheme</code> provides builder functions to create a dynamic <a href="/reference/kotlin/androidx/compose/material3/package-summary#dynamiclightcolorscheme">light</a> or <a href="/reference/kotlin/androidx/compose/material3/package-summary#dynamicdarkcolorscheme">dark</a> color scheme: <div></div><devsite-code><pre id="android_compose_material3_theme_dynamic_color-code-sample" data-scope="android_compose_material3_theme_dynamic_color" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_theme_dynamic_color" data-copy-event-label="android_compose_material3_theme_dynamic_color-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">// Dynamic color is available on Android 12+ val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S val colors = when { dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current) dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current) darkTheme -> DarkColorScheme else -> LightColorScheme }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L144-L151" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_theme_dynamic_color" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_theme_dynamic_color">Material3Snippets.kt</a></div></pre></devsite-code> <h4 id="color_usage" data-text="Color usage" tabindex="-1">Color usage</h4> You can access Material theme colors in your app via <code translate="no" dir="ltr">MaterialTheme.colorScheme</code>: <div></div><devsite-code><pre id="android_compose_material3_use_color_theme-code-sample" data-scope="android_compose_material3_use_color_theme" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_use_color_theme" data-copy-event-label="android_compose_material3_use_color_theme-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">Text( text = "Hello theming", color = MaterialTheme.colorScheme.primary )<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L158-L161" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_use_color_theme" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_use_color_theme">Material3Snippets.kt</a></div></pre></devsite-code> Each color role can be used in a variety of places depending on the component’s state, prominence, and emphasis. <ul> <li>Primary is the base color, used for main components like prominent buttons, active states, and the tint of elevated surfaces.</li> <li>The secondary key color is used for less prominent components in the UI, such as filter chips, and expands the opportunity for color expression.</li> <li>The tertiary key color is used to derive the roles of contrasting accents that can be used to balance primary and secondary colors or bring enhanced attention to an element.</li> </ul> The Reply sample app design uses on-primary-container color on top of primary-container to put emphasis on the selected item. <figure id = "image-5" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-container.png" width = "75%" alt = "Primary container and text fields with on-primary-container color."> <figcaption>Figure 5. Primary container and text fields with on-primary-container color.</figcaption> </figure> <div></div><devsite-code><pre id="android_compose_material3_use_color_theme_2-code-sample" data-scope="android_compose_material3_use_color_theme_2" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_use_color_theme_2" data-copy-event-label="android_compose_material3_use_color_theme_2-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">Card( colors = CardDefaults.cardColors( containerColor = if (isSelected) MaterialTheme.colorScheme.primaryContainer else MaterialTheme.colorScheme.surfaceVariant ) ) { Text( text = "Dinner club", style = MaterialTheme.typography.bodyLarge, color = if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer else MaterialTheme.colorScheme.onSurface, ) } <div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L171-L187" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_use_color_theme_2" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_use_color_theme_2">Material3Snippets.kt</a></div></pre></devsite-code> Here you can see in the Reply Navigation drawer how secondary and tertiary container colors are used in contrast to create emphasis and accent. <figure id = "image-6" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-navdrawer.png" width = "65%" alt = "Tertiary-container and on-tertiary-container combination for Floating Action button."> <figcaption>Figure 6. Tertiary-container and on-tertiary-container combination for Floating Action button. </figcaption> </figure> <h3 id="typography" data-text="Typography" tabindex="-1">Typography</h3> Material Design 3 defines a <a href="https://m3.material.io/styles/typography/overview" class="external">type scale</a>, including text styles that have been adapted from Material Design 2. The naming and grouping have been simplified to: display, headline, title, body, and label, with large, medium, and small sizes for each. <figure id = "image-7" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-typography.png" width = "65%" alt = "Default typography scale for Material design 3"> <figcaption>Figure 7. Default typography scale for Material Design 3</figcaption> </figure> <table> <tr> <td>M3</td> <td>Default Font Size/Line Height</td> </tr> <tr> <td><code translate="no" dir="ltr">displayLarge</code></td> <td><code translate="no" dir="ltr">Roboto 57/64</code></td> </tr> <tr> <td><code translate="no" dir="ltr">displayMedium</code></td> <td><code translate="no" dir="ltr">Roboto 45/52</code></td> </tr> <tr> <td><code translate="no" dir="ltr">displaySmall</code></td> <td><code translate="no" dir="ltr">Roboto 36/44</code></td> </tr> <tr> <td><code translate="no" dir="ltr">headlineLarge</code></td> <td><code translate="no" dir="ltr">Roboto 32/40</code></td> </tr> <tr> <td><code translate="no" dir="ltr">headlineMedium</code></td> <td><code translate="no" dir="ltr">Roboto 28/36</code></td> </tr> <tr> <td><code translate="no" dir="ltr">headlineSmall</code></td> <td><code translate="no" dir="ltr">Roboto 24/32</code></td> </tr> <tr> <td><code translate="no" dir="ltr">titleLarge</code></td> <td><code translate="no" dir="ltr">New- Roboto Medium 22/28</code></td> </tr> <tr> <td><code translate="no" dir="ltr">titleMedium</code></td> <td><code translate="no" dir="ltr">Roboto Medium 16/24</code></td> </tr> <tr> <td><code translate="no" dir="ltr">titleSmall</code></td> <td><code translate="no" dir="ltr">Roboto Medium 14/20</code></td> </tr> <tr> <td><code translate="no" dir="ltr">bodyLarge</code></td> <td><code translate="no" dir="ltr">Roboto 16/24</code></td> </tr> <tr> <td><code translate="no" dir="ltr">bodyMedium</code></td> <td><code translate="no" dir="ltr">Roboto 14/20</code></td> </tr> <tr> <td><code translate="no" dir="ltr">bodySmall</code></td> <td><code translate="no" dir="ltr">Roboto 12/16</code></td> </tr> <tr> <td><code translate="no" dir="ltr">labelLarge</code></td> <td><code translate="no" dir="ltr">Roboto Medium 14/20</code></td> </tr> <tr> <td><code translate="no" dir="ltr">labelMedium</code></td> <td><code translate="no" dir="ltr">Roboto Medium 12/16</code></td> </tr> <tr> <td><code translate="no" dir="ltr">labelSmall</code></td> <td><code translate="no" dir="ltr">New Roboto Medium, 11/16</code></td> </tr> </table> <aside class="note">Note: Unlike the M2 <code translate="no" dir="ltr">Typography</code> class, the M3 <code translate="no" dir="ltr">Typography</code> class doesn’t currently include a <code translate="no" dir="ltr">defaultFontFamily</code> parameter. You’ll need to use the <code translate="no" dir="ltr">fontFamily</code> parameter in each of the individual <code translate="no" dir="ltr">TextStyles</code> instead.</aside> <h4 id="define_typography" data-text="Define typography" tabindex="-1">Define typography</h4> Compose provides the M3 <a href="/reference/kotlin/androidx/compose/material3/Typography"><code translate="no" dir="ltr">Typography</code></a> class — along with the existing <a href="/reference/kotlin/androidx/compose/ui/text/TextStyle"><code translate="no" dir="ltr">TextStyle</code></a> and <a href="/reference/kotlin/androidx/compose/ui/text/font/package-summary">font-related</a> classes — to model the Material 3 type scale. The <code translate="no" dir="ltr">Typography</code> constructor offers defaults for each style so you can omit any parameters you do not want to customize: <div></div><devsite-code><pre id="android_compose_material3_typography_definition-code-sample" data-scope="android_compose_material3_typography_definition" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_typography_definition" data-copy-event-label="android_compose_material3_typography_definition-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">val replyTypography = Typography( titleLarge = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 22.sp, lineHeight = 28.sp, letterSpacing = 0.sp ), titleMedium = TextStyle( fontWeight = FontWeight.SemiBold, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp ), // .. ) // ..<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L194-L209" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_typography_definition" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_typography_definition">Material3Snippets.kt</a></div></pre></devsite-code> <figure id = "image-8" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-body.png" width = "70%" alt = "Body large, body medium and label medium for different typography usage."> <figcaption>Figure 8. Body large, body medium, and label medium for different typography usage.</figcaption> </figure> Your product will likely not need all 15 default styles from the Material Design type scale. In this example, five sizes are chosen for a reduced set while the rest are omitted. You can customize your typography by changing default values of <a href="/reference/kotlin/androidx/compose/ui/text/TextStyle"><code translate="no" dir="ltr">TextStyle</code></a> and <a href="/reference/kotlin/androidx/compose/ui/text/font/package-summary">font-related</a> properties like <code translate="no" dir="ltr">fontFamily</code> and <code translate="no" dir="ltr">letterSpacing</code>. <div></div><devsite-code><pre id="android_compose_material3_typography_body_large-code-sample" data-scope="android_compose_material3_typography_body_large" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_typography_body_large" data-copy-event-label="android_compose_material3_typography_body_large-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">bodyLarge = TextStyle( fontWeight = FontWeight.Normal, fontFamily = FontFamily.SansSerif, fontStyle = FontStyle.Italic, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.15.sp, baselineShift = BaselineShift.Subscript ),<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L214-L222" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_typography_body_large" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_typography_body_large">Material3Snippets.kt</a></div></pre></devsite-code> Once you have defined your <code translate="no" dir="ltr">Typography</code>, pass it to the M3 <code translate="no" dir="ltr">MaterialTheme</code>: <div></div><devsite-code><pre id="android_compose_material3_typography_theme_setup-code-sample" data-scope="android_compose_material3_typography_theme_setup" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_typography_theme_setup" data-copy-event-label="android_compose_material3_typography_theme_setup-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">MaterialTheme( typography = replyTypography, ) { // M3 app Content }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L229-L233" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_typography_theme_setup" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_typography_theme_setup">Material3Snippets.kt</a></div></pre></devsite-code> <h4 id="use_text_styles" data-text="Use text styles" tabindex="-1">Use text styles</h4> You can retrieve the typography provided to the M3 <code translate="no" dir="ltr">MaterialTheme</code> composable by using <code translate="no" dir="ltr">MaterialTheme.typography</code>: <div></div><devsite-code><pre id="android_compose_material3_typography_use-code-sample" data-scope="android_compose_material3_typography_use" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_typography_use" data-copy-event-label="android_compose_material3_typography_use-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">Text( text = "Hello M3 theming", style = MaterialTheme.typography.titleLarge ) Text( text = "you are learning typography", style = MaterialTheme.typography.bodyMedium )<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L240-L247" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_typography_use" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_typography_use">Material3Snippets.kt</a></div></pre></devsite-code> You can read more about the Material guidelines on <a href="https://m3.material.io/styles/typography/applying-type" class="external">applying typography</a>. <h3 id="shapes" data-text="Shapes" tabindex="-1">Shapes</h3> Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand. The shape scale defines the style of container corners, offering a range of roundedness from square to fully circular. <h4 id="define_shapes" data-text="Define shapes" tabindex="-1">Define shapes</h4> Compose provides the M3 <a href="/reference/kotlin/androidx/compose/material3/Shapes"><code translate="no" dir="ltr">Shapes</code></a> class with expanded parameters to support new M3 shapes. The M3 shape scale is more like the <a href="https://m3.material.io/styles/typography/" class="external">type scale</a>, enabling an expressive range of shapes across the UI. There are different sizes of shapes: <ul> <li>Extra Small</li> <li>Small</li> <li>Medium</li> <li>Large</li> <li>Extra Large</li> </ul> By default, each shape has a default value, but you can override those: <div></div><devsite-code><pre id="android_compose_material3_shape_setup-code-sample" data-scope="android_compose_material3_shape_setup" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_shape_setup" data-copy-event-label="android_compose_material3_shape_setup-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">val replyShapes = Shapes( extraSmall = RoundedCornerShape(4.dp), small = RoundedCornerShape(8.dp), medium = RoundedCornerShape(12.dp), large = RoundedCornerShape(16.dp), extraLarge = RoundedCornerShape(24.dp) )<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L254-L260" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_shape_setup" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_shape_setup">Material3Snippets.kt</a></div></pre></devsite-code> Once you have defined your <code translate="no" dir="ltr">Shapes</code>, you can pass it to the M3 <code translate="no" dir="ltr">MaterialTheme</code>: <div></div><devsite-code><pre id="android_compose_material3_shape_theme-code-sample" data-scope="android_compose_material3_shape_theme" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_shape_theme" data-copy-event-label="android_compose_material3_shape_theme-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">MaterialTheme( shapes = replyShapes, ) { // M3 app Content }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L266-L270" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_shape_theme" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_shape_theme">Material3Snippets.kt</a></div></pre></devsite-code> <h4 id="use_shapes" data-text="Use shapes" tabindex="-1">Use shapes</h4> You can customize the shape scale for all components in the <code translate="no" dir="ltr">MaterialTheme</code> or you can do it on a per component basis. Apply medium and large shape with default values: <div></div><devsite-code><pre id="android_compose_material3_shape_usage-code-sample" data-scope="android_compose_material3_shape_usage" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_shape_usage" data-copy-event-label="android_compose_material3_shape_usage-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">Card(shape = MaterialTheme.shapes.medium) { /* card content */ } FloatingActionButton( shape = MaterialTheme.shapes.large, onClick = { } ) { /* fab content */ }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L277-L284" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_shape_usage" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_shape_usage">Material3Snippets.kt</a></div></pre></devsite-code> <figure id = "image-9" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-shape.png" width = "65%" alt = "Medium shape for Card and Large shape for Floating action button in Reply sample app."> <figcaption>Figure 9. Medium shape for Card and Large shape for Floating action button in Reply sample app</figcaption> </figure> There are two other shapes — <code translate="no" dir="ltr">RectangleShape</code> and <code translate="no" dir="ltr">CircleShape</code> — which are part of Compose. Rectangle shape is with no border radius and circle shape shows full circled edges: <div></div><devsite-code><pre id="android_compose_material3_shape_usage_2-code-sample" data-scope="android_compose_material3_shape_usage_2" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_shape_usage_2" data-copy-event-label="android_compose_material3_shape_usage_2-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">Card(shape = RectangleShape) { /* card content */ } Card(shape = CircleShape) { /* card content */ }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L290-L291" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_shape_usage_2" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_shape_usage_2">Material3Snippets.kt</a></div></pre></devsite-code> The examples below demonstrate some of the components with default shape values applied to them: <figure id = "image-10" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-shape2.png" width = 40%" alt = "Default shapes values for all Material 3 components."> <figcaption>Figure 10. Default shapes values for all Material 3 components.</figcaption> </figure> You can read more about the Material guidelines on <a href="https://m3.material.io/styles/shape/overview" class="external">applying shape</a>. <h3 id="emphasis" data-text="Emphasis" tabindex="-1">Emphasis</h3> Emphasis in M3 is provided using variations of color and its on-color combinations. In M3, there are two ways to add emphasis to your UI: <ul> <li>Using surface, surface-variant and background alongside on-surface, on-surface-variants colors from the expanded M3 color system. For example, surface can be used with on-surface-variant and surface-variant can be used with on-surface to provide different levels of emphasis.</li> </ul> <figure id = "image-11" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-emphasis.png" width = "80%" alt = "Using neutral color combinations for emphasis."> <figcaption>Figure 11. Using neutral color combinations for emphasis.</figcaption> </figure> <ul> <li>Using different font weights for text. Above, you saw that you can provide custom weights to our type scale for providing different emphasis.</li> </ul> <div></div><devsite-code><pre id="android_compose_material3_emphasis-code-sample" data-scope="android_compose_material3_emphasis" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_emphasis" data-copy-event-label="android_compose_material3_emphasis-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">bodyLarge = TextStyle( fontWeight = FontWeight.Bold ), bodyMedium = TextStyle( fontWeight = FontWeight.Normal )<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L299-L304" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_emphasis" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_emphasis">Material3Snippets.kt</a></div></pre></devsite-code> <aside class="note">Note: For disabled states in M3, it’s still acceptable to use “on-x” (where x can be primary, secondary, surface etc.) colors with alpha values.</aside> <h2 id="elevation" data-text="Elevation" tabindex="-1">Elevation</h2> Material 3 represents elevation mainly using tonal color overlays. This is a new way to differentiate containers and surfaces from each other — increasing tonal elevation uses a more prominent tone — in addition to shadows. <figure id = "image-12" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-elevation.png" width = "50%" alt = "Tonal elevation with shadow elevation"> <figcaption>Figure 12. Tonal elevation with shadow elevationE</figcaption> </figure> Elevation overlays in dark themes have also changed to tonal color overlays in Material 3. The overlay color comes from the primary color slot. <figure id = "image-13" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-surface.png" width = "50%" alt = "Shadow elevation vs Tonal elevation in Material Design 3"> <figcaption>Figure 13. Shadow elevation versus Tonal elevation in Material Design 3</figcaption> </figure> The M3 <a href="https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#Surface(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0)">Surface</a> — the backing composable behind most M3 components — includes support for both tonal and shadow elevation: <div></div><devsite-code><pre id="android_compose_material3_elevation-code-sample" data-scope="android_compose_material3_elevation" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_elevation" data-copy-event-label="android_compose_material3_elevation-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">Surface( modifier = Modifier, tonalElevation = /*... shadowElevation = /*... ) { Column(content = content) }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L311-L317" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_elevation" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_elevation">Material3Snippets.kt</a></div></pre></devsite-code> <h2 id="material-components" data-text="Material components" tabindex="-1">Material components</h2> Material Design comes with a rich set of <a href="https://m3.material.io/components/all-buttons" class="external">Material components</a> (such as buttons, chips, cards, navigation bar) which already follow Material Theming and help you make beautiful Material Design apps. You can start using components with default properties right out of the box. <div></div><devsite-code><pre id="android_compose_material3_button_usage-code-sample" data-scope="android_compose_material3_button_usage" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_button_usage" data-copy-event-label="android_compose_material3_button_usage-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">Button(onClick = { /*..*/ }) { Text(text = "My Button") }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L325-L327" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_button_usage" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_button_usage">Material3Snippets.kt</a></div></pre></devsite-code> M3 provides many versions of the same components to be used in different roles according to emphasis and attention. <figure id = "image-14" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-emphasis2.png" width = "50%" alt = "Button emphasis from FAB, Primary down to Text button"> <figcaption>Figure 14. Button emphasis from FAB, Primary down to Text button</figcaption> </figure> <ul> <li>An extended floating action button for the highest emphasis action:</li> </ul> <div></div><devsite-code><pre id="android_compose_material3_extended_button_usage-code-sample" data-scope="android_compose_material3_extended_button_usage" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_extended_button_usage" data-copy-event-label="android_compose_material3_extended_button_usage-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">ExtendedFloatingActionButton( onClick = { /*..*/ }, modifier = Modifier ) { Icon( imageVector = Icons.Default.Edit, contentDescription = stringResource(id = R.string.edit), ) Text( text = stringResource(id = R.string.add_entry), ) }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L334-L345" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_extended_button_usage" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_extended_button_usage">Material3Snippets.kt</a></div></pre></devsite-code> <ul> <li>A filled button for a high emphasis action:</li> </ul> <div></div><devsite-code><pre id="android_compose_material3_filled_button_high_emphasis-code-sample" data-scope="android_compose_material3_filled_button_high_emphasis" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_filled_button_high_emphasis" data-copy-event-label="android_compose_material3_filled_button_high_emphasis-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">Button(onClick = { /*..*/ }) { Text(text = stringResource(id = R.string.view_entry)) }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L351-L353" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_filled_button_high_emphasis" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_filled_button_high_emphasis">Material3Snippets.kt</a></div></pre></devsite-code> <ul> <li>A text button for a low emphasis action:</li> </ul> <div></div><devsite-code><pre id="android_compose_material3_text_button_low_emphasis-code-sample" data-scope="android_compose_material3_text_button_low_emphasis" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_text_button_low_emphasis" data-copy-event-label="android_compose_material3_text_button_low_emphasis-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">TextButton(onClick = { /*..*/ }) { Text(text = stringResource(id = R.string.replated_articles)) }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L359-L361" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_text_button_low_emphasis" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_text_button_low_emphasis">Material3Snippets.kt</a></div></pre></devsite-code> You can read more about Material <a href="https://m3.material.io/components/all-buttons" class="external">buttons and other components</a>. Material 3 provides a wide variety of component suites such as Buttons, App bars, Navigation components that are specifically designed for different use cases and screen sizes. <h3 id="navigation-components" data-text="Navigation components" tabindex="-1">Navigation components</h3> Material also provides several navigation components that help you implement navigation, depending on different screen sizes and states. <code translate="no" dir="ltr">NavigationBar</code> is used for compact devices when you want to target 5 or less destinations: <div></div><devsite-code><pre id="android_compose_material3_nav_bar_usage-code-sample" data-scope="android_compose_material3_nav_bar_usage" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_nav_bar_usage" data-copy-event-label="android_compose_material3_nav_bar_usage-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">NavigationBar(modifier = Modifier.fillMaxWidth()) { Destinations.entries.forEach { replyDestination -> NavigationBarItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { } ) } }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L376-L384" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_nav_bar_usage" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_nav_bar_usage">Material3Snippets.kt</a></div></pre></devsite-code> <code translate="no" dir="ltr">NavigationRail</code> is used for small-to-medium size tablets or phones in landscape mode. It provides ergonomics to users and improves the user experience for those devices. <div></div><devsite-code><pre id="android_compose_material3_nav_rail_usage-code-sample" data-scope="android_compose_material3_nav_rail_usage" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_nav_rail_usage" data-copy-event-label="android_compose_material3_nav_rail_usage-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">NavigationRail( modifier = Modifier.fillMaxHeight(), ) { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { } ) } }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L393-L403" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_nav_rail_usage" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_nav_rail_usage">Material3Snippets.kt</a></div></pre></devsite-code> <figure id = "image-15" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-showcasebottom.png" width = "75%" alt = "Reply Showcase of BottomNavigationBar(Left) and NavigationRail(Right)"> <figcaption>Figure 15. Reply Showcase of <code translate="no" dir="ltr">BottomNavigationBar</code> (Left) and <code translate="no" dir="ltr">NavigationRail</code> (Right)</figcaption> </figure> Reply using both in default theming to provide immersive user experience for all device sizes. <code translate="no" dir="ltr">NavigationDrawer</code> is used for medium-to-large size tablets where you have enough space to show detail. You can use both <code translate="no" dir="ltr">PermanentNavigationDrawer</code> or <code translate="no" dir="ltr">ModalNavigationDrawer</code> along with <code translate="no" dir="ltr">NavigationRail</code>. <div></div><devsite-code><pre id="android_compose_material3_permanent_nav_drawer-code-sample" data-scope="android_compose_material3_permanent_nav_drawer" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_permanent_nav_drawer" data-copy-event-label="android_compose_material3_permanent_nav_drawer-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = { Destinations.entries.forEach { replyDestination -> NavigationRailItem( selected = selectedDestination == replyDestination, onClick = { }, icon = { }, label = { } ) } }) { }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L412-L422" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_permanent_nav_drawer" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_permanent_nav_drawer">Material3Snippets.kt</a></div></pre></devsite-code> <figure id = "image-16" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-showcasedrawer.png" width = "50%" alt = "Reply Showcase of Permanent navigation drawer"> <figcaption>Figure 16. Reply showcase of permanent navigation drawer</figcaption> </figure> Navigation options enhance the user experience, ergonomics and reachability. You can learn more about Material navigation components in the <a href="https://codelabs.developers.google.com/jetpack-compose-adaptability" class="external">Compose adaptive codelab</a>. <h3 id="customizing-components" data-text="Customize a component's theming" tabindex="-1">Customize a component's theming</h3> M3 encourages personalization and flexibility. All components have default colors applied to them but expose flexible APIs to customize their colors if required. Most components, like cards and buttons, provide a default object exposing color and elevation interfaces that can be modified to customize your component: <div></div><devsite-code><pre id="android_compose_material3_card_theming-code-sample" data-scope="android_compose_material3_card_theming" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_card_theming" data-copy-event-label="android_compose_material3_card_theming-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">val customCardColors = CardDefaults.cardColors( contentColor = MaterialTheme.colorScheme.primary, containerColor = MaterialTheme.colorScheme.primaryContainer, disabledContentColor = MaterialTheme.colorScheme.surface, disabledContainerColor = MaterialTheme.colorScheme.onSurface, ) val customCardElevation = CardDefaults.cardElevation( defaultElevation = 8.dp, pressedElevation = 2.dp, focusedElevation = 4.dp ) Card( colors = customCardColors, elevation = customCardElevation ) { // m3 card content }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L429-L445" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_card_theming" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_card_theming">Material3Snippets.kt</a></div></pre></devsite-code> You can read more about <a href="https://m3.material.io/foundations/customization" class="external">customizing Material 3</a>. <h2 id="system-ui" data-text="System UI" tabindex="-1">System UI</h2> Some aspects of Material You come from the new visual style and system UI on Android 12 and above. Two key areas where there are changes are ripple and overscroll. No additional work is required to implement these changes. <h3 id="ripple" data-text="Ripple" tabindex="-1">Ripple</h3> Ripple now uses a subtle sparkle to illuminate surfaces when pressed. <a href="/reference/kotlin/androidx/compose/material/ripple/package-summary">Compose Material Ripple</a> uses a platform RippleDrawable under the hood on Android, so sparkle ripple is available on Android 12 and above for all Material components. <figure id = "image-17" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-ripple.gif" width = "50%" alt = "Ripple in M2 vs M3"> <figcaption>Figure 17. Ripple in M2 versus M3</figcaption> </figure> <h3 id="overscroll" data-text="Overscroll" tabindex="-1">Overscroll</h3> Overscroll now uses a <a href="/about/versions/12/behavior-changes-all#overscroll">stretch effect</a> at the edge of scrolling containers. Stretch overscroll is on by default in scrolling container composables — for example, <a href="/reference/kotlin/androidx/compose/foundation/lazy/package-summary#lazycolumn"><code translate="no" dir="ltr">LazyColumn</code></a>, <a href="/reference/kotlin/androidx/compose/foundation/lazy/package-summary#lazyrow"><code translate="no" dir="ltr">LazyRow</code></a>, and <a href="/reference/kotlin/androidx/compose/foundation/lazy/package-summary#lazyverticalgrid"><code translate="no" dir="ltr">LazyVerticalGrid</code></a> — in <a href="/jetpack/androidx/releases/compose-foundation">Compose Foundation</a> 1.1.0 and above, regardless of API level. <figure id = "image-18" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-overscroll.gif" width = "35%" alt = "Overscroll using stretch effect at the edge of the container"> <figcaption>Figure 18. Overscroll using stretch effect at the edge of the container</figcaption> </figure> <h2 id="accessibility" data-text="Accessibility" tabindex="-1">Accessibility</h2> Accessibility standards built into Material components are designed to provide a foundation for inclusive product design. Understanding your product’s accessibility can enhance usability for all users, including those with low vision, blindness, hearing impairments, cognitive impairments, motor impairments, or situational disabilities (such as a broken arm). <h3 id="color-accessibility" data-text="Color accessibility" tabindex="-1">Color accessibility</h3> Dynamic color is designed to meet accessibility standards for color contrast. The system of tonal palettes is critical to making any color scheme accessible by default. Material's color system provides standard tone values and measurements that can be used to meet accessible contrast ratios. <figure id = "image-19" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-colorpallets.png" width = "65%" alt = "Reply sample app: Primary, secondary and tertiary tonal pallets (top to bottom)"> <figcaption>Figure 19. Reply sample app: Primary, secondary and tertiary tonal palettes (top to bottom)</figcaption> </figure> All Material components and dynamic theming already use the above color roles from a set of <a href="https://m3.material.io/styles/color/the-color-system/key-colors-tones#a828e350-1551-45e5-8430-eb643e6a7713" class="external">tonal palettes</a>, selected to meet accessibility requirements. However, if you are customizing components, make sure to use appropriate color roles and avoid mismatch. Use on-primary on top of primary, and on-primary-container on top of primary-container, and the same for other accent and neutral colors to provide accessible contrast to the user. The use of a tertiary container on top of primary gives the user a poor contrast button: <div></div><devsite-code><pre id="android_compose_material3_button_contrast_example-code-sample" data-scope="android_compose_material3_button_contrast_example" data-code-snippet="true" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_button_contrast_example" data-copy-event-label="android_compose_material3_button_contrast_example-Material3Snippets" class="devsite-click-to-copy notranslate" dir="ltr" is-upgraded syntax="Kotlin">// ✅ Button with sufficient contrast ratio Button( onClick = { }, colors = ButtonDefaults.buttonColors( containerColor = MaterialTheme.colorScheme.primary, contentColor = MaterialTheme.colorScheme.onPrimary ) ) { } // ❌ Button with poor contrast ratio Button( onClick = { }, colors = ButtonDefaults.buttonColors( containerColor = MaterialTheme.colorScheme.tertiaryContainer, contentColor = MaterialTheme.colorScheme.primaryContainer ) ) { }<div class="devsite-github-link nocode no-select"><a target="_top" href="https://github.com/android/snippets/blob/d2ccac0e57f635b49aea57804c3ff6ab3ddafd15/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#L454-L472" class="gc-analytics-event" data-category="github_link" data-label="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt#android_compose_material3_button_contrast_example" data-code-snippet="true" data-git-revision="main" data-github-path="android/snippets/compose/snippets/src/main/java/com/example/compose/snippets/designsystems/Material3Snippets.kt" data-region-tag="android_compose_material3_button_contrast_example">Material3Snippets.kt</a></div></pre></devsite-code> <figure id = "image-20" style="text-align:center;"> <img src="/static/develop/ui/compose/images/m3-contrast.png" width = "50%" alt = "Sufficient contrast (left) vs Poor contrast (right)"> <figcaption>Figure 20. Sufficient contrast (left) versus poor contrast (right)</figcaption> </figure> <h3 id="typography-accessibility" data-text="Typography accessibility" tabindex="-1">Typography accessibility</h3> The M3 type scale updates the static type ramp and values to offer a simplified but dynamic framework of size categories that scale across devices. For example, in M3, Display Small can be assigned different values depending upon the device context, such as a phone or a tablet. <h2 id="large-screens" data-text="Large screens" tabindex="-1">Large screens</h2> Material provides guidance on adaptive layouts and foldables to make your apps accessible and improve the ergonomics of users holding large devices. Material provides different kinds of <a href="https://m3.material.io/components/navigation-bar/overview" class="external">navigation</a> to help you provide better user experience for large devices. You can learn more about Android <a href="/docs/quality-guidelines/large-screen-app-quality">large screen app quality guidelines</a> and see our <a href="https://github.com/android/compose-samples/tree/main/Reply" class="external">Reply sample</a> for adaptive and accessible design. <h2 id="learn-more" data-text="Learn more" tabindex="-1">Learn more</h2> To learn more about Material Theming in Compose, check out the following resources: <h3 id="sample-apps" data-text="Sample apps" tabindex="-1">Sample apps</h3> <ul> <li><a href="https://github.com/android/compose-samples/tree/main/Reply" class="external">Reply M3 sample app</a> </li> </ul> <h3 id="docs" data-text="Docs" tabindex="-1">Docs</h3> <ul> <li><a href="/develop/ui/compose/designsystems/material2-material3">Migrating from Material 2 to Material 3 in Compose</a></li> <li><a href="https://m3.material.io/" class="external">Material design guidelines</a> </li> </ul> <h3 id="api-reference" data-text="API reference and source code" tabindex="-1">API reference and source code</h3> <ul> <li><a href="/reference/kotlin/androidx/compose/material3/package-summary">Compose Material 3 API reference</a></li> <li><a href="https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/samples/src/main/java/androidx/compose/material3/samples/" class="external">Compose Material 3 samples in source code</a> </li> </ul> <h3 id="videos" data-text="Videos" tabindex="-1">Videos</h3> <ul> <li><a href="https://www.youtube.com/watch?v=jrfuHyMlehc" class="external">Material You in Jetpack Compose</a> </li> </ul> <devsite-recommendations> <h2 id="recommended_for_you" data-text="Recommended for you" tabindex="-1">Recommended for you</h2> <ul> <li>Note: link text is displayed when JavaScript is off</li> <li><a href="/develop/ui/compose/designsystems/material2-material3">Migrate from Material 2 to Material 3 in Compose</a></li> <li><a href="/develop/ui/compose/designsystems/material">Material Design 2 in Compose</a></li> <li><a href="/develop/ui/compose/designsystems/custom">Custom design systems in Compose</a></li> </ul> </devsite-recommendations> <devsite-hats-survey class="nocontent" hats-id="m71UDKaJT0kxBYCLVTd0U6CJGcqa" listnr-id="5207477"></devsite-hats-survey> </div> <devsite-recommendations display="in-page" hidden yield> </devsite-recommendations> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <devsite-recommendations id="recommendations-link" yield></devsite-recommendations> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> 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. Last updated 2025-02-13 UTC. </devsite-content-footer> <devsite-notification link="https://google.qualtrics.com/jfe/form/SV_cRR9tonbkUQYb5Q?link=dac" link-text="Take survey" message="Please help us improve the Android Developer experience by taking a short survey." > </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 2025-02-13 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> X </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> YouTube </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> LinkedIn </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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/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"> Get news and tips by email <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-contained--primary .devsite-landing-row-item, .android-grouped-resources-contained--secondary .devsite-landing-row-item, .android-grouped-resources-contained--tertiary .devsite-landing-row-item, .android-grouped-resources-uncontained--primary .devsite-landing-row-item, .android-grouped-resources-uncontained--secondary .devsite-landing-row-item, .android-grouped-resources-uncontained--tertiary .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="LrRwFMlDs3LakhO3i+LawKjOo4/tGn"> (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/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/android/js/app_loader.js', '[3,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/android","https://android-dot-devsite-v2-prod.appspot.com",null,null,["/_pwa/android/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/android/images/favicon.svg","https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/android/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500,600,700|Google+Sans+Text:400,400italic,500,500italic,600,600italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","developer.android.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Concierge__enable_pushui","Profiles__enable_profile_collections","DevPro__enable_cloud_innovators_plus","DevPro__enable_developer_subscriptions","Cloud__enable_legacy_calculator_redirect","Search__enable_suggestions_from_borg","Cloud__enable_cloudx_experiment_ids","Profiles__enable_completequiz_endpoint","Cloud__enable_cloudx_ping","MiscFeatureFlags__enable_view_transitions","CloudShell__cloud_shell_button","MiscFeatureFlags__enable_explain_this_code","Profiles__enable_release_notes_notifications","Profiles__enable_join_program_group_endpoint","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__enable_project_variables","Analytics__enable_clearcut_logging","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_dashboard_curated_recommendations","Profiles__enable_awarding_url","MiscFeatureFlags__enable_firebase_utm","Significatio__enable_by_tenant","Profiles__enable_page_saving","Search__enable_dynamic_content_confidential_banner","Profiles__enable_recognition_badges","TpcFeatures__enable_unmirrored_page_left_nav","Experiments__reqs_query_experiments","CloudShell__cloud_code_overflow_menu","Cloud__enable_cloud_shell","Cloud__enable_free_trial_server_call","MiscFeatureFlags__enable_dark_theme","Profiles__enable_public_developer_profiles","Profiles__enable_developer_profiles_callout","Profiles__require_profile_eligibility_for_signin","Profiles__enable_complete_playlist_endpoint","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__emergency_css","Profiles__enable_completecodelab_endpoint","Cloud__enable_cloud_shell_fte_user_flow","BookNav__enable_tenant_cache_key","Profiles__enable_stripe_subscription_management","Cloud__enable_cloud_dlp_service","Search__enable_ai_eligibility_checks","MiscFeatureFlags__enable_variable_operator","Search__enable_page_map","Cloud__enable_llm_concierge_chat","Search__enable_ai_search_summaries","EngEduTelemetry__enable_engedu_telemetry","Cloud__enable_cloud_facet_chat"],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,2,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",1]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Material Design 3 in Compose | Jetpack Compose | Android Developers