Mobile | UI Design | Android Developers

<!doctype html> <html lang="en" dir="ltr"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("http://web.archive.org/web"); __wm.wombat("https://developer.android.com/design/ui/mobile","20230923232948","http://web.archive.org/","web","/_static/", "1695511788"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <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="#3ddc84"><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="/web/20230923232948/https://developer.android.com/_pwa/android/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//web.archive.org/web/20230923232948/https://www.gstatic.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20230923232948/https://fonts.gstatic.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20230923232948/https://fonts.googleapis.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20230923232948/https://apis.google.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20230923232948/https://www.google-analytics.com/" crossorigin><link rel="stylesheet" href="//web.archive.org/web/20230923232948cs_/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"> <link rel="stylesheet" href="//web.archive.org/web/20230923232948cs_/https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"><link rel="stylesheet" href="http://web.archive.org/web/20230923232948cs_/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/css/rebrand-app.css"> <link rel="shortcut icon" href="http://web.archive.org/web/20230923232948im_/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/images/rebrand/favicon.svg"> <link rel="apple-touch-icon" href="http://web.archive.org/web/20230923232948im_/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/images/rebrand/touchicon-180.png"><link rel="canonical" href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile"><link rel="search" type="application/opensearchdescription+xml" title="Android Developers" href="http://web.archive.org/web/20230923232948/https://developer.android.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile"/><link rel="alternate" hreflang="x-default" href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile"/><link rel="alternate" hreflang="ar" href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile?hl=ar"/><link rel="alternate" hreflang="zh-Hans" href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile?hl=zh-cn"/><link rel="alternate" hreflang="zh-Hant" href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile?hl=zh-tw"/><link rel="alternate" hreflang="id" href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile?hl=id"/><link rel="alternate" hreflang="it" href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile?hl=it"/><link rel="alternate" hreflang="tr" href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile?hl=tr"/><title>Mobile | UI Design  |  Android Developers</title> <meta property="og:title" content="Mobile | UI Design | Android Developers"><meta name="description" content="Discover the latest app development tools, platform updates, training, and documentation for developers across every Android device. "> <meta property="og:description" content="Discover the latest app development tools, platform updates, training, and documentation for developers across every Android device. "><meta property="og:url" content="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile"><meta property="og:image" content="http://web.archive.org/web/20230923232948im_/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": "http://web.archive.org/web/20230923232948/https://schema.org", "@type": "Article", "headline": "Mobile | UI Design" } </script><script type="application/ld+json"> { "@context": "http://web.archive.org/web/20230923232948/https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "UI Design", "item": "http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui" },{ "@type": "ListItem", "position": 2, "name": "Mobile", "item": "http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile" }] } </script> <link rel="stylesheet" href="/web/20230923232948cs_/https://developer.android.com/extras.css"></head> <body class="android-design-hub android-design-hub-mobile" template="landing" theme="android-theme" type="article" layout="full" pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"><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="/web/20230923232948/https://developer.android.com/" 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"> <img src="http://web.archive.org/web/20230923232948im_/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/images/rebrand/lockup.svg" class="devsite-site-logo" alt="Android Developers"> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list"> <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab dropdown dropdown-full> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/get-started" track-metadata-eventdetail="https://developer.android.com/get-started" class="devsite-tabs-content gc-analytics-event android-dropdown-tab" track-type="nav" track-metadata-position="nav - essentials" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Essentials" track-name="essentials"> Essentials </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Essentials" track-type="nav" track-metadata-eventdetail="https://developer.android.com/get-started" track-metadata-position="nav - essentials" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Essentials" track-name="essentials" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column android-dropdown android-dropdown-primary android-dropdown-mad"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Modern Android</li> <li class="devsite-nav-description">Quickly bring your app to life with less code, using a modern declarative approach to UI, and the simplicity of Kotlin. </li> <li class="devsite-nav-item"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/modern-android-development" track-type="nav" track-metadata-eventdetail="https://developer.android.com/modern-android-development" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="modern android" tooltip class="button button-primary"> <div class="devsite-nav-item-title"> Explore Modern Android </div> </a> </li> <li class="devsite-nav-item"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/jetpack/compose/adopt/for-large-teams" track-type="nav" track-metadata-eventdetail="https://developer.android.com/jetpack/compose/adopt/for-large-teams" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="modern android" tooltip class="button button-white"> <div class="devsite-nav-item-title"> Adopt Compose for teams </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-get-started"> <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="http://web.archive.org/web/20230923232948/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app" track-type="nav" track-metadata-eventdetail="https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app" 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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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-devices"> <li class="devsite-nav-title" role="heading" tooltip>Extend by device</li> <li class="devsite-nav-description">Build apps that give your users seamless experiences from phones to tablets, watches, and more. </li> <li class="devsite-nav-item"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/large-screens" track-type="nav" track-metadata-eventdetail="https://developer.android.com/large-screens" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="extend by device" tooltip> <div class="devsite-nav-item-title"> Tablets and foldables </div> </a> </li> <li class="devsite-nav-item"> <a href="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/https://developer.android.com/chrome-os" track-type="nav" track-metadata-eventdetail="https://developer.android.com/chrome-os" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="extend by device" tooltip> <div class="devsite-nav-item-title"> ChromeOS </div> </a> </li> <li class="devsite-nav-item"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/multi-device-development" track-type="nav" track-metadata-eventdetail="https://developer.android.com/multi-device-development" track-metadata-position="nav - essentials" track-metadata-module="tertiary nav" track-metadata-module_headline="extend by device" tooltip> <div class="devsite-nav-item-title"> Cross-device SDK </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column android-dropdown"> <ul class="devsite-tabs-dropdown-section android-dropdown-section-icon android-dropdown-section-icon-platform"> <li class="devsite-nav-title" role="heading" tooltip>Build by category</li> <li class="devsite-nav-description">Learn to build for your use case by following Google's prescriptive and opinionated guidance. </li> <li class="devsite-nav-item"> <a href="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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"> Media apps </div> </a> </li> <li class="devsite-nav-item"> <a href="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/https://developers.google.com/android/work" track-type="nav" track-metadata-eventdetail="https://developers.google.com/android/work" 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="http://web.archive.org/web/20230923232948/https://developer.android.com/about/versions" track-type="nav" track-metadata-eventdetail="https://developer.android.com/about/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"> Platform releases </div> </a> </li> <li class="devsite-nav-item"> <a href="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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 dropdown dropdown-full active> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design" track-metadata-eventdetail="https://developer.android.com/design" class="devsite-tabs-content gc-analytics-event android-dropdown-tab" track-type="nav" track-metadata-position="nav - design & plan" track-metadata-module="primary nav" aria-label="Design & Plan, selected" data-category="Site-Wide Custom Events" data-label="Tab: Design & Plan" track-name="design & plan"> Design & Plan </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Design & Plan" track-type="nav" track-metadata-eventdetail="https://developer.android.com/design" track-metadata-position="nav - design & plan" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Design & Plan" track-name="design & plan" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column android-dropdown android-dropdown-primary android-dropdown-kit"> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Kits & more</li> <li class="devsite-nav-description">Get one of our Figma kits for Android, Material Design, or Wear OS, and start designing your app's UI today. </li> <li class="devsite-nav-item"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile#explore-our-kits" track-type="nav" track-metadata-eventdetail="https://developer.android.com/design/ui/mobile#explore-our-kits" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="kits & more" tooltip class="button button-primary"> <div class="devsite-nav-item-title"> Go to Android & Material kits </div> </a> </li> <li class="devsite-nav-item"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/wear#explore-our-kits" track-type="nav" track-metadata-eventdetail="https://developer.android.com/design/ui/wear#explore-our-kits" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="kits & more" tooltip class="button button-white"> <div class="devsite-nav-item-title"> Go to Wear OS kits </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-ui-design"> <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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/large-screens" track-type="nav" track-metadata-eventdetail="https://developer.android.com/design/ui/large-screens" track-metadata-position="nav - design & plan" track-metadata-module="tertiary nav" track-metadata-module_headline="ui design" tooltip> <div class="devsite-nav-item-title"> Large screens </div> </a> </li> <li class="devsite-nav-item"> <a href="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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"> 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-2"> <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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/https://developer.android.com/training/testing" track-type="nav" track-metadata-eventdetail="https://developer.android.com/training/testing" 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-quality"> <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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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"> Privacy & 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-build-for-billions"> <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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/develop" track-metadata-eventdetail="https://developer.android.com/develop" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - develop" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Develop" track-name="develop"> Develop </a> </tab> <tab> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/distribute" track-metadata-eventdetail="https://developer.android.com/distribute" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - google play" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Google Play" track-name="google play"> Google Play </a> </tab> </nav> </devsite-tabs> </div> <devsite-search aria-expanded="false" aria-haspopup="listbox" enable-signin enable-search enable-suggestions enable-query-completion project-name="Mobile" tenant-name="Android Developers" role="combobox"> <form class="devsite-search-form" action="http://web.archive.org/web/20230923232948/https://developer.android.com/s/results" method="GET"> <div class="devsite-search-container"> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-haspopup="false" aria-multiline="false" aria-label="Search box" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="searchbox" type="text" value=""> <div class="devsite-search-image material-icons" aria-hidden="true"></div> </div> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> </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-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en">English</a> </li> <li role="presentation"> <a role="menuitem" lang="id">Bahasa Indonesia</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="it">Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br">Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="tr">Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ar">العربيّة</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="http://web.archive.org/web/20230923232948/https://developer.android.com/studio" data-category="Site-Wide Custom Events" data-label="Site header link"> Android Studio </a> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row"> <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" aria-label="Lower header breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui" 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="UI Design"> UI Design </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile" 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="Mobile"> Mobile </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 active> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile" track-metadata-eventdetail="https://developer.android.com/design/ui/mobile" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - overview" track-metadata-module="primary nav" aria-label="Overview, selected" data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview"> Overview </a> </tab> <tab> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/foundations/accessibility" track-metadata-eventdetail="https://developer.android.com/design/ui/mobile/guides/foundations/accessibility" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - guides" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Guides" track-name="guides"> Guides </a> </tab> <tab> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/samples" track-metadata-eventdetail="https://developer.android.com/design/ui/mobile/samples" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - samples" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples"> Samples </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter hidden"> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/web/20230923232948/https://developer.android.com/" 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"> <img src="http://web.archive.org/web/20230923232948im_/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/images/rebrand/lockup.svg" class="devsite-site-logo" alt="Android Developers"> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list"> <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/get-started" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Essentials" track-name="essentials" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Essentials" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Essentials </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Essentials" track-name="essentials"> <span class="devsite-nav-text" tooltip menu="Essentials"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Essentials"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/design" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Design & Plan" track-name="design & plan" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Design & Plan" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Design & Plan </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Design & Plan" track-name="design & plan"> <span class="devsite-nav-text" tooltip menu="Design & Plan"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Design & Plan"> </span> </span> </li> </ul> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/design/ui/mobile" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Overview </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/foundations/accessibility" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Guides" track-name="guides" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Guides" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Guides </span> <span class="devsite-nav-icon material-icons" data-icon="forward"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/design/ui/mobile/samples" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Samples </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/develop" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Develop" track-name="develop" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Develop" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Develop </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/distribute" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Google Play" track-name="google play" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Play" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Google Play </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/studio" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android Studio" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Android Studio </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="Essentials" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip> Modern Android </span> </span> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/modern-android-development" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore Modern Android" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Explore Modern Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/jetpack/compose/adopt/for-large-teams" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Adopt Compose for teams" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Adopt Compose for teams </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip> Get started </span> </span> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Hello world" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Hello world </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/courses" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Training courses" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Training courses </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/get-started/codelabs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Tutorials" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Tutorials </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/kotlin" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Kotlin for Android" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Kotlin for Android </span> </a> </li> <li class="devsite-nav-item"> <a href="http://web.archive.org/web/20230923232948/https://play.google.com/console/about/guides/monetize/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Monetization with Play" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Monetization with Play </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip> Extend by device </span> </span> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/large-screens" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Tablets and foldables" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Tablets and foldables </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/wear" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Wear OS" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Wear OS </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/cars" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android for Cars" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Android for Cars </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/tv" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android TV" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Android TV </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/chrome-os" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: ChromeOS" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> ChromeOS </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/multi-device-development" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Cross-device SDK" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Cross-device SDK </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip> Build by category </span> </span> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/games" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Games" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Games </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/media" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Media apps" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Media apps </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/health-and-fitness" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Health & Fitness" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Health & Fitness </span> </a> </li> <li class="devsite-nav-item"> <a href="http://web.archive.org/web/20230923232948/https://developers.google.com/android/work" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Enterprise apps" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Enterprise apps </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip> Get the latest </span> </span> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/about/versions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Platform releases" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Platform releases </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/studio/preview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android Studio preview" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Android Studio preview </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/jetpack/androidx/versions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Jetpack & Compose libraries" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Jetpack & Compose libraries </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/training/wearables/versions/4" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Wear OS preview" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Wear OS preview </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/design-for-safety/privacy-sandbox" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy Sandbox" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Privacy Sandbox </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Design & Plan" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip> Kits & more </span> </span> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/design/ui/mobile#explore-our-kits" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Go to Android & Material kits" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Go to Android & Material kits </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/design/ui/wear#explore-our-kits" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Go to Wear OS kits" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Go to Wear OS kits </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip> UI Design </span> </span> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/design/ui" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Design for Android" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Design for Android </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/design/ui/mobile" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Mobile" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Mobile </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/design/ui/large-screens" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Large screens" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Large screens </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/design/ui/wear" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Wear OS" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Wear OS </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/design/ui/tv" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: TV" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> TV </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip> Architecture </span> </span> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/topic/architecture/intro" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Introduction" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Introduction </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/topic/libraries/view-binding" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Libraries" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Libraries </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/guide/navigation/navigation-principles" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Navigation" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Navigation </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/topic/modularization" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Modularization" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Modularization </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/training/testing" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Testing" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Testing </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip> Quality </span> </span> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/quality" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Overview </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/quality/core-value" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Core value" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Core value </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/quality/user-experience" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: User experience" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> User experience </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/quality/technical" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Technical quality" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Technical quality </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/quality/privacy-and-security" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Privacy & security" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Privacy & security </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip> <span class="devsite-nav-text" tooltip> Build for Billions </span> </span> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/build-for-billions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Overview </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/docs/quality-guidelines/build-for-billions" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: About new markets" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> About new markets </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230923232948/https://developer.android.com/guide/topics/androidgo" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android (Go edition)" track-type="navMenu" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Android (Go edition) </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content"> <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars disabled></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"><style> /* Styles inlined from /assets/css/design-hub.css */ :root { --android-blue: #1769e0; --android-grey-200: #e8eaed; --android-navy: #073042; --greenish: #ebf5d4; --orangish: #fff7e8; --purplish: #f3edf7; --reddish: #ffede3; --bluish: #f1f3fc; --light-bluish: #f8f9fa; --light-greenish: #fbfdf8; --dark-greenish: #ced7ba; --dark-purplish: #d6d1d9; --primary-font-family: Google Sans Text, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif; --headline-font-family: Google Sans, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif; } .android-section-purplish { background: var(--purplish); } .android-section-reddish { background: var(--reddish); } .android-section-greenish { background: var(--greenish); } .android-section-orangish { background: var(--orangish); } .android-section-bluish { background: var(--bluish); } .android-section-light-bluish { background: var(--light-bluish); } .android-section-light-greenish { background: var(--light-greenish); } .android-section-light-greenish .devsite-landing-row-description a { color: var(--android-blue) !important; text-decoration: none; } .android-section-light-greenish .devsite-landing-row-description a:hover { text-decoration: underline; } .android-section-purplish .button-white, .android-section-reddish .button-white, .android-section-greenish .button-white, .android-section-orangish .button-white, .android-section-bluish .button-white { color: var(--android-navy) !important; } .android-hero-spotlight .devsite-landing-row-group { max-width: none; } .android-parallax-hero .button-primary { background: black !important; color: white !important; } .android-parallax-hero .button-primary:hover, .android-parallax-hero .button-primary:active { background: white !important; color: black !important; } .android-design-hub .external::after { display: inline-block; } .android-design-hub .devsite-header-no-lower-tabs .devsite-product-id-row { min-height: 68px; padding: 16px 24px; } .android-design-hub .devsite-landing-row.android-row-padding-top-xlarge-bottom-large { padding: 48px 0 24px; } .android-design-hub .devsite-landing-row-item-image a { position: relative; } .android-design-hub .devsite-landing-row-item-image a::before { border-radius: 12px; bottom: 0; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .2); content: ''; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: opacity .2s ease-out; } .android-design-hub .devsite-landing-row-item-image a:hover::before { opacity: 1; } .android-design-hub .devsite-landing-row-item-image a img { border-radius: 12px; } .android-promo-full-width h2, .android-section-intro-full-width h2 { font: 600 40px / 48px var(--headline-font-family); letter-spacing: -.5px; } .android-callout .devsite-landing-row-item-description-content, .android-design-hub .devsite-landing-row-2-up:not(.android-editorial-and-updates) .devsite-landing-row-item-description-content, .android-design-hub .devsite-landing-row-3-up:not(.android-editorial-and-updates) .devsite-landing-row-item-description-content, .android-promo-full-width .devsite-landing-row-description, .android-section-intro-full-width .devsite-landing-row-description { font: 400 16px / 24px var(--headline-font-family); letter-spacing: .25px; } .android-promo-full-width .devsite-landing-row-header-buttons { margin-top: 20px; } .android-promo-full-width .devsite-landing-row-group { margin-top: 32px !important; } .android-design-hub-overview video { border-radius: 12px; } .android-design-hub-overview .android-promo-full-width .button { margin: 4px; } .android-design-hub-overview .android-promo-full-width .button + .button { margin-inline-start: 4px; } .android-design-hub-overview .android-promo-full-width .button-white { background: rgba(0, 0, 0, .06) !important; padding: 0 24px; } .android-design-hub-overview .android-promo-full-width .button-white:hover { background: rgba(0, 0, 0, .12) !important; } .android-design-hub-large-screens .android-video-caption { display: grid; grid: auto-flow / repeat(3, 1fr); grid-gap: 12px; margin-top: 12px; } .android-design-hub-large-screens .android-video-caption-item { align-items: center; display: flex; flex-direction: column; } .android-design-hub-large-screens .android-video-caption-item h4 { font: 400 16px / 24px var(--primary-font-family); margin: 0; } .android-design-hub-large-screens .android-video-caption-item p { font: 500 14px / 16px var(--primary-font-family); } .android-design-hub-samples .android-callout .devsite-landing-row-item { align-items: flex-start; } @media screen and (max-width: 600px) { .android-design-hub-overview .android-promo-full-width .button-white { max-width: 400px; width: 100%; } .android-design-hub-samples .android-callout .devsite-landing-row-item-media { order: 1; } .android-design-hub-samples .android-callout .devsite-landing-row-item-description { order: 2; } .android-design-hub-samples .android-callout .devsite-landing-row-item-media + .devsite-landing-row-item-description { margin-top: 0; } } @media screen and (min-width: 601px) { .android-design-hub .devsite-landing-row.android-row-padding-top-xlarge-bottom-large { padding: 64px 0 48px; } } @media screen and (min-width: 841px) { .android-design-hub .devsite-landing-row.android-row-padding-top-xlarge-bottom-large { padding: 94px 0 64px; } .android-design-hub-overview .android-promo-full-width .button + .button { margin-inline-start: 28px !important; } .android-promo-full-width h2, .android-section-intro-full-width h2 { font: 600 48px / 56px var(--headline-font-family); } .android-callout .devsite-landing-row-item-description-content, .android-design-hub .devsite-landing-row-2-up:not(.android-editorial-and-updates) .devsite-landing-row-item-description-content, .android-design-hub .devsite-landing-row-3-up:not(.android-editorial-and-updates) .devsite-landing-row-item-description-content, .android-promo-full-width .devsite-landing-row-description, .android-section-intro-full-width .devsite-landing-row-description { font: 400 20px / 32px var(--headline-font-family); } .android-design-hub-samples .android-callout .devsite-landing-row-item-media-left { grid-column: 1 / span 4; } } @media screen and (min-width: 1281px) { .android-design-hub-large-screens .android-video-caption-item h4 { font: 500 20px / 28px var(--headline-font-family); } .android-design-hub-large-screens .android-video-caption-item p { font: 400 16px / 24px var(--headline-font-family); letter-spacing: .25px; } } </style> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/https://developer.android.com/design" 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=""> Design & Plan </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui" 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="UI Design"> UI Design </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile" 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="Mobile"> Mobile </a> </li> </ul> </div> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix "> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-hero devsite-landing-row-50 devsite-landing-row-no-image-background android-parallax-hero android-section-greenish" background="/web/20230923232948im_/https://developer.android.com/design/ui/grey" header-position="top"> <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="top"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/hero-full-v2.png" srcset="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/hero-full-v2_36.png 36w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/hero-full-v2_48.png 48w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/hero-full-v2_72.png 72w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/hero-full-v2_96.png 96w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/hero-full-v2_480.png 480w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/hero-full-v2_720.png 720w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/hero-full-v2_856.png 856w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/hero-full-v2_960.png 960w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/hero-full-v2_1440.png 1440w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/hero-full-v2_1920.png 1920w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/hero-full-v2_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 708px" loading="lazy"> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <h3 id="design-for-mobile" data-text="Design for mobile" class="hide-from-toc no-link" tabindex="0"> Design for mobile </h3> <div class="devsite-landing-row-item-description-content"> Create your app design using Android themes and components. Leverage Android’s unique design patterns and offerings to create a beautiful, usable, modern app. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/foundations/system-bars" class="button button-primary ">Go to design foundations</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-header-centered devsite-landing-row-large-headings android-row-padding-top-xlarge-bottom-large android-section-intro-full-width" header-position="top"> <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header"> <div class="devsite-landing-row-header-text"> <h2 id="get-started" data-text="Get started" tabindex="0"> Get started </h2> </div> </header> </div> </section> <section class="devsite-landing-row devsite-landing-row-4-up devsite-landing-row-no-image-background" header-position="top"> <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/foundations/system-bars"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/wear/surfaces.svg" srcset="" sizes="(max-width: 600px) 50vw, (max-width: 840px) 25vw, 342px" loading="lazy"> </a> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-labels"> <span class=" ">Guides</span> </div> <h3 id="foundations" data-text="Foundations" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/foundations/system-bars"> Foundations </a> </h3> <div class="devsite-landing-row-item-description-content"> Fundamental concepts and principles of Android design. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/foundations/system-bars" class="button button-white ">See guidance</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/styles/themes"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/get-started-styles.svg" srcset="" sizes="(max-width: 600px) 50vw, (max-width: 840px) 25vw, 342px" loading="lazy"> </a> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-labels"> <span class=" ">Guides</span> </div> <h3 id="styles" data-text="Styles" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/styles/themes"> Styles </a> </h3> <div class="devsite-landing-row-item-description-content"> How to create beautiful visual design with color, type, motion, and theming for your app. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/styles/themes" class="button button-white ">See guidance</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/layout-and-content/layout-basics"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/get-started-layout-content.svg" srcset="" sizes="(max-width: 600px) 50vw, (max-width: 840px) 25vw, 342px" loading="lazy"> </a> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-labels"> <span class=" ">Guides</span> </div> <h3 id="layout-content" data-text="Layout & content" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/layout-and-content/layout-basics"> Layout & content </a> </h3> <div class="devsite-landing-row-item-description-content"> How content should be structured within a view – from basics of layouts and grids to displaying graphics, and modern Android features, like edge-to-edge content. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/layout-and-content/layout-basics" class="button button-white ">See guidance</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/patterns/predictive-back"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/get-started-patterns.svg" srcset="" sizes="(max-width: 600px) 50vw, (max-width: 840px) 25vw, 342px" loading="lazy"> </a> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-labels"> <span class=" ">Guides</span> </div> <h3 id="behaviors-patterns" data-text="Behaviors & patterns" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/patterns/predictive-back"> Behaviors & patterns </a> </h3> <div class="devsite-landing-row-item-description-content"> Interaction patterns that help your users understand, interact with, and control their experience in your app. Common behavior patterns include navigation, sharing, predictive back, and settings. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/patterns/predictive-back" class="button button-white ">See guidance</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/components/material-overview"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/get-started-components.svg" srcset="" sizes="(max-width: 600px) 50vw, (max-width: 840px) 25vw, 342px" loading="lazy"> </a> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-labels"> <span class=" ">Guides</span> </div> <h3 id="components" data-text="Components" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/components/material-overview"> Components </a> </h3> <div class="devsite-landing-row-item-description-content"> Leverage small, reusable, interactive, UI building blocks. Learn more about using Material Design components. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/components/material-overview" class="button button-white ">See guidance</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/home-screen/notifications"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/get-started-home-screen.svg" srcset="" sizes="(max-width: 600px) 50vw, (max-width: 840px) 25vw, 342px" loading="lazy"> </a> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-labels"> <span class=" ">Guides</span> </div> <h3 id="home-screen" data-text="Home screen" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/home-screen/notifications"> Home screen </a> </h3> <div class="devsite-landing-row-item-description-content"> Extend your app to create unique experiences across the device by using system UI features like app widgets and notifications. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/home-screen/notifications" class="button button-white ">See guidance</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/foundations/glossary"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/get-started-glossary.svg" srcset="" sizes="(max-width: 600px) 50vw, (max-width: 840px) 25vw, 342px" loading="lazy"> </a> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-labels"> <span class=" ">Guides</span> </div> <h3 id="glossary" data-text="Glossary" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/foundations/glossary"> Glossary </a> </h3> <div class="devsite-landing-row-item-description-content"> Understand common Android terminology. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/foundations/glossary" class="button button-white ">See guidance</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/foundations/accessibility"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/get-started-accessibility.svg" srcset="" sizes="(max-width: 600px) 50vw, (max-width: 840px) 25vw, 342px" loading="lazy"> </a> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-labels"> <span class=" ">Guides</span> </div> <h3 id="accessibility" data-text="Accessibility" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/foundations/accessibility"> Accessibility </a> </h3> <div class="devsite-landing-row-item-description-content"> Benefit everyone by designing in accessibility support to help 15% of the world’s population communicate, learn, and work. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/design/ui/mobile/guides/foundations/accessibility" class="button button-white ">See guidance</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-header-centered devsite-landing-row-large-headings android-row-padding-top-xlarge-bottom-large android-section-intro-full-width" header-position="top"> <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header"> <div class="devsite-landing-row-header-text"> <h2 id="explore-our-kits" data-text="Explore our kits" tabindex="0"> Explore our kits </h2> <div class="devsite-landing-row-description"> Explore our other Figma-based library kits, plugins, and the Material theme builder. Start building your Android app with modern themes, tools and user-generated dynamic color, or check out our <a href="/web/20230923232948/https://developer.android.com/design/ui/wear#explore-our-kits">Wear OS kits</a> and <a href="/web/20230923232948/https://developer.android.com/design/ui/tv#explore-our-kits">TV kits</a> to build for other devices. </div> </div> </header> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-no-image-background" header-position="top"> <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="http://web.archive.org/web/20230923232948/https://goo.gle/android-ui-kit"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-android-ui.png" srcset="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-android-ui_36.png 36w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-android-ui_48.png 48w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-android-ui_72.png 72w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-android-ui_96.png 96w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-android-ui_480.png 480w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-android-ui_720.png 720w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-android-ui_856.png 856w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-android-ui_960.png 960w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-android-ui_1440.png 1440w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-android-ui_1920.png 1920w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-android-ui_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy"> </a> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <h3 id="android-ui-kit" data-text="Android UI kit" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230923232948/https://goo.gle/android-ui-kit"> Android UI kit </a> </h3> <div class="devsite-landing-row-item-description-content"> Get started designing for Android faster and easier with an introductory guide, styles, components, and system templates. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://goo.gle/android-ui-kit" class="button button-white ">Go to Android UI kit</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="http://web.archive.org/web/20230923232948/https://www.figma.com/@materialdesign"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-material-design.png" srcset="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-material-design_36.png 36w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-material-design_48.png 48w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-material-design_72.png 72w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-material-design_96.png 96w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-material-design_480.png 480w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-material-design_720.png 720w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-material-design_856.png 856w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-material-design_960.png 960w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-material-design_1440.png 1440w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-material-design_1920.png 1920w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-material-design_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy"> </a> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <h3 id="material-design-community" data-text="Material Design community" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230923232948/https://www.figma.com/@materialdesign"> Material Design community </a> </h3> <div class="devsite-landing-row-item-description-content"> Explore the Figma-based Material library and explore case studies and kits. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://www.figma.com/@materialdesign" class="button button-white ">Go to Material Design community</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="http://web.archive.org/web/20230923232948/https://m3.material.io/theme-builder#/dynamic"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-theme-builder.png" srcset="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-theme-builder_36.png 36w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-theme-builder_48.png 48w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-theme-builder_72.png 72w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-theme-builder_96.png 96w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-theme-builder_480.png 480w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-theme-builder_720.png 720w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-theme-builder_856.png 856w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-theme-builder_960.png 960w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-theme-builder_1440.png 1440w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-theme-builder_1920.png 1920w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/kits-theme-builder_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy"> </a> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <h3 id="theme-builder" data-text="Theme builder" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230923232948/https://m3.material.io/theme-builder#/dynamic"> Theme builder </a> </h3> <div class="devsite-landing-row-item-description-content"> Use the web-based Material theme builder to design your next Android app. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://m3.material.io/theme-builder#/dynamic" class="button button-white ">Go to the theme builder</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-header-centered devsite-landing-row-large-headings android-row-padding-top-xlarge-bottom-large android-section-intro-full-width android-section-light-greenish" background="/web/20230923232948im_/https://developer.android.com/design/ui/grey" header-position="top"> <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header"> <div class="devsite-landing-row-header-text"> <h2 id="use-a-proven-design-system" data-text="Use a proven design system" tabindex="0"> Use a proven design system </h2> </div> </header> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-50 devsite-landing-row-no-image-background android-callout android-section-light-greenish" background="/web/20230923232948im_/https://developer.android.com/design/ui/grey" header-position="top"> <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom"> <div class="devsite-landing-row-item-media devsite-landing-row-item-media-left "> <figure class="devsite-landing-row-item-image"> <a href="http://web.archive.org/web/20230923232948/https://m3.material.io/"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/material-design-3.png" srcset="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/material-design-3_36.png 36w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/material-design-3_48.png 48w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/material-design-3_72.png 72w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/material-design-3_96.png 96w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/material-design-3_480.png 480w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/material-design-3_720.png 720w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/material-design-3_856.png 856w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/material-design-3_960.png 960w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/material-design-3_1440.png 1440w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/material-design-3_1920.png 1920w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/material-design-3_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 708px" loading="lazy"> </a> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <h3 id="try-material-design-3" data-text="Try Material Design 3" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230923232948/https://m3.material.io/"> Try Material Design 3 </a> </h3> <div class="devsite-landing-row-item-description-content"> Material Design 3 is an open source, adaptable system of guidelines, components, and tools that support the best practices of user interface design. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://m3.material.io/" class="button button-white ">Go to the Material Design website</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-large-headings android-row-padding-top-xlarge-bottom-large android-section-intro-full-width" header-position="top"> <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header"> <div class="devsite-landing-row-header-text"> <h2 id="develop-for-mobile" data-text="Develop for mobile" tabindex="0"> Develop for mobile </h2> </div> </header> </div> </section> <section class="devsite-landing-row devsite-landing-row-2-up devsite-landing-row-no-image-background" header-position="top"> <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/guide"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-developer.png" srcset="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-developer_36.png 36w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-developer_48.png 48w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-developer_72.png 72w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-developer_96.png 96w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-developer_480.png 480w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-developer_720.png 720w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-developer_856.png 856w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-developer_960.png 960w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-developer_1440.png 1440w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-developer_1920.png 1920w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-developer_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 708px" loading="lazy"> </a> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <h3 id="developer-guides" data-text="Developer guides" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/guide"> Developer guides </a> </h3> <div class="devsite-landing-row-item-description-content"> Use our developer guides and reference to build your app design. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/guide" class="button button-white ">See the developer guides</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/docs/quality-guidelines/core-app-quality"> <img alt="" src="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-quality.png" srcset="http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-quality_36.png 36w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-quality_48.png 48w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-quality_72.png 72w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-quality_96.png 96w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-quality_480.png 480w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-quality_720.png 720w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-quality_856.png 856w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-quality_960.png 960w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-quality_1440.png 1440w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-quality_1920.png 1920w, http://web.archive.org/web/20230923232948im_/https://developer.android.com/static/images/design/ui/mobile/guides-quality_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 708px" loading="lazy"> </a> </figure> </div> <div class="devsite-landing-row-item-description"> <div class="devsite-landing-row-item-body"> <h3 id="quality-guides" data-text="Quality guides" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/docs/quality-guidelines/core-app-quality"> Quality guides </a> </h3> <div class="devsite-landing-row-item-description-content"> Lay out your designs by following Android best practices. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230923232948/https://developer.android.com/docs/quality-guidelines/core-app-quality" class="button button-white ">See the quality guides</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom"> <android-parallax-hero></android-parallax-hero> </div> </div> </div> </section> <devsite-hats-survey class="nocontent" hats-id="c51syNwbC0kxBYCLVTd0Vtp66zAf" listnr-id="5207477"></devsite-hats-survey> </div> </article> <devsite-notification> </devsite-notification> <div class="devsite-content-data"> <template class="devsite-thumb-rating-down-categories"> [{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] </template> <template class="devsite-thumb-rating-up-categories"> [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }] </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="//web.archive.org/web/20230923232948/https://twitter.com/AndroidDev" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Twitter Promo"> <img class="devsite-footer-promo-icon" src="/web/20230923232948im_/https://developer.android.com/_static/android/images/logo-twitter.svg" loading="lazy" alt="Twitter"> Twitter </a> <div class="devsite-footer-promo-description">Follow @AndroidDev on Twitter</div> </li> <li class="devsite-footer-promo"> <a href="//web.archive.org/web/20230923232948/https://www.youtube.com/user/androiddevelopers" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer YouTube Promo"> <img class="devsite-footer-promo-icon" src="//web.archive.org/web/20230923232948im_/https://www.gstatic.com/images/icons/material/product/2x/youtube_48dp.png" loading="lazy" alt="YouTube"> YouTube </a> <div class="devsite-footer-promo-description">Check out Android Developers on YouTube</div> </li> <li class="devsite-footer-promo"> <a href="//web.archive.org/web/20230923232948/https://www.linkedin.com/showcase/androiddev" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer LinkedIn Promo"> <img class="devsite-footer-promo-icon" src="/web/20230923232948im_/https://developer.android.com/_static/android/images/logo-linkedin.svg" loading="lazy" alt="LinkedIn"> 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="//web.archive.org/web/20230923232948/https://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="//web.archive.org/web/20230923232948/https://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="//web.archive.org/web/20230923232948/https://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="//web.archive.org/web/20230923232948/https://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="/web/20230923232948/https://developer.android.com/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="//web.archive.org/web/20230923232948/https://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="/web/20230923232948/https://developer.android.com/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="/web/20230923232948/https://developer.android.com/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="/web/20230923232948/https://developer.android.com/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="/web/20230923232948/https://developer.android.com/privacy" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)"> Privacy </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20230923232948/https://developer.android.com/training/connectivity/5g" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)"> 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="/web/20230923232948/https://developer.android.com/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="/web/20230923232948/https://developer.android.com/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="/web/20230923232948/https://developer.android.com/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="/web/20230923232948/https://developer.android.com/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="/web/20230923232948/https://developer.android.com/things" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)"> Android Things </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20230923232948/https://developer.android.com/tv" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)"> 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="/web/20230923232948/https://developer.android.com/about/versions/13" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)"> Android 13 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20230923232948/https://developer.android.com/about/versions/12" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)"> Android 12 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20230923232948/https://developer.android.com/about/versions/11" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)"> Android 11 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20230923232948/https://developer.android.com/about/versions/10" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)"> Android 10 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20230923232948/https://developer.android.com/about/versions/pie" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)"> Pie </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20230923232948/https://developer.android.com/about/versions/oreo" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)"> Oreo </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20230923232948/https://developer.android.com/about/versions/nougat" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 7)"> Nougat </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="/web/20230923232948/https://developer.android.com/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="/web/20230923232948/https://developer.android.com/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="/web/20230923232948/https://developer.android.com/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="/web/20230923232948/https://developer.android.com/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="/web/20230923232948/https://developer.android.com/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="//web.archive.org/web/20230923232948/https://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="//web.archive.org/web/20230923232948/https://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="//web.archive.org/web/20230923232948/https://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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948/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="http://web.archive.org/web/20230923232948im_/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/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="http://web.archive.org/web/20230923232948im_/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/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="//web.archive.org/web/20230923232948/https://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="//web.archive.org/web/20230923232948/https://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="//web.archive.org/web/20230923232948/https://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="//web.archive.org/web/20230923232948/https://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="//web.archive.org/web/20230923232948/https://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="//web.archive.org/web/20230923232948/https://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="/web/20230923232948/https://developer.android.com/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="/web/20230923232948/https://developer.android.com/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 devsite-footer-utility-button"> <span class="devsite-footer-utility-description">Get news and tips by email</span> <a class="devsite-footer-utility-link gc-analytics-event" href="/web/20230923232948/https://developer.android.com/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="id">Bahasa Indonesia</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="it">Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br">Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="tr">Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ar">العربيّة</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 analytics-iframe enable-ga4> <script type="application/json" analytics>[{"dimensions": {"dimension5": "en", "dimension11": false, "dimension4": "Mobile", "dimension1": "Signed out", "dimension6": "en", "dimension3": false}, "gaid": "UA-5831155-1", "metrics": {"ratings_count": "metric2", "ratings_value": "metric1"}}]</script> <script type="application/json" tag-management gtm>{"ga4": [], "ga4p": [], "gtm": ["GTM-KMSWPCJ"], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Mobile", "signedIn": "False", "tenant": "android", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}, "tags": ["GTM-KMSWPCJ"]}</script> </devsite-analytics> <devsite-badger></devsite-badger> <android-fully-clickable target=" .android-grouped-resources .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="JXRzDY0M8SyXPl3Vuz1dyCVc14qcMz"> (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', 'http://web.archive.org/web/20230923232948/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/js/app_loader.js', '[3,"en",null,"/js/devsite_app_module.js","http://web.archive.org/web/20230923232948/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f","http://web.archive.org/web/20230923232948/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android","http://web.archive.org/web/20230923232948/https://android-dot-devsite-v2-prod.appspot.com",1,null,["/_pwa/android/manifest.json","http://web.archive.org/web/20230923232948/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/images/video-placeholder.svg","http://web.archive.org/web/20230923232948/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/images/rebrand/favicon.svg","http://web.archive.org/web/20230923232948/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/images/rebrand/lockup.svg","http://web.archive.org/web/20230923232948/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,40,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,111,112,113,115,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,144,147,148,149,150,151,152,154,155,156,157,158,159,161,163,164,165,168,169,170,172,173,179,180,182,183,186,190,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","developer.android.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["MiscFeatureFlags__emergency_css","Cloud__enable_cloud_facet_chat","Cloud__enable_cloud_shell","Search__enable_acl_suggestions","AuthorPageInsights__enable_author_page_insights","OpenInReplit__enable_replit","Cloud__enable_free_trial_server_call","Cloud__enable_cloudx_experiment_ids","Badges__enable_delete_badges","Profiles__enable_developer_profiles_dashboard_recommendations","Significatio__enable_experiment_id_caching","Rebranding__enable_rebranding","Analytics__enable_ga4_analytics","Experiments__reqs_query_experiments","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__enable_tls_version_for_gaia_calls","Experiments__enable_experiments","Badges__enable_hide_badges","Concierge__enable_api_explorer","SignIn__enable_auto_signin_oauth","Localization__enable_locale_redirects","Search__enable_suggestions_from_borg","Cloud__enable_cloud_shell_fte_user_flow","BookNav__enable_collapsible_book_nav","Search__enable_devsite_serp","Profiles__enable_profile_communities","Cloud__enable_free_trial_personalization_migration","Concierge__enable_pushui","MiscFeatureFlags__devpanel_url","ContentExcellence__enable_verified_date","Significatio__enable_footprints","Cloud__enable_cloud_dlp_service","Profiles__enable_page_saving","Significatio__enable_by_tenant","Search__enable_faceted_search","BookNav__enable_book_nav_filtering","Profiles__enable_developer_profiles_callout","Search__enable_dynamic_content_confidential_banner","Search__enable_page_map","Profiles__enable_developer_profiles_interests","Profiles__require_profile_eligibility_for_signin","MiscFeatureFlags__content_publisher_push_queue","Profiles__enable_suggested_interests","MiscFeatureFlags__developers_footer_image","Profiles__enable_public_developer_profiles","Cloud__enable_cloudx_ping","Profiles__enable_searchable_interests","ContentExcellence__enable_googler_button","Badges__enable_drag_and_drop_badges","Profiles__enable_profile_collections","Profiles__enable_profile_notifications_ui"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","http://web.archive.org/web/20230923232948/https://developerscontentserving-pa.googleapis.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","http://web.archive.org/web/20230923232948/https://developerscontentsearch-pa.googleapis.com",2]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Mobile | UI Design | Android Developers