Create your first Android app | Get started

<!doctype html> <html lang="en" dir="ltr"> <head><script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=7YQSqjSh" charset="utf-8"></script> <script type="text/javascript" src="https://web-static.archive.org/_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="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("http://web.archive.org/web"); __wm.wombat("https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app","20230924121230","http://web.archive.org/","web","https://web-static.archive.org/_static/", "1695557550"); </script> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=p7PEIJWi" /> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_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/20230924121230/https://developer.android.com/_pwa/android/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//web.archive.org/web/20230924121230/https://www.gstatic.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20230924121230/https://fonts.gstatic.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20230924121230/https://fonts.googleapis.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20230924121230/https://apis.google.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20230924121230/https://www.google-analytics.com/" crossorigin><link rel="stylesheet" href="//web.archive.org/web/20230924121230cs_/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/20230924121230cs_/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/20230924121230cs_/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/css/rebrand-app.css"> <link rel="shortcut icon" href="http://web.archive.org/web/20230924121230im_/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/images/rebrand/favicon.svg"> <link rel="apple-touch-icon" href="http://web.archive.org/web/20230924121230im_/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/images/rebrand/touchicon-180.png"><link rel="canonical" href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app"><link rel="search" type="application/opensearchdescription+xml" title="Android Developers" href="http://web.archive.org/web/20230924121230/https://developer.android.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app"/><link rel="alternate" hreflang="x-default" href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app"/><link rel="alternate" hreflang="zh-Hans" href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app?hl=zh-cn"/><link rel="alternate" hreflang="zh-Hant" href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app?hl=zh-tw"/><link rel="alternate" hreflang="fr" href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app?hl=fr"/><link rel="alternate" hreflang="id" href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app?hl=id"/><link rel="alternate" hreflang="ja" href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app?hl=ja"/><link rel="alternate" hreflang="ko" href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app?hl=ko"/><link rel="alternate" hreflang="pt-BR" href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app?hl=pt-br"/><link rel="alternate" hreflang="es-419" href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app?hl=es-419"/><link rel="alternate" hreflang="vi" href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app?hl=vi"/><title>Create your first Android app  |  Get started  |  Android Developers</title> <meta property="og:title" content="Create your first Android app | Get started | Android Developers"><meta name="description" content="Learn how to create your first Android app."> <meta property="og:description" content="Learn how to create your first Android app."><meta property="og:url" content="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app"><meta property="og:image" content="http://web.archive.org/web/20230924121230im_/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/20230924121230/https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Get started", "item": "http://web.archive.org/web/20230924121230/https://developer.android.com/get-started/overview" },{ "@type": "ListItem", "position": 2, "name": "Create your first Android app", "item": "http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app" }] } </script> <meta name="original_source" content="https://docs.google.com/document/d/1sLAhEuFFZ90J8SWZ6LxAkihZnkRSH3QxlA2i_HMpQW0/edit"/> <link rel="stylesheet" href="/web/20230924121230cs_/https://developer.android.com/extras.css"></head> <body class="" template="codelab" theme="android-theme" type="codelab" layout="docs" 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/20230924121230/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/20230924121230im_/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 active> <a href="http://web.archive.org/web/20230924121230/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" aria-label="Essentials, selected" 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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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> <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/design" track-metadata-eventdetail="https://developer.android.com/design" class="devsite-tabs-content gc-analytics-event android-dropdown-tab" track-type="nav" track-metadata-position="nav - design & plan" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Design & Plan" track-name="design & plan"> Design & Plan </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Design & Plan" track-type="nav" track-metadata-eventdetail="https://developer.android.com/design" track-metadata-position="nav - design & plan" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Design & Plan" track-name="design & plan" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column android-dropdown 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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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="Get started" tenant-name="Android Developers" role="combobox"> <form class="devsite-search-form" action="http://web.archive.org/web/20230924121230/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="fr">Français</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br">Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi">Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="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/20230924121230/https://developer.android.com/studio" data-category="Site-Wide Custom Events" data-label="Site header link"> Android Studio </a> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row"> <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list"> <li class="devsite-breadcrumb-item "> <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/get-started/overview" 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="Get started"> Get started </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab> <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/get-started/overview" track-metadata-eventdetail="https://developer.android.com/get-started/overview" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - overview" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview"> Overview </a> </tab> <tab active> <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app" track-metadata-eventdetail="https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - hello world" track-metadata-module="primary nav" aria-label="Hello World, selected" data-category="Site-Wide Custom Events" data-label="Tab: Hello World" track-name="hello world"> Hello World </a> </tab> <tab> <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/courses" track-metadata-eventdetail="https://developer.android.com/courses" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - training" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Training" track-name="training"> Training </a> </tab> <tab> <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/get-started/codelabs" track-metadata-eventdetail="https://developer.android.com/get-started/codelabs" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - tutorials" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Tutorials" track-name="tutorials"> Tutorials </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter hidden"> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/web/20230924121230/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/20230924121230im_/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/20230924121230/https://developer.android.com/get-started" class="devsite-nav-title gc-analytics-event devsite-nav-active" 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> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/web/20230924121230/https://developer.android.com/get-started/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Overview </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Hello World" track-name="hello world" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Hello World" track-type="globalNav" 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/20230924121230/https://developer.android.com/courses" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Training" track-name="training" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Training" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Training </span> </a> </li> <li class="devsite-nav-item"> <a href="/web/20230924121230/https://developer.android.com/get-started/codelabs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Tutorials" track-name="tutorials" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Tutorials" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Tutorials </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/web/20230924121230/https://developer.android.com/design" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Design & Plan" track-name="design & plan" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Design & Plan" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip> Design & Plan </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Design & Plan" track-name="design & plan"> <span class="devsite-nav-text" tooltip menu="Design & Plan"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Design & Plan"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/web/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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" has-sidebar> <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="1" scrollbars></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"><style> body { transition: opacity ease-in 0.2s; } body[unresolved] { opacity: 0; display: block; overflow: hidden; position: relative; } </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/20230924121230/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/20230924121230/https://developer.android.com/get-started" 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=""> Essentials </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/20230924121230/https://developer.android.com/get-started/overview" 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="Get started"> Get started </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/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-first-app" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail=""> Hello World </a> </li> </ul> </div> <h1 class="devsite-page-title">Create your first Android app</h1><devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <devsite-toc class="devsite-nav" depth="1" devsite-toc-embedded> </devsite-toc> <div class="devsite-article-body clearfix "> <google-codelab-analytics gaid="UA-49880327-14" ga4id="G-JTFZSJVVVZ"></google-codelab-analytics> <google-codelab codelab-gaid="UA-81734179-1" codelab-ga4id="" doc-id="1sLAhEuFFZ90J8SWZ6LxAkihZnkRSH3QxlA2i_HMpQW0" id="basic-android-kotlin-compose-first-app" title="Create your first Android app" no-tooltip="" environment="web" category="" feedback-link="https://github.com/google-developer-training/basic-android-kotlin-compose-birthday-card-app/issues/new?assignees=&labels=&template=Create+your+first+Android+app.md&title=First+Android+app%3A+Android+Basics+with+Compose" layout="scrolling"> <google-codelab-step label="Before you begin" duration="0" step="0"> <google-codelab-about codelab-title="Create your first Android app" authors="Google Developers Training team" last-updated="2023-09-21T19:59:23Z"> </google-codelab-about> <h2 class="step-title" id="0" data-text="Before you begin"> 1. Before you begin </h2> <p>Install <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/studio" target="_blank">Android Studio</a> on your computer if you haven't done so already. Check that your computer meets the system requirements required for running Android Studio (located at the bottom of the download page). If you need more detailed instructions on the setup process, refer to the <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-training-install-android-studio" target="_blank">Download and install Android Studio</a> codelab.</p> <p>In this codelab, you create your first Android app with a project template provided by Android Studio. You use Kotlin and Jetpack Compose to customize your app. Note that Android Studio gets updated and sometimes the UI changes so it is okay if your Android Studio looks a little different than the screenshots in this codelab.</p> <h2 is-upgraded id="prerequisites" data-text="Prerequisites">Prerequisites</h2> <ul> <li>Basic Kotlin knowledge</li> </ul> <h2 is-upgraded id="what-youll-need" data-text="What you'll need">What you'll need</h2> <ul> <li>The latest version of Android Studio</li> </ul> <h2 class="checklist" is-upgraded id="what-youll-learn" data-text="What you'll learn">What you'll learn</h2> <ul class="checklist"> <li>How to create an Android App with Android Studio</li> <li>How to run apps with the Preview tool in Android Studio</li> <li>How to update text with Kotlin</li> <li>How to update a User Interface (UI) with Jetpack Compose</li> <li>How to see a preview of your app with Preview in Jetpack Compose</li> </ul> <h2 is-upgraded id="what-youll-build" data-text="What you'll build">What you'll build</h2> <ul> <li>An app that lets you customize your introduction!</li> </ul> <p>Here's what the app looks like when you complete this codelab (except it will be customized with your name!):</p> <p class="image-container"><img alt="13957184d295b16f.png" style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/13957184d295b16f.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/13957184d295b16f_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/13957184d295b16f_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/13957184d295b16f_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/13957184d295b16f_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/13957184d295b16f_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/13957184d295b16f_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/13957184d295b16f_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/13957184d295b16f_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/13957184d295b16f_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/13957184d295b16f_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/13957184d295b16f_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <h2 is-upgraded id="what-youll-need_1" data-text="What you'll need">What you'll need</h2> <ul> <li>A computer with <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/studio" target="_blank">Android Studio</a> installed.</li> </ul> </google-codelab-step> <google-codelab-step label="Create a project using the template" duration="0" step="1"> <h2 class="step-title" id="1" data-text="Create a project using the template"> 2. Create a project using the template </h2> <p>In this codelab, you create an Android app with the <strong>Empty Activity</strong> project template provided by Android Studio.</p> <p>To create a project in Android Studio:</p> <ol type="1"> <li>Double click the Android Studio icon to launch Android Studio.</li> </ol> <p class="image-container"><img alt="4853d32c0c91ae24.png" title="Android studio icon " style="width: 250.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4853d32c0c91ae24.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4853d32c0c91ae24_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4853d32c0c91ae24_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4853d32c0c91ae24_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4853d32c0c91ae24_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4853d32c0c91ae24_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4853d32c0c91ae24_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4853d32c0c91ae24_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4853d32c0c91ae24_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4853d32c0c91ae24_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4853d32c0c91ae24_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4853d32c0c91ae24_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <ol type="1" start="2"> <li>In the <strong>Welcome to Android Studio</strong> dialog, click <strong>New Project</strong>.</li> </ol> <p class="image-container"><img alt="new project open project and other options" title="Welcome to Android studio dialog with following options" style="width: 576.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/ae56cae7df0e4f09.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/ae56cae7df0e4f09_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/ae56cae7df0e4f09_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/ae56cae7df0e4f09_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/ae56cae7df0e4f09_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/ae56cae7df0e4f09_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/ae56cae7df0e4f09_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/ae56cae7df0e4f09_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/ae56cae7df0e4f09_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/ae56cae7df0e4f09_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/ae56cae7df0e4f09_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/ae56cae7df0e4f09_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>The <strong>New Project</strong> window opens with a list of templates provided by Android Studio.</p> <p class="image-container"><img alt="935c2d9a4df8b864.png" title="New project window with empty activity selected" style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/935c2d9a4df8b864.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/935c2d9a4df8b864_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/935c2d9a4df8b864_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/935c2d9a4df8b864_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/935c2d9a4df8b864_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/935c2d9a4df8b864_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/935c2d9a4df8b864_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/935c2d9a4df8b864_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/935c2d9a4df8b864_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/935c2d9a4df8b864_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/935c2d9a4df8b864_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/935c2d9a4df8b864_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>In Android Studio, a project template is an Android project that provides the blueprint for a certain type of app. Templates create the structure of the project and the files needed for Android Studio to build your project. The template that you choose provides starter code to get you going faster.</p> <ol type="1" start="3"> <li>Make sure the <strong>Phone and Tablet</strong> tab is selected.</li> <li>Click the <strong>Empty Activity</strong> template to select it as the template for your project. The <strong>Empty Activity</strong> template is the template to create a simple project that you can use to build a Compose app. It has a single screen and displays the text <code translate="no" dir="ltr">"Hello</code> <code translate="no" dir="ltr">Android!"</code>.</li> <li>Click <strong>Next</strong>. The <strong>New Project</strong> dialog opens. This has some fields to configure your project.</li> <li>Configure your project as follows:</li> </ol> <p>The <strong>Name</strong> field is used to enter the name of your project, for this codelab type "Greeting Card".</p> <p>Leave the <strong>Package name</strong> field as is. This is how your files will be organized in the file structure. In this case, the package name will be <code translate="no" dir="ltr">com.example.greetingcard</code>.</p> <p>Leave the <strong>Save location</strong> field as is. It contains the location where all the files related to your project are saved. Take a note of where that is on your computer so that you can find your files.</p> <p>Select <strong>API 24: Android 7.0 (Nougat)</strong> from the menu in the <strong>Minimum SDK</strong> field. <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/guide/topics/manifest/uses-sdk-element" target="_blank">Minimum SDK</a> indicates the minimum version of Android that your app can run on.</p> <p class="image-container"><img alt="c860e875eefd68b7.png" title="New project widow with project details filled in" style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c860e875eefd68b7.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c860e875eefd68b7_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c860e875eefd68b7_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c860e875eefd68b7_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c860e875eefd68b7_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c860e875eefd68b7_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c860e875eefd68b7_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c860e875eefd68b7_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c860e875eefd68b7_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c860e875eefd68b7_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c860e875eefd68b7_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c860e875eefd68b7_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <ol type="1" start="7"> <li>Click <strong>Finish</strong>. This may take a while - this is a great time to get a cup of tea! While Android Studio is setting up, a progress bar and message indicates whether Android Studio is still setting up your project. It may look like this:</li> </ol> <p class="image-container"><img alt="This image shows a progress bar spinning and the text reads, " 2 processes running..."." title="Android Studio progress bar" style="width: 312.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/68405342ab13c821.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/68405342ab13c821_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/68405342ab13c821_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/68405342ab13c821_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/68405342ab13c821_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/68405342ab13c821_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/68405342ab13c821_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/68405342ab13c821_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/68405342ab13c821_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/68405342ab13c821_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/68405342ab13c821_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/68405342ab13c821_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>A message that looks similar to this informs you when the project set up is created.</p> <p class="image-container"><img alt="This image shows a Gradle sync message that reads, " gradle sync finished in 44s 546 ms"." title="Gradle sync message" style="width: 492.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3558f61a535db5d1.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3558f61a535db5d1_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3558f61a535db5d1_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3558f61a535db5d1_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3558f61a535db5d1_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3558f61a535db5d1_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3558f61a535db5d1_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3558f61a535db5d1_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3558f61a535db5d1_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3558f61a535db5d1_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3558f61a535db5d1_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3558f61a535db5d1_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <ol type="1" start="8"> <li>You may see a <strong>What's New</strong> pane which contains updates on new features in Android Studio. Close it for now.</li> </ol> <p class="image-container"><img alt="6a39d1ad2c904a64.png" title="What is new window in android studio" style="width: 395.43px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/6a39d1ad2c904a64.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/6a39d1ad2c904a64_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/6a39d1ad2c904a64_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/6a39d1ad2c904a64_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/6a39d1ad2c904a64_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/6a39d1ad2c904a64_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/6a39d1ad2c904a64_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/6a39d1ad2c904a64_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/6a39d1ad2c904a64_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/6a39d1ad2c904a64_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/6a39d1ad2c904a64_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/6a39d1ad2c904a64_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <ol type="1" start="9"> <li>Click <strong>Split</strong> on the top right of Android Studio, this allows you to view both code and design. You can also click <strong>Code</strong> to view code only or click <strong>Design</strong> to view design only.</li> </ol> <p class="image-container"><img alt="b19824b6bdd2eb0e.png" title="Android studio pane with code split and design options" style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b19824b6bdd2eb0e.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b19824b6bdd2eb0e_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b19824b6bdd2eb0e_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b19824b6bdd2eb0e_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b19824b6bdd2eb0e_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b19824b6bdd2eb0e_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b19824b6bdd2eb0e_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b19824b6bdd2eb0e_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b19824b6bdd2eb0e_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b19824b6bdd2eb0e_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b19824b6bdd2eb0e_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b19824b6bdd2eb0e_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>After pressing <strong>Split</strong> you should see three areas:</p> <p class="image-container"><img alt="2490cde640ebe0f5.png" title="Android studio with panes marked as 1 2 and 3" style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/2490cde640ebe0f5.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/2490cde640ebe0f5_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/2490cde640ebe0f5_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/2490cde640ebe0f5_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/2490cde640ebe0f5_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/2490cde640ebe0f5_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/2490cde640ebe0f5_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/2490cde640ebe0f5_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/2490cde640ebe0f5_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/2490cde640ebe0f5_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/2490cde640ebe0f5_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/2490cde640ebe0f5_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <ul> <li>The <strong>Project</strong> view (1) shows the files and folders of your project</li> <li>The <strong>Code</strong> view (2) is where you edit code</li> <li>The <strong>Design</strong> view (3) is where you preview what your app looks like</li> </ul> <p>In the <strong>Design</strong> view, you will see a blank pane with this text:</p> <p class="image-container"><img alt="The text on this reads " a successful build is needed before the preview can be displayed" on one line and "build and refresh" on the line below." title="Design pane" style="width: 462.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/38c4a624cae42640.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/38c4a624cae42640_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/38c4a624cae42640_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/38c4a624cae42640_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/38c4a624cae42640_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/38c4a624cae42640_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/38c4a624cae42640_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/38c4a624cae42640_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/38c4a624cae42640_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/38c4a624cae42640_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/38c4a624cae42640_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/38c4a624cae42640_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <ol type="1" start="10"> <li>Click <strong>Build & Refresh</strong>. It may take a while to build but when it is done the preview shows a text box that says "<strong>Hello Android!</strong>". Empty Compose activity contains all the code necessary to create this app.</li> </ol> <p class="image-container"><img alt="b703cbb79837ae70.png" style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b703cbb79837ae70.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b703cbb79837ae70_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b703cbb79837ae70_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b703cbb79837ae70_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b703cbb79837ae70_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b703cbb79837ae70_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b703cbb79837ae70_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b703cbb79837ae70_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b703cbb79837ae70_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b703cbb79837ae70_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b703cbb79837ae70_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b703cbb79837ae70_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> </google-codelab-step> <google-codelab-step label="Find project files" duration="0" step="2"> <h2 class="step-title" id="2" data-text="Find project files"> 3. Find project files </h2> <p>In this section you will continue to explore Android Studio by becoming familiar with the file structure.</p> <ol type="1"> <li>In Android Studio, take a look at the <strong>Project</strong> tab. The <strong>Project</strong> tab shows the files and folders of your project. When you were setting up your project the package name was <strong>com.example.greetingcard</strong>. You can see that package right here in the <strong>Project</strong> tab. A package is basically a folder where code is located. Android Studio organizes the project in a directory structure made up of set of packages.</li> <li>If necessary, select <strong>Android</strong> from the drop-down menu in the <strong>Project</strong> tab.</li> </ol> <p class="image-container"><img alt="7ffa3993256d98c0.png" style="width: 403.20px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7ffa3993256d98c0.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7ffa3993256d98c0_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7ffa3993256d98c0_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7ffa3993256d98c0_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7ffa3993256d98c0_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7ffa3993256d98c0_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7ffa3993256d98c0_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7ffa3993256d98c0_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7ffa3993256d98c0_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7ffa3993256d98c0_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7ffa3993256d98c0_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7ffa3993256d98c0_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>This is the standard view and organization of files that you use. It's useful when you write code for your project because you can easily access the files you will be working on in your app. However, if you look at the files in a file browser, such as Finder or Windows Explorer, the file hierarchy is organized very differently.</p> <ol type="1" start="3"> <li>Select <strong>Project Source Files</strong> from the drop-down menu. You can now browse the files in the same way as in any file browser.</li> </ol> <p class="image-container"><img alt="96c1b3c64c784cfb.png" style="width: 403.20px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/96c1b3c64c784cfb.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/96c1b3c64c784cfb_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/96c1b3c64c784cfb_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/96c1b3c64c784cfb_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/96c1b3c64c784cfb_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/96c1b3c64c784cfb_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/96c1b3c64c784cfb_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/96c1b3c64c784cfb_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/96c1b3c64c784cfb_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/96c1b3c64c784cfb_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/96c1b3c64c784cfb_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/96c1b3c64c784cfb_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <ol type="1" start="4"> <li>Select <strong>Android</strong> again to switch back to the previous view. You use the <strong>Android</strong> view for this course. If your file structure ever looks strange, check to make sure you're still in <strong>Android</strong> view.</li> </ol> </google-codelab-step> <google-codelab-step label="Update the text" duration="0" step="3"> <h2 class="step-title" id="3" data-text="Update the text"> 4. Update the text </h2> <p>Now that you have gotten to know Android Studio, it's time to start making your greeting card!</p> <p>Look at the <strong>Code</strong> view of the <code translate="no" dir="ltr">MainActivity.kt</code> file. Notice there are some automatically generated functions in this code, specifically the <code translate="no" dir="ltr">onCreate()</code> and the <code translate="no" dir="ltr">setContent()</code> functions.</p> <aside class="special"><p><strong>Note:</strong> Remember that a function is a segment of a program that performs a specific task.</p> </aside> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GreetingCardTheme { // A surface container using the 'background' color from the theme Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background ) { Greeting("Android") } } } } } </code></pre> <p>The <code translate="no" dir="ltr">onCreate()</code> function is the entry point to this Android app and calls other functions to build the user interface. In Kotlin programs, the <code translate="no" dir="ltr">main()</code> function is the entry point/starting point of execution. In Android apps, the <code translate="no" dir="ltr">onCreate()</code> function fills that role.</p> <p>The <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/reference/kotlin/androidx/compose/ui/platform/ComposeView#setContent(kotlin.Function0)" target="_blank"><code translate="no" dir="ltr">setContent()</code></a> function within the <code translate="no" dir="ltr">onCreate()</code> function is used to define your layout through composable functions. All functions marked with the <code translate="no" dir="ltr">@Composable</code> annotation can be called from the <code translate="no" dir="ltr">setContent()</code> function or from other Composable functions. The annotation tells the Kotlin compiler that this function is used by Jetpack Compose to generate the UI.</p> <aside class="special"><p><strong>Note:</strong> The compiler takes the Kotlin code you wrote, looks at it line by line, and translates it into something that the computer can understand. This process is called compiling your code.</p> </aside> <p>Next, look at the <code translate="no" dir="ltr">Greeting()</code> function. The <code translate="no" dir="ltr">Greeting()</code> function is a Composable function, notice the <code translate="no" dir="ltr">@Composable</code> annotation above it. This Composable function takes some input and generates what's shown on the screen.</p> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Text(text = "Hello $name!") } </code></pre> <p>You've learned about functions before (if you need a refresher, visit the <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/codelabs/basic-android-kotlin-compose-functions" target="_blank">CreateandusefunctionsinKotlin</a> codelab), but there are a few differences with composable functions.</p> <p class="image-container"><img alt="It has composable annotation a function name with parameters it returns noting " title="Composable function signature " style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4e79342589823240.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4e79342589823240_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4e79342589823240_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4e79342589823240_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4e79342589823240_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4e79342589823240_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4e79342589823240_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4e79342589823240_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4e79342589823240_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4e79342589823240_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4e79342589823240_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/4e79342589823240_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <ul> <li>You add the <code translate="no" dir="ltr">@Composable</code> annotation before the function.</li> <li><code translate="no" dir="ltr">@Composable</code> function names are capitalized.</li> <li><code translate="no" dir="ltr">@Composable</code> functions can't return anything.</li> </ul> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Text(text = "Hello $name!") } </code></pre> <p>Right now the <code translate="no" dir="ltr">Greeting()</code> function takes in a name and displays <code translate="no" dir="ltr">Hello</code> to that person.</p> <ol type="1"> <li>Update the <code translate="no" dir="ltr">Greeting()</code> function to introduce yourself instead of saying "Hello":</li> </ol> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Text(text = "Hi, my name is $name!") } </code></pre> <ol type="1" start="2"> <li>Android should automatically update the preview.</li> </ol> <p class="image-container"><img alt="5c20d06050091e49.png" style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/5c20d06050091e49.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/5c20d06050091e49_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/5c20d06050091e49_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/5c20d06050091e49_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/5c20d06050091e49_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/5c20d06050091e49_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/5c20d06050091e49_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/5c20d06050091e49_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/5c20d06050091e49_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/5c20d06050091e49_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/5c20d06050091e49_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/5c20d06050091e49_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>Great! You changed the text, but it introduces you as Android, which is probably not your name. Next, you will personalize it to introduce you with your name!</p> <p>The <code translate="no" dir="ltr">GreetingPreview()</code> function is a cool feature that lets you see what your composable looks like without having to build your entire app. To enable a preview of a composable, annotated with <code translate="no" dir="ltr">@Composable</code> and <code translate="no" dir="ltr">@Preview</code>. The <code translate="no" dir="ltr">@Preview</code> annotation tells Android Studio that this composable should be shown in the design view of this file.</p> <p>As you can see, the <code translate="no" dir="ltr">@Preview</code> annotation takes in a parameter called <code translate="no" dir="ltr">showBackground</code>. If <code translate="no" dir="ltr">showBackground</code> is set to <strong>true</strong>, it will add a background to your composable preview.</p> <p>Since Android Studio by default uses a light theme for the editor, it can be hard to see the difference between <code translate="no" dir="ltr">showBackground</code> <code translate="no" dir="ltr">=</code> <code translate="no" dir="ltr">true</code> and <code translate="no" dir="ltr">showBackground</code> <code translate="no" dir="ltr">=</code> <code translate="no" dir="ltr">false</code>. However, this is an example of what the difference looks like. Notice the white background on the image set to <code translate="no" dir="ltr">true</code>.</p> <table class="vertical-rules"> <tr><td colspan="1" rowspan="1"><p><img src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/239d7fabe065588.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/239d7fabe065588_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/239d7fabe065588_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/239d7fabe065588_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/239d7fabe065588_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/239d7fabe065588_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/239d7fabe065588_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/239d7fabe065588_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/239d7fabe065588_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/239d7fabe065588_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/239d7fabe065588_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/239d7fabe065588_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px">showBackground = true</p> </td></tr> <tr><td colspan="1" rowspan="1"><p><img src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3ce153efce1dadd3.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3ce153efce1dadd3_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3ce153efce1dadd3_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3ce153efce1dadd3_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3ce153efce1dadd3_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3ce153efce1dadd3_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3ce153efce1dadd3_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3ce153efce1dadd3_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3ce153efce1dadd3_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3ce153efce1dadd3_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3ce153efce1dadd3_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/3ce153efce1dadd3_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px">showBackground = false</p> </td></tr> </table> <ol type="1" start="3"> <li>Update the <code translate="no" dir="ltr">GreetingPreview()</code> function with your name. Then rebuild and check out your personalized greeting card!</li> </ol> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">@Preview(showBackground = true) @Composable fun GreetingPreview() { GreetingCardTheme { Greeting("Meghan") } } </code></pre> <p class="image-container"><img alt="9703ef244f8ee16c.png" style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/9703ef244f8ee16c.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/9703ef244f8ee16c_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/9703ef244f8ee16c_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/9703ef244f8ee16c_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/9703ef244f8ee16c_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/9703ef244f8ee16c_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/9703ef244f8ee16c_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/9703ef244f8ee16c_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/9703ef244f8ee16c_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/9703ef244f8ee16c_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/9703ef244f8ee16c_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/9703ef244f8ee16c_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> </google-codelab-step> <google-codelab-step label="Change the background color" duration="0" step="4"> <h2 class="step-title" id="4" data-text="Change the background color"> 5. Change the background color </h2> <p>Now you have the introduction text, but it's a little boring! In this section, you learn to change the background color.</p> <p>To set a different background color for your introduction, you'll need to surround your text with a <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#Surface(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.BorderStroke,androidx.compose.ui.unit.Dp,kotlin.Function0)" target="_blank"><code translate="no" dir="ltr">Surface</code></a>. A <code translate="no" dir="ltr">Surface</code> is a container that represents a section of UI where you can alter the appearance, such as the background color or border.</p> <ol type="1"> <li>To surround the text with a <code translate="no" dir="ltr">Surface</code>, highlight the line of text, press (<code translate="no" dir="ltr">Alt+Enter</code> for Windows or <code translate="no" dir="ltr">Option+Enter</code> on Mac), and then select <strong>Surround with widget</strong>.</li> </ol> <p class="image-container"><img alt="e9f6f22e9d917749.png" style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e9f6f22e9d917749.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e9f6f22e9d917749_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e9f6f22e9d917749_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e9f6f22e9d917749_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e9f6f22e9d917749_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e9f6f22e9d917749_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e9f6f22e9d917749_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e9f6f22e9d917749_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e9f6f22e9d917749_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e9f6f22e9d917749_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e9f6f22e9d917749_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e9f6f22e9d917749_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <ol type="1" start="2"> <li>Choose <strong>Surround with Container</strong>.</li> </ol> <p class="image-container"><img alt="c168a23e1d570ab1.png" style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c168a23e1d570ab1.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c168a23e1d570ab1_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c168a23e1d570ab1_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c168a23e1d570ab1_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c168a23e1d570ab1_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c168a23e1d570ab1_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c168a23e1d570ab1_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c168a23e1d570ab1_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c168a23e1d570ab1_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c168a23e1d570ab1_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c168a23e1d570ab1_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/c168a23e1d570ab1_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>The default container it will give you is <code translate="no" dir="ltr">Box</code>, but you can change this to another container type. You will learn about <code translate="no" dir="ltr">Box</code> layout later in the course.</p> <p class="image-container"><img alt="7c8e4b7206ba3ee3.png" style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7c8e4b7206ba3ee3.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7c8e4b7206ba3ee3_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7c8e4b7206ba3ee3_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7c8e4b7206ba3ee3_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7c8e4b7206ba3ee3_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7c8e4b7206ba3ee3_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7c8e4b7206ba3ee3_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7c8e4b7206ba3ee3_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7c8e4b7206ba3ee3_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7c8e4b7206ba3ee3_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7c8e4b7206ba3ee3_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7c8e4b7206ba3ee3_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <ol type="1" start="3"> <li>Delete <code translate="no" dir="ltr">Box</code> and type <code translate="no" dir="ltr">Surface()</code> instead.</li> </ol> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Surface() { Text( text = "Hi, my name is $name!", modifier = modifier ) } } </code></pre> <ol type="1" start="4"> <li>To the <code translate="no" dir="ltr">Surface</code> container add a <code translate="no" dir="ltr">color</code> parameter, set it to <code translate="no" dir="ltr">Color</code>.</li> </ol> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Surface(color = Color) { Text( text = "Hi, my name is $name!", modifier = modifier ) } } </code></pre> <ol type="1" start="5"> <li>When you type <code translate="no" dir="ltr">Color</code> you may notice that it is red, which means Android Studio is not able to resolve this. To solve this scroll to the top of the file where it says import and press the three buttons.</li> </ol> <p class="image-container"><img alt="This image shows the import statement at the top of MainActivity.kt. " title="Import statement" style="width: 218.50px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/f0b982966f93b476.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/f0b982966f93b476_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/f0b982966f93b476_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/f0b982966f93b476_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/f0b982966f93b476_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/f0b982966f93b476_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/f0b982966f93b476_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/f0b982966f93b476_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/f0b982966f93b476_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/f0b982966f93b476_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/f0b982966f93b476_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/f0b982966f93b476_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <ol type="1" start="6"> <li>Add this statement to the bottom of the list of imports.</li> </ol> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">import androidx.compose.ui.graphics.Color </code></pre> <p>The full list of imports will look similar to this.</p> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import com.example.greetingcard.ui.theme.GreetingCardTheme import androidx.compose.ui.graphics.Color </code></pre> <ol type="1" start="7"> <li>In your code, the best practice is to keep your imports listed alphabetically and remove unused imports. To do this press <strong>Help</strong> on the top toolbar, type in <strong>optimize imports</strong>, and click on <strong>Optimize Imports</strong>.</li> </ol> <p class="image-container"><img alt="e3eaa09e229a8bea.png" style="width: 562.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e3eaa09e229a8bea.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e3eaa09e229a8bea_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e3eaa09e229a8bea_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e3eaa09e229a8bea_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e3eaa09e229a8bea_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e3eaa09e229a8bea_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e3eaa09e229a8bea_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e3eaa09e229a8bea_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e3eaa09e229a8bea_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e3eaa09e229a8bea_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e3eaa09e229a8bea_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/e3eaa09e229a8bea_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <p>You could open the <strong>Optimize Imports</strong> directly from the menu: <strong>Code</strong> > <strong>Optimize Imports.</strong> Using Help's search option will help you locate a menu item if you don't remember where it is.</p> <p>The full list of imports will now look like this:</p> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import com.example.greetingcard.ui.theme.GreetingCardTheme </code></pre> <ol type="1" start="8"> <li>Notice that the Color that you typed in the Surface parentheses has switched from being red to being underlined in red. To fix that, add a period after it. You will see a pop-up showing different color options.</li> </ol> <p>This is one of the cool features in Android Studio, it is intelligent and will help you out when it can. In this case it knows you are wanting to specify a color so it will suggest different colors.</p> <p class="image-container"><img alt="7a80d84754ab7c74.png" style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7a80d84754ab7c74.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7a80d84754ab7c74_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7a80d84754ab7c74_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7a80d84754ab7c74_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7a80d84754ab7c74_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7a80d84754ab7c74_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7a80d84754ab7c74_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7a80d84754ab7c74_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7a80d84754ab7c74_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7a80d84754ab7c74_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7a80d84754ab7c74_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/7a80d84754ab7c74_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <ol type="1" start="9"> <li>Choose a color for your surface. This codelab uses <strong>Cyan</strong>, but you can choose your favorite!</li> </ol> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Surface(color = Color.Cyan) { Text( text = "Hi, my name is $name!", modifier = modifier ) } } </code></pre> <ol type="1" start="10"> <li>Notice the updated preview.</li> </ol> <p class="image-container"><img alt="b76e2396b61a311b.png" style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b76e2396b61a311b.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b76e2396b61a311b_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b76e2396b61a311b_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b76e2396b61a311b_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b76e2396b61a311b_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b76e2396b61a311b_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b76e2396b61a311b_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b76e2396b61a311b_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b76e2396b61a311b_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b76e2396b61a311b_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b76e2396b61a311b_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/b76e2396b61a311b_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> </google-codelab-step> <google-codelab-step label="Add padding" duration="0" step="5"> <h2 class="step-title" id="5" data-text="Add padding"> 6. Add padding </h2> <p>Now your text has a background color, next you will add some space (padding) around the text.</p> <p>A <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier" target="_blank"><code translate="no" dir="ltr">Modifier</code></a> is used to augment or decorate a composable. One modifier you can use is the <code translate="no" dir="ltr">padding</code> modifier, which adds space around the element (in this case, adding space around the text). This is accomplished by using the <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp)" target="_blank"><code translate="no" dir="ltr">Modifier.padding()</code></a> function.</p> <p>Every composable should have an optional parameter of the type <code translate="no" dir="ltr">Modifier</code>. This should be the first optional parameter.</p> <ol type="1"> <li>Add a padding to the <code translate="no" dir="ltr">modifier</code> with a size of <code translate="no" dir="ltr">24.dp</code>.</li> </ol> <aside class="special"><p><strong>Note:</strong> You learn more about density-independent pixels (<code translate="no" dir="ltr">dp</code>) in the next pathway, but refer to <a href="http://web.archive.org/web/20230924121230/https://m3.material.io/foundations/layout/understanding-layout/spacing#abccd6ce-1092-4ad0-9351-de75aeae0edf" target="_blank">Layout – Material Design 3</a> article if you want to read more now.</p> </aside> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Surface(color = Color.Cyan) { Text( text = "Hi, my name is $name!", modifier = modifier.padding(24.dp) ) } } </code></pre> <p class="image-container"><img alt="52831c2cf4f3fed1.png" style="width: 624.00px" src="/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/52831c2cf4f3fed1.png" srcset="http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/52831c2cf4f3fed1_36.png 36w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/52831c2cf4f3fed1_48.png 48w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/52831c2cf4f3fed1_72.png 72w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/52831c2cf4f3fed1_96.png 96w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/52831c2cf4f3fed1_480.png 480w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/52831c2cf4f3fed1_720.png 720w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/52831c2cf4f3fed1_856.png 856w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/52831c2cf4f3fed1_960.png 960w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/52831c2cf4f3fed1_1440.png 1440w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/52831c2cf4f3fed1_1920.png 1920w, http://web.archive.org/web/20230924121230im_/https://developer.android.com/static/codelabs/basic-android-kotlin-compose-first-app/img/52831c2cf4f3fed1_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"></p> <ol type="1" start="2"> <li>Add these imports to the import statement section.</li> </ol> <p>Make sure to use <strong>Optimize Imports</strong> to alphabetize the new imports.</p> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">import androidx.compose.ui.unit.dp import androidx.compose.foundation.layout.padding </code></pre> <p>Well congratulations - you built your first Android app in Compose! This is a pretty huge accomplishment. Take some time to play around with different colors and text, make it your own!</p> </google-codelab-step> <google-codelab-step label="Review the solution code" duration="0" step="6"> <h2 class="step-title" id="6" data-text="Review the solution code"> 7. Review the solution code </h2> <h3 is-upgraded id="code-snippet-for-review" data-text="Code snippet for review">Code snippet for review</h3> <pre class="prettyprint" translate="no" dir="ltr"><code translate="no" dir="ltr">package com.example.greetingcard import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.ui.graphics.Color import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.greetingcard.ui.theme.GreetingCardTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { GreetingCardTheme { // A surface container using the 'background' color from the theme Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { Greeting("Android") } } } } } @Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Surface(color = Color.Cyan) { Text(text = "Hi, my name is $name!", modifier = modifier.padding(24.dp)) } } @Preview(showBackground = true) @Composable fun GreetingPreview() { GreetingCardTheme { Greeting("Meghan") } } </code></pre> </google-codelab-step> <google-codelab-step label="Conclusion" duration="0" step="7"> <h2 class="step-title" id="7" data-text="Conclusion"> 8. Conclusion </h2> <p>You learned about Android Studio and built your first Android app with Compose, great job!</p> <p>This codelab is part of the <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/courses/android-basics-compose/course" target="_blank">Android Basics with Compose course</a>. To learn how to run your app on the emulator or a physical device, check out the next codelabs in <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/courses/pathways/android-basics-compose-unit-1-pathway-2" target="_blank">this pathway</a>.</p> <h2 is-upgraded id="summary" data-text="Summary">Summary</h2> <ul> <li>To create a new project: open Android Studio, click <strong>New Project > Empty Activity > Next</strong>, enter a name for your project and then configure its settings.</li> <li>To see how your app looks, use the <strong>Preview</strong> pane.</li> <li>Composable functions are like regular functions with a few differences: functions names are capitalized, you add the <code translate="no" dir="ltr">@Composable</code> annotation before the function, <code translate="no" dir="ltr">@Composable</code> functions can't return anything.</li> <li>A <a href="http://web.archive.org/web/20230924121230/https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier" target="_blank"><code translate="no" dir="ltr">Modifier</code></a> is used to augment or decorate your composable.</li> </ul> <h2 is-upgraded id="learn-more" data-text="Learn more">Learn more</h2> <ul> <li><a href="http://web.archive.org/web/20230924121230/https://developer.android.com/courses/android-basics-kotlin/android-basics-kotlin-vocab" target="_blank">Vocabulary for Android Basics in Kotlin</a></li> <li><a href="http://web.archive.org/web/20230924121230/https://developer.android.com/studio/intro" target="_blank">Meet Android Studio</a></li> <li><a href="http://web.archive.org/web/20230924121230/https://developer.android.com/studio/projects" target="_blank">Projects overview</a></li> <li><a href="http://web.archive.org/web/20230924121230/https://developer.android.com/studio/projects/create-project" target="_blank">Create a project</a></li> <li><a href="http://web.archive.org/web/20230924121230/https://developer.android.com/studio/projects/templates" target="_blank">Add code from a template</a></li> <li><a href="http://web.archive.org/web/20230924121230/https://developer.android.com/jetpack/compose" target="_blank">Jetpack Compose</a></li> <li><a href="http://web.archive.org/web/20230924121230/https://m3.material.io/foundations/layout/understanding-layout/spacing#64eb2223-f5e8-4d2a-9edc-9e3a7002220a" target="_blank">Padding – Material Design 3</a></li> </ul> </google-codelab-step> </google-codelab> <devsite-hats-survey class="nocontent" hats-id="onAFgYxTD0kxBYCLVTd0Z41p75CM" listnr-id="5207477"></devsite-hats-survey> </div> </article> <devsite-content-footer class="nocontent"> <p>Content and code samples on this page are subject to the licenses described in the <a href="/web/20230924121230/https://developer.android.com/license">Content License</a>. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.</p> </devsite-content-footer> <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/20230924121230/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/20230924121230im_/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/20230924121230/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/20230924121230im_/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/20230924121230/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/20230924121230im_/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230im_/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/20230924121230im_/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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/20230924121230/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="fr">Français</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br">Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi">Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="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": {"dimension11": false, "dimension1": "Signed out", "dimension3": false, "dimension4": "Get started", "dimension6": "en", "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": "codelab", "projectName": "Get started", "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="1nzaceC8osqCIy662yZktunCqFJ0Bm"> (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/20230924121230/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/20230924121230/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f","http://web.archive.org/web/20230924121230/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android","http://web.archive.org/web/20230924121230/https://android-dot-devsite-v2-prod.appspot.com",1,null,["/_pwa/android/manifest.json","http://web.archive.org/web/20230924121230/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/images/video-placeholder.svg","http://web.archive.org/web/20230924121230/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/images/rebrand/favicon.svg","http://web.archive.org/web/20230924121230/https://www.gstatic.com/devrel-devsite/prod/va881901acfa784a302a2fcaebeaf9ea1e7654afe884686768d3a16b36e928e9f/android/images/rebrand/lockup.svg","http://web.archive.org/web/20230924121230/https://fonts.googleapis.com/css?family=Google+Sans:400,500,600,700|Google+Sans+Text:400,400italic,500,500italic,600,600italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,40,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,111,112,113,115,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,144,147,148,149,150,151,152,154,155,156,157,158,159,161,163,164,165,168,169,170,172,173,179,180,182,183,186,190,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","developer.android.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Cloud__enable_cloud_facet_chat","ContentExcellence__enable_googler_button","Search__enable_dynamic_content_confidential_banner","Cloud__enable_cloud_shell","Profiles__enable_public_developer_profiles","Badges__enable_hide_badges","Badges__enable_drag_and_drop_badges","Profiles__enable_developer_profiles_callout","AuthorPageInsights__enable_author_page_insights","Cloud__enable_free_trial_server_call","Badges__enable_delete_badges","MiscFeatureFlags__enable_tls_version_for_gaia_calls","SignIn__enable_auto_signin_oauth","MiscFeatureFlags__developers_footer_image","Profiles__enable_developer_profiles_interests","Search__enable_page_map","Search__enable_acl_suggestions","MiscFeatureFlags__content_publisher_push_queue","Experiments__reqs_query_experiments","Search__enable_devsite_serp","Significatio__enable_footprints","MiscFeatureFlags__devpanel_url","OpenInReplit__enable_replit","Localization__enable_locale_redirects","Profiles__enable_developer_profiles_dashboard_recommendations","Concierge__enable_api_explorer","Profiles__enable_profile_communities","Cloud__enable_cloud_dlp_service","Significatio__enable_experiment_id_caching","Profiles__require_profile_eligibility_for_signin","ContentExcellence__enable_verified_date","Cloud__enable_cloudx_experiment_ids","Experiments__enable_experiments","Cloud__enable_cloudx_ping","Search__enable_faceted_search","BookNav__enable_book_nav_filtering","Cloud__enable_free_trial_personalization_migration","Profiles__enable_page_saving","Profiles__enable_profile_collections","Cloud__enable_cloud_shell_fte_user_flow","MiscFeatureFlags__emergency_css","Significatio__enable_by_tenant","Profiles__enable_profile_notifications_ui","MiscFeatureFlags__developers_footer_dark_image","Analytics__enable_ga4_analytics","Rebranding__enable_rebranding","Profiles__enable_searchable_interests","BookNav__enable_collapsible_book_nav","Concierge__enable_pushui","Search__enable_suggestions_from_borg","Profiles__enable_suggested_interests"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","http://web.archive.org/web/20230924121230/https://developerscontentserving-pa.googleapis.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","http://web.archive.org/web/20230924121230/https://developerscontentsearch-pa.googleapis.com",2]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Create your first Android app | Get started | Android Developers