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","20230924001443","http://web.archive.org/","web","/_static/", "1695514483"); </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/20230924001443/https://developer.android.com/_pwa/android/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//web.archive.org/web/20230924001443/https://www.gstatic.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20230924001443/https://fonts.gstatic.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20230924001443/https://fonts.googleapis.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20230924001443/https://apis.google.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20230924001443/https://www.google-analytics.com/" crossorigin><link rel="stylesheet" href="//web.archive.org/web/20230924001443cs_/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/20230924001443cs_/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/20230924001443cs_/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/css/rebrand-app.css"> <link rel="shortcut icon" href="http://web.archive.org/web/20230924001443im_/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/images/rebrand/favicon.svg"> <link rel="apple-touch-icon" href="http://web.archive.org/web/20230924001443im_/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/images/rebrand/touchicon-180.png"><link rel="canonical" href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui"><link rel="search" type="application/opensearchdescription+xml" title="Android Developers" href="http://web.archive.org/web/20230924001443/https://developer.android.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui"/><link rel="alternate" hreflang="x-default" href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui"/><link rel="alternate" hreflang="ar" href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui?hl=ar"/><link rel="alternate" hreflang="zh-Hans" href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui?hl=zh-cn"/><link rel="alternate" hreflang="zh-Hant" href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui?hl=zh-tw"/><link rel="alternate" hreflang="id" href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui?hl=id"/><link rel="alternate" hreflang="it" href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui?hl=it"/><link rel="alternate" hreflang="tr" href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui?hl=tr"/><title>UI Design  |  Android Developers</title> <meta property="og:title" content="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/20230924001443/https://developer.android.com/design/ui"><meta property="og:image" content="http://web.archive.org/web/20230924001443im_/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/20230924001443/https://schema.org", "@type": "Article", "headline": "UI Design" } </script> <link rel="stylesheet" href="/web/20230924001443cs_/https://developer.android.com/extras.css"></head> <body class="android-design-hub android-design-hub-overview" 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/20230924001443/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/20230924001443im_/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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="UI Design" tenant-name="Android Developers" role="combobox"> <form class="devsite-search-form" action="http://web.archive.org/web/20230924001443/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/20230924001443/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 devsite-header-no-lower-tabs "> <div class="devsite-header-background"> <div class="devsite-product-id-row"> <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list"> <li class="devsite-breadcrumb-item "> <a href="http://web.archive.org/web/20230924001443/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> </ul> </div> </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/20230924001443/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/20230924001443im_/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/20230924001443/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/20230924001443/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> </li> <li class="devsite-nav-item"> <a href="/web/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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> </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-100 devsite-landing-row-header-centered devsite-landing-row-item-centered devsite-landing-row-no-image-background android-hero-spotlight android-row-padding-top-xlarge-bottom-large" header-position="top"> <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header"> <div class="devsite-landing-row-header-text"> <h2 id="design-for-android" data-text="Design for Android" tabindex="0"> Design for Android </h2> <div class="devsite-landing-row-description"> Design beautiful and modern Android apps that meet your user where they are, whether browsing their phone, reading on their tablet, glancing at their wrist, or watching TV. </div> </div> </header> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up" header-position="top"> <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-html"> <video poster="/web/20230924001443im_/https://developer.android.com/images/design/ui/hero.jpg" autoplay loop muted playsinline> <source src="/web/20230924001443im_/https://developer.android.com/static/videos/design/ui/hero.mp4" type="video/mp4"> </video> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-header-centered devsite-landing-row-item-centered devsite-landing-row-no-image-background android-promo-full-width android-section-greenish" background="/web/20230924001443im_/https://developer.android.com/design/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="design-for-mobile" data-text="Design for mobile" tabindex="0"> Design for mobile </h2> <div class="devsite-landing-row-description"> Create a beautiful and usable modern app design using Android themes, components, and UI patterns. </div> </div> <div class="devsite-landing-row-header-buttons"> <a href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui/mobile" class="button button-white ">Explore mobile design →</a> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-description" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <img alt="" src="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/mobile-promo.png" srcset="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/mobile-promo_36.png 36w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/mobile-promo_48.png 48w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/mobile-promo_72.png 72w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/mobile-promo_96.png 96w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/mobile-promo_480.png 480w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/mobile-promo_720.png 720w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/mobile-promo_856.png 856w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/mobile-promo_960.png 960w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/mobile-promo_1440.png 1440w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/mobile-promo_1920.png 1920w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/mobile-promo_2880.png 2880w" sizes="(max-width: 840px) 100vw, 1440px" loading="lazy"> </figure> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-header-centered devsite-landing-row-item-centered devsite-landing-row-no-image-background android-promo-full-width android-section-purplish" background="/web/20230924001443im_/https://developer.android.com/design/white" header-position="top"> <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header"> <div class="devsite-landing-row-header-text"> <h2 id="expand-to-large-screens" data-text="Expand to large screens" tabindex="0"> Expand to large screens </h2> <div class="devsite-landing-row-description"> Create an immersive and engaging user experience with layouts that resize and reconfigure to optimize presentation, interactivity, and usability. </div> </div> <div class="devsite-landing-row-header-buttons"> <a href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui/large-screens" class="button button-white ">Explore large screen design →</a> <a href="http://web.archive.org/web/20230924001443/https://developer.android.com/large-screens/gallery" class="button button-white ">Get inspired for large screen UI design →</a> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-description" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <img alt="" src="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/large-screens-banner.png" srcset="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/large-screens-banner_36.png 36w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/large-screens-banner_48.png 48w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/large-screens-banner_72.png 72w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/large-screens-banner_96.png 96w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/large-screens-banner_480.png 480w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/large-screens-banner_720.png 720w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/large-screens-banner_856.png 856w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/large-screens-banner_960.png 960w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/large-screens-banner_1440.png 1440w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/large-screens-banner_1920.png 1920w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/large-screens-banner_2880.png 2880w" sizes="(max-width: 840px) 100vw, 1440px" loading="lazy"> </figure> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-header-centered devsite-landing-row-item-centered devsite-landing-row-no-image-background android-promo-full-width android-section-orangish" background="/web/20230924001443im_/https://developer.android.com/design/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="glance-at-wear-os" data-text="Glance at Wear OS" tabindex="0"> Glance at Wear OS </h2> <div class="devsite-landing-row-description"> A smartwatch adds a great surface for quick and frequent interactions with your app. Start designing experiences for Wear OS by Google. </div> </div> <div class="devsite-landing-row-header-buttons"> <a href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui/wear" class="button button-white ">Explore Wear OS design →</a> <a href="http://web.archive.org/web/20230924001443/https://developer.android.com/wear/gallery" class="button button-white ">Get inspired for Wear OS design →</a> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-description" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <img alt="" src="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-wear.png" srcset="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-wear_36.png 36w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-wear_48.png 48w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-wear_72.png 72w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-wear_96.png 96w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-wear_480.png 480w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-wear_720.png 720w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-wear_856.png 856w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-wear_960.png 960w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-wear_1440.png 1440w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-wear_1920.png 1920w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-wear_2880.png 2880w" sizes="(max-width: 840px) 100vw, 1440px" loading="lazy"> </figure> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-header-centered devsite-landing-row-item-centered devsite-landing-row-no-image-background android-promo-full-width android-section-bluish" background="/web/20230924001443im_/https://developer.android.com/design/white" header-position="top"> <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header"> <div class="devsite-landing-row-header-text"> <h2 id="design-for-tv" data-text="Design for TV" tabindex="0"> Design for TV </h2> <div class="devsite-landing-row-description"> Start designing your Android TV app experience using our guides and kits. </div> </div> <div class="devsite-landing-row-header-buttons"> <a href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui/tv" class="button button-white ">Explore TV design →</a> <a href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui/tv/samples/overview" class="button button-white ">Get inspired for TV design →</a> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-description" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <img alt="" src="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-tv.png" srcset="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-tv_36.png 36w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-tv_48.png 48w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-tv_72.png 72w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-tv_96.png 96w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-tv_480.png 480w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-tv_720.png 720w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-tv_856.png 856w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-tv_960.png 960w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-tv_1440.png 1440w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-tv_1920.png 1920w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/promo-tv_2880.png 2880w" sizes="(max-width: 840px) 100vw, 1440px" loading="lazy"> </figure> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-header-centered devsite-landing-row-item-centered devsite-landing-row-no-image-background android-promo-full-width android-section-reddish" background="/web/20230924001443im_/https://developer.android.com/design/white" header-position="top"> <div class="devsite-landing-row-inner"> <header class="devsite-landing-row-header"> <div class="devsite-landing-row-header-text"> <h2 id="design-for-auto" data-text="Design for Auto" tabindex="0"> Design for Auto </h2> <div class="devsite-landing-row-description"> Start designing your app experience for Android Auto and Android Automotive OS using our guides and templates. </div> </div> <div class="devsite-landing-row-header-buttons"> <a href="http://web.archive.org/web/20230924001443/https://developers.google.com/cars/design/create-apps" class="button button-white external ">Go to design guidance</a> </div> </header> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-description" description-position="bottom"> <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <img alt="" src="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/auto-hero.png" srcset="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/auto-hero_36.png 36w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/auto-hero_48.png 48w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/auto-hero_72.png 72w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/auto-hero_96.png 96w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/auto-hero_480.png 480w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/auto-hero_720.png 720w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/auto-hero_856.png 856w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/auto-hero_960.png 960w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/auto-hero_1440.png 1440w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/auto-hero_1920.png 1920w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/auto-hero_2880.png 2880w" sizes="(max-width: 840px) 100vw, 1440px" loading="lazy"> </figure> </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="try-out-a-case-study-or-sample" data-text="Try out a case study or sample" tabindex="0"> Try out a case study or sample </h2> <div class="devsite-landing-row-description"> Start designing for Android devices with one of our Figma-based case studies or app samples. </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/20230924001443/https://www.figma.com/community/file/1164313362327941158"> <img alt="" src="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-nia.png" srcset="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-nia_36.png 36w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-nia_48.png 48w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-nia_72.png 72w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-nia_96.png 96w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-nia_480.png 480w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-nia_720.png 720w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-nia_856.png 856w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-nia_960.png 960w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-nia_1440.png 1440w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-nia_1920.png 1920w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-nia_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="mobile-large-screens" data-text="Mobile & large screens" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230924001443/https://www.figma.com/community/file/1164313362327941158"> Mobile & large screens </a> </h3> <div class="devsite-landing-row-item-description-content"> Get the Now in Android case study (in Figma) and explore our celebrated Play Store published media sample app. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230924001443/https://www.figma.com/community/file/1164313362327941158" class="button button-white ">Go to the Now in Android case study</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/20230924001443/https://developer.android.com/design/ui/wear/samples"> <img alt="" src="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-wear.png" srcset="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-wear_36.png 36w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-wear_48.png 48w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-wear_72.png 72w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-wear_96.png 96w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-wear_480.png 480w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-wear_720.png 720w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-wear_856.png 856w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-wear_960.png 960w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-wear_1440.png 1440w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-wear_1920.png 1920w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-wear_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="wear" data-text="Wear" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui/wear/samples"> Wear </a> </h3> <div class="devsite-landing-row-item-description-content"> Explore our collection of design kits and templates for Wear OS. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230924001443/https://developer.android.com/design/ui/wear/samples" class="button button-white ">See Wear samples</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/20230924001443/https://www.figma.com/@tv"> <img alt="" src="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-tv.png" srcset="http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-tv_36.png 36w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-tv_48.png 48w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-tv_72.png 72w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-tv_96.png 96w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-tv_480.png 480w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-tv_720.png 720w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-tv_856.png 856w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-tv_960.png 960w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-tv_1440.png 1440w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-tv_1920.png 1920w, http://web.archive.org/web/20230924001443im_/https://developer.android.com/static/images/design/ui/card-tv_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="tv" data-text="TV" class="hide-from-toc no-link" tabindex="0"> <a href="http://web.archive.org/web/20230924001443/https://www.figma.com/@tv"> TV </a> </h3> <div class="devsite-landing-row-item-description-content"> Explore our Figma-based design kits for TV apps. </div> <div class="devsite-landing-row-item-buttons"> <a href="http://web.archive.org/web/20230924001443/https://www.figma.com/@tv" class="button button-white ">Go to the TV Figma community</a> </div> </div> </div> </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/20230924001443/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/20230924001443im_/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/20230924001443/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/20230924001443im_/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/20230924001443/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/20230924001443im_/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443im_/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/20230924001443im_/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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/20230924001443/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": {"dimension6": "en", "dimension11": false, "dimension4": "UI Design", "dimension3": false, "dimension1": "Signed out", "dimension5": "en"}, "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": "UI Design", "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="mUE46UfpA4c5HKIThReVMJvbLpb0S2"> (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/20230924001443/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/20230924001443/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f","http://web.archive.org/web/20230924001443/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android","http://web.archive.org/web/20230924001443/https://android-dot-devsite-v2-prod.appspot.com",1,null,["/_pwa/android/manifest.json","http://web.archive.org/web/20230924001443/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/images/video-placeholder.svg","http://web.archive.org/web/20230924001443/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/images/rebrand/favicon.svg","http://web.archive.org/web/20230924001443/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/images/rebrand/lockup.svg","http://web.archive.org/web/20230924001443/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,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,["Badges__enable_hide_badges","Search__enable_suggestions_from_borg","Search__enable_acl_suggestions","Analytics__enable_ga4_analytics","Experiments__enable_experiments","Significatio__enable_footprints","Search__enable_faceted_search","Profiles__enable_profile_collections","Badges__enable_delete_badges","BookNav__enable_book_nav_filtering","Profiles__enable_developer_profiles_dashboard_recommendations","Search__enable_page_map","Profiles__enable_profile_communities","Cloud__enable_free_trial_personalization_migration","OpenInReplit__enable_replit","ContentExcellence__enable_verified_date","SignIn__enable_auto_signin_oauth","Cloud__enable_cloud_dlp_service","Concierge__enable_pushui","Rebranding__enable_rebranding","BookNav__enable_collapsible_book_nav","Concierge__enable_api_explorer","Badges__enable_drag_and_drop_badges","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_developer_profiles_interests","Cloud__enable_cloud_shell","MiscFeatureFlags__emergency_css","Search__enable_devsite_serp","MiscFeatureFlags__developers_footer_image","Cloud__enable_free_trial_server_call","Significatio__enable_experiment_id_caching","Localization__enable_locale_redirects","Experiments__reqs_query_experiments","Profiles__enable_suggested_interests","MiscFeatureFlags__devpanel_url","Significatio__enable_by_tenant","Profiles__enable_page_saving","Profiles__enable_searchable_interests","ContentExcellence__enable_googler_button","MiscFeatureFlags__developers_footer_dark_image","MiscFeatureFlags__content_publisher_push_queue","Profiles__enable_profile_notifications_ui","Cloud__enable_cloud_facet_chat","MiscFeatureFlags__enable_tls_version_for_gaia_calls","AuthorPageInsights__enable_author_page_insights","Profiles__require_profile_eligibility_for_signin","Cloud__enable_cloudx_ping","Profiles__enable_developer_profiles_callout","Profiles__enable_public_developer_profiles","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloudx_experiment_ids"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","http://web.archive.org/web/20230924001443/https://developerscontentserving-pa.googleapis.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","http://web.archive.org/web/20230924001443/https://developerscontentsearch-pa.googleapis.com",2]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

UI Design | Android Developers