CINXE.COM

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Android Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#34a853"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/android/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500,600,700|Google+Sans+Text:400,400italic,500,500italic,600,600italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/favicon.svg"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/touchicon-180.png"><link rel="canonical" href="https://developer.android.com/codelabs/jetpack-compose-basics"><link rel="search" type="application/opensearchdescription+xml" title="Android Developers" href="https://developer.android.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developer.android.com/codelabs/jetpack-compose-basics" /><link rel="alternate" hreflang="x-default" href="https://developer.android.com/codelabs/jetpack-compose-basics" /><link rel="alternate" hreflang="zh-Hans" href="https://developer.android.com/codelabs/jetpack-compose-basics?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developer.android.com/codelabs/jetpack-compose-basics?hl=zh-tw" /><link rel="alternate" hreflang="fr" href="https://developer.android.com/codelabs/jetpack-compose-basics?hl=fr" /><link rel="alternate" hreflang="id" href="https://developer.android.com/codelabs/jetpack-compose-basics?hl=id" /><link rel="alternate" hreflang="ja" href="https://developer.android.com/codelabs/jetpack-compose-basics?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developer.android.com/codelabs/jetpack-compose-basics?hl=ko" /><link rel="alternate" hreflang="es-419" href="https://developer.android.com/codelabs/jetpack-compose-basics?hl=es-419" /><link rel="alternate" hreflang="vi" href="https://developer.android.com/codelabs/jetpack-compose-basics?hl=vi" /><title>Jetpack Compose basics  |  Android Developers</title> <meta property="og:title" content="Jetpack Compose basics  |  Android Developers"><meta name="description" content="In this codelab, you’ll learn the basics of Compose."> <meta property="og:description" content="In this codelab, you’ll learn the basics of Compose."><meta property="og:url" content="https://developer.android.com/codelabs/jetpack-compose-basics"><meta property="og:locale" content="en"> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="codelab" theme="android-theme" type="codelab" appearance layout="docs" display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="androidDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Android Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/lockup.svg" class="devsite-site-logo" alt="Android Developers"> </picture> </a> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion tenant-name="Android Developers" > <form class="devsite-search-form" action="https://developer.android.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <a class="devsite-header-link devsite-top-button button gc-analytics-event" href="https://developer.android.com/studio" data-category="Site-Wide Custom Events" data-label="Site header link" > Android Studio </a> <devsite-user enable-profiles id="devsite-user"> Sign in </devsite-user> </div> </div> </div> </div> </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"> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="androidDevelopers" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme" alt="Android Developers"> <img src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/lockup.svg" class="devsite-site-logo" alt="Android Developers"> </picture> </a> </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="/studio" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Android Studio" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> Android Studio </a> </li> </ul> </div> </div> </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" > </ul> </div> <h1 class="devsite-page-title" tabindex="-1"> Jetpack Compose basics </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> Stay organized with collections Save and categorize content based on your preferences. </devsite-feature-tooltip> <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="" codelab-ga4id="" doc-id="1A2w68unVNZHh0bPVLyuKHrhmTBBAN93bEFlOtpiSwYA" id="jetpack-compose-basics" title="Jetpack Compose basics" no-tooltip="" environment="web" category="android" feedback-link="" layout="paginated" > <google-codelab-step label="Before you begin" duration="1" step="0"> <google-codelab-about codelab-title="Jetpack Compose basics" last-updated="2024-01-18T21:40:31Z" duration="65"> </google-codelab-about> <h2 class="step-title" id="0" data-text="Before you begin" tabindex="-1"> 1. Before you begin </h2> <a href="https://developer.android.com/jetpack/compose" target="_blank">Jetpack Compose</a> is a modern toolkit designed to simplify UI development. It combines a reactive programming model with the conciseness and ease of use of the Kotlin programming language. It is fully declarative, meaning you describe your UI by calling a series of functions that transform data into a UI hierarchy. When the underlying data changes, the framework automatically re-executes these functions, updating the UI hierarchy for you. A Compose app is made up of composable functions - just regular functions marked with <code translate="no" dir="ltr">@Composable</code>, which can call other composable functions. A function is all you need to create a new UI component. The annotation tells Compose to add special support to the function for updating and maintaining your UI over time. Compose lets you structure your code into small chunks. Composable functions are often referred to as "composables" for short. By making small reusable composables, it's easy to build up a library of UI elements used in your app. Each one is responsible for one part of the screen and can be edited independently. <aside class="special">Note: In this codelab, the terms "UI Components," "Composable functions," and "composables" are used interchangeably to refer to the same concept. </aside> For more support as you're walking through this codelab, check out the following code-along: Note: The code-along uses Material 2 while the codelab is updated to use Material 3. Be aware that there will be some steps where they are different. <devsite-youtube video-id="k3jvNqj4m08"></devsite-youtube> <h2 is-upgraded id="prerequisites" data-text="Prerequisites" tabindex="-1">Prerequisites</h2> <ul> <li>Experience with Kotlin syntax, including lambdas</li> </ul> <h2 is-upgraded id="what-youll-do" data-text="What you'll do" tabindex="-1">What you'll do</h2> In this codelab, you will learn: <ul> <li>What Compose is</li> <li>How to build UIs with Compose</li> <li>How to manage state in composable functions</li> <li>How to create a performant list</li> <li>How to add animations</li> <li>How to style and theme an app</li> </ul> You'll build an app with an onboarding screen, and a list of animated expanding items: <img alt="8d24a786bfe1a8f2.gif" style="width: 302.60px" src="/static/codelabs/jetpack-compose-basics/img/8d24a786bfe1a8f2.gif"> <h2 is-upgraded id="what-youll-need" data-text="What you'll need" tabindex="-1">What you'll need</h2> <ul> <li><a href="https://developer.android.com/studio" target="_blank">Latest Android Studio</a></li> </ul> </google-codelab-step> <google-codelab-step label="Starting a new Compose project" duration="2" step="1"> <h2 class="step-title" id="1" data-text="Starting a new Compose project" tabindex="-1"> 2. Starting a new Compose project </h2> To start a new Compose project, open Android Studio. If you're in the Welcome to Android Studio window, click Start a new Android Studio project. If you already have an Android Studio project open, select File > New > New Project from the menu bar. For a new project, choose Empty Activity from the available templates. <img alt="d12472c6323de500.png" style="width: 624.00px" src="/static/codelabs/jetpack-compose-basics/img/d12472c6323de500.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/d12472c6323de500_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/d12472c6323de500_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/d12472c6323de500_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/d12472c6323de500_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/d12472c6323de500_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/d12472c6323de500_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/d12472c6323de500_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/d12472c6323de500_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/d12472c6323de500_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/d12472c6323de500_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/d12472c6323de500_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> Click Next and configure your project as usual, calling it "Basics Codelab". Make sure you select a minimumSdkVersion of at least API level 21, which is the minimum API Compose supports. <aside class="special">Note: For more information about setting up Compose with an empty activity or adding it to an existing project, check out the <a href="https://developer.android.com/jetpack/compose/setup" target="_blank">documentation</a>. </aside> When choosing the Empty Activity template, the following code is generated for you in your project: <ul> <li>The project is already configured to use Compose.</li> <li>The <code translate="no" dir="ltr">AndroidManifest.xml</code> file is created.</li> <li>The <code translate="no" dir="ltr">build.gradle.kts</code> and <code translate="no" dir="ltr">app/build.gradle.kts</code> files contain options and dependencies needed for Compose.</li> </ul> After syncing the project, open <code translate="no" dir="ltr">MainActivity.kt</code> and check out the code. <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { BasicsCodelabTheme { // 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) { Text( text = "Hello $name!", modifier = modifier ) } @Preview(showBackground = true) @Composable fun GreetingPreview() { BasicsCodelabTheme { Greeting("Android") } } </code></pre></devsite-code> <aside class="warning">Warning: The app theme used inside <code translate="no" dir="ltr">setContent</code> depends on how your project is named. This codelab assumes that the project is called BasicsCodelab. If you copy-paste code from the codelab, don't forget to update <code translate="no" dir="ltr">BasicsCodelabTheme</code> with the name of your theme available in the <code translate="no" dir="ltr">ui/Theme.kt</code> file. We'll get into theming later in the codelab. </aside> In the next section, you'll see what each method does, and how you can improve them to create flexible and reusable layouts. <h2 is-upgraded id="solution-to-the-codelab" data-text="Solution to the codelab" tabindex="-1">Solution to the codelab</h2> You can get the code for the solution of this codelab from GitHub: <div></div><devsite-code><pre translate="no" dir="ltr" is-upgraded>$ git clone https://github.com/android/codelab-android-compose </pre></devsite-code> Alternatively you can download the repository as a Zip file: <a href="https://github.com/android/codelab-android-compose/archive/main.zip" target="_blank"><button class="button button-primary button-with-icon">file_downloadDownload Zip</button></a> You'll find the solution code in the <code translate="no" dir="ltr">BasicsCodelab</code> project. We recommend that you follow the codelab step-by-step at your own pace and check the solution if you consider it necessary. During the codelab, you'll be presented with snippets of code that you'll need to add to the project. </google-codelab-step> <google-codelab-step label="Getting started with Compose" duration="3" step="2"> <h2 class="step-title" id="2" data-text="Getting started with Compose" tabindex="-1"> 3. Getting started with Compose </h2> Go through the different classes and methods related to Compose that Android Studio has generated for you. <h2 is-upgraded id="composable-functions" data-text="Composable functions" tabindex="-1">Composable functions</h2> A composable function is a regular function annotated with <code translate="no" dir="ltr">@Composable</code>. This enables your function to call other <code translate="no" dir="ltr">@Composable</code> functions within it. You can see how the <code translate="no" dir="ltr">Greeting</code> function is marked as <code translate="no" dir="ltr">@Composable</code>. This function will produce a piece of UI hierarchy displaying the given input, <code translate="no" dir="ltr">String</code>. <code translate="no" dir="ltr">Text</code> is a composable function provided by the library. <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Text( text = "Hello $name!", modifier = modifier ) } </code></pre></devsite-code> <aside class="special">Note: Composable functions are Kotlin functions that are marked with the <code translate="no" dir="ltr">@Composable</code> annotation, as you can see in the code snippet above. </aside> <h2 is-upgraded id="compose-in-an-android-app" data-text="Compose in an Android app" tabindex="-1">Compose in an Android app</h2> With Compose, an <code translate="no" dir="ltr">Activity</code> remains the entry point to an Android app. In our project, <code translate="no" dir="ltr">MainActivity</code> is launched when the user opens the app (as it's specified in the <code translate="no" dir="ltr">AndroidManifest.xml</code> file). You use <code translate="no" dir="ltr">setContent</code> to define your layout, but instead of using an XML file as you'd do in the traditional View system, you call Composable functions within it. <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Perl6"><code translate="no" dir="ltr">class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { BasicsCodelabTheme { // A surface container using the 'background' color from the theme Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background ) { Greeting("Android") } } } } } </code></pre></devsite-code> <code translate="no" dir="ltr">BasicsCodelabTheme</code> is a way to style Composable functions. You'll see more about this in the Theming your app section. To see how the text displays on the screen, you can either run the app in an emulator or device, or use the Android Studio preview. To use the Android Studio preview, you just have to mark any parameterless Composable function or functions with default parameters with the <code translate="no" dir="ltr">@Preview</code> annotation and build your project. You can already see a <code translate="no" dir="ltr">Preview Composable</code> function in the <code translate="no" dir="ltr">MainActivity.kt</code> file. You can have multiple previews in the same file and give them names. <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@Preview(showBackground = true, name = "Text preview") @Composable fun GreetingPreview() { BasicsCodelabTheme { Greeting(name = "Android") } } </code></pre></devsite-code> <img alt="fb011e374b98ccff.png" style="width: 624.00px" src="/static/codelabs/jetpack-compose-basics/img/fb011e374b98ccff.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/fb011e374b98ccff_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/fb011e374b98ccff_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/fb011e374b98ccff_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/fb011e374b98ccff_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/fb011e374b98ccff_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/fb011e374b98ccff_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/fb011e374b98ccff_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/fb011e374b98ccff_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/fb011e374b98ccff_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/fb011e374b98ccff_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/fb011e374b98ccff_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <aside class="special">Note: When importing classes related to Jetpack Compose in this project, use those from: <ul> <li><code translate="no" dir="ltr">androidx.compose.*</code> for compiler and runtime classes</li> <li><code translate="no" dir="ltr">androidx.compose.ui.*</code> for UI toolkit and libraries</li> </ul> </aside> The preview might not appear if Code <img alt="eeacd000622ba9b.png" style="width: 31.36px" src="/static/codelabs/jetpack-compose-basics/img/eeacd000622ba9b.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/eeacd000622ba9b_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/eeacd000622ba9b_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/eeacd000622ba9b_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/eeacd000622ba9b_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/eeacd000622ba9b_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/eeacd000622ba9b_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/eeacd000622ba9b_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/eeacd000622ba9b_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/eeacd000622ba9b_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/eeacd000622ba9b_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/eeacd000622ba9b_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> is selected. Click Split <img alt="7093def1e32785b2.png" style="width: 28.79px" src="/static/codelabs/jetpack-compose-basics/img/7093def1e32785b2.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/7093def1e32785b2_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/7093def1e32785b2_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/7093def1e32785b2_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/7093def1e32785b2_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/7093def1e32785b2_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/7093def1e32785b2_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/7093def1e32785b2_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/7093def1e32785b2_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/7093def1e32785b2_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/7093def1e32785b2_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/7093def1e32785b2_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> to see the preview. </google-codelab-step> <google-codelab-step label="Tweaking the UI" duration="4" step="3"> <h2 class="step-title" id="3" data-text="Tweaking the UI" tabindex="-1"> 4. Tweaking the UI </h2> Let's start by setting a different background color for the <code translate="no" dir="ltr">Greeting</code>. You can do this by wrapping the <code translate="no" dir="ltr">Text</code> composable with a <code translate="no" dir="ltr">Surface</code>. <code translate="no" dir="ltr">Surface</code> takes a color, so use <code translate="no" dir="ltr">MaterialTheme.colorScheme.primary</code>. <aside class="special">Note: <code translate="no" dir="ltr">Surface</code> and <code translate="no" dir="ltr">MaterialTheme</code> are concepts related to <a href="https://m3.material.io/" target="_blank">Material Design</a>, which is a design system created by Google to help you create user interfaces and experiences. </aside> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Surface(color = MaterialTheme.colorScheme.primary) { Text( text = "Hello $name!", modifier = modifier ) } } </code></pre></devsite-code> The components nested inside <code translate="no" dir="ltr">Surface</code> will be drawn on top of that background color. <aside class="special">Note: When you add that code to the project, your preview should refresh automatically. If it doesn't then you will see a Build & Refresh button in the top-right corner of Android Studio. Tap on it or build the project to see the new changes in the preview. <img alt="9632f3ca76cbe115.png" style="width: 610.00px" src="/static/codelabs/jetpack-compose-basics/img/9632f3ca76cbe115.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/9632f3ca76cbe115_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/9632f3ca76cbe115_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/9632f3ca76cbe115_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/9632f3ca76cbe115_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/9632f3ca76cbe115_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/9632f3ca76cbe115_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/9632f3ca76cbe115_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/9632f3ca76cbe115_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/9632f3ca76cbe115_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/9632f3ca76cbe115_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/9632f3ca76cbe115_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> </aside> You can see the new changes in the preview: <img alt="c88121ec49bde8c7.png" style="width: 624.00px" src="/static/codelabs/jetpack-compose-basics/img/c88121ec49bde8c7.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/c88121ec49bde8c7_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/c88121ec49bde8c7_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/c88121ec49bde8c7_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/c88121ec49bde8c7_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/c88121ec49bde8c7_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/c88121ec49bde8c7_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/c88121ec49bde8c7_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/c88121ec49bde8c7_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/c88121ec49bde8c7_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/c88121ec49bde8c7_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/c88121ec49bde8c7_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> You might have missed an important detail: the text is now white. When did we define this? You didn't! The Material components, such as <code translate="no" dir="ltr">androidx.compose.material3.Surface</code>, are built to make your experience better by taking care of common features that you probably want in your app, such as choosing an appropriate color for text. We say Material is opinionated because it provides good defaults and patterns that are common to most apps. The Material components in Compose are built on top of other foundational components (in <code translate="no" dir="ltr">androidx.compose.foundation</code>), which are also accessible from your app components in case you need more flexibility. In this case, <code translate="no" dir="ltr">Surface</code> understands that, when the background is set to the <code translate="no" dir="ltr">primary</code> color, any text on top of it should use the <code translate="no" dir="ltr">onPrimary</code> color, which is also defined in the theme. You can learn more about this in the Theming your app section. <aside class="special">Note: For an interactive list of Material components in Compose, check out the <a href="https://play.google.com/store/apps/details?id=androidx.compose.material.catalog" target="_blank">Compose Material Catalog</a> app. </aside> <h2 is-upgraded id="modifiers" data-text="Modifiers" tabindex="-1">Modifiers</h2> Most Compose UI elements such as <code translate="no" dir="ltr">Surface</code> and <code translate="no" dir="ltr">Text</code> accept an optional <code translate="no" dir="ltr">modifier</code> parameter. Modifiers tell a UI element how to lay out, display, or behave within its parent layout. You may have already noticed that the <code translate="no" dir="ltr">Greeting</code> composable already has a default modifier, which is then passed to the <code translate="no" dir="ltr">Text</code>. For example, the <code translate="no" dir="ltr">padding</code> modifier will apply an amount of space around the element it decorates. You can create a padding modifier with <code translate="no" dir="ltr">Modifier.padding()</code>. You can also add multiple modifiers by chaining them, so in our case we can add the padding modifier to the default one: <code translate="no" dir="ltr">modifier.padding(24.dp)</code>. Now, add padding to your <code translate="no" dir="ltr">Text</code> on the screen: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import androidx.compose.foundation.layout.padding import androidx.compose.ui.unit.dp // ... @Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Surface(color = MaterialTheme.colorScheme.primary) { Text( text = "Hello $name!", modifier = modifier.padding(24.dp) ) } } </code></pre></devsite-code> <img alt="ef14f7c54ae7edf.png" style="width: 624.00px" src="/static/codelabs/jetpack-compose-basics/img/ef14f7c54ae7edf.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ef14f7c54ae7edf_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ef14f7c54ae7edf_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ef14f7c54ae7edf_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ef14f7c54ae7edf_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ef14f7c54ae7edf_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ef14f7c54ae7edf_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ef14f7c54ae7edf_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ef14f7c54ae7edf_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ef14f7c54ae7edf_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ef14f7c54ae7edf_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ef14f7c54ae7edf_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> There are dozens of modifiers which can be used to align, animate, lay out, make clickable or scrollable, transform, etc. For a comprehensive list, check out the <a href="https://developer.android.com/jetpack/compose/modifiers-list" target="_blank">List of Compose Modifiers</a>. You'll use some of them in the next steps. </google-codelab-step> <google-codelab-step label="Reusing composables" duration="2" step="4"> <h2 class="step-title" id="4" data-text="Reusing composables" tabindex="-1"> 5. Reusing composables </h2> The more components you add to the UI, the more levels of nesting you create. This can affect readability if a function becomes really large. By making small reusable components it's easy to build up a library of UI elements used in your app. Each one is responsible for one small part of the screen and can be edited independently. As a best practice, your function should include a Modifier parameter that is assigned an empty Modifier by default. Forward this modifier to the first composable you call inside your function. This way, the calling site can adapt layout instructions and behaviors from outside of your composable function. Create a Composable called <code translate="no" dir="ltr">MyApp</code> that includes the greeting. <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@Composable fun MyApp(modifier: Modifier = Modifier) { Surface( modifier = modifier, color = MaterialTheme.colorScheme.background ) { Greeting("Android") } } </code></pre></devsite-code> This lets you clean up the <code translate="no" dir="ltr">onCreate</code> callback and the preview as you can now reuse the <code translate="no" dir="ltr">MyApp</code> composable, avoiding code duplication. In the preview, let's call <code translate="no" dir="ltr">MyApp</code> and remove the name of the preview. Your <code translate="no" dir="ltr">MainActivity.kt</code> file should look like this: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">package com.example.basicscodelab import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent 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.basicscodelab.ui.theme.BasicsCodelabTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { BasicsCodelabTheme { MyApp(modifier = Modifier.fillMaxSize()) } } } } @Composable fun MyApp(modifier: Modifier = Modifier) { Surface( modifier = modifier, color = MaterialTheme.colorScheme.background ) { Greeting("Android") } } @Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Surface(color = MaterialTheme.colorScheme.primary) { Text( text = "Hello $name!", modifier = modifier.padding(24.dp) ) } } @Preview(showBackground = true) @Composable fun GreetingPreview() { BasicsCodelabTheme { MyApp() } } </code></pre></devsite-code> </google-codelab-step> <google-codelab-step label="Creating columns and rows" duration="5" step="5"> <h2 class="step-title" id="5" data-text="Creating columns and rows" tabindex="-1"> 6. Creating columns and rows </h2> The three basic standard layout elements in Compose are <code translate="no" dir="ltr">Column</code>, <code translate="no" dir="ltr">Row</code> and <code translate="no" dir="ltr">Box</code>. <img alt="518dbfad23ee1b05.png" style="width: 624.00px" src="/static/codelabs/jetpack-compose-basics/img/518dbfad23ee1b05.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/518dbfad23ee1b05_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/518dbfad23ee1b05_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/518dbfad23ee1b05_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/518dbfad23ee1b05_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/518dbfad23ee1b05_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/518dbfad23ee1b05_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/518dbfad23ee1b05_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/518dbfad23ee1b05_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/518dbfad23ee1b05_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/518dbfad23ee1b05_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/518dbfad23ee1b05_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> They are Composable functions that take Composable content, so you can place items inside. For example, each child inside of a <code translate="no" dir="ltr">Column</code> will be placed vertically. <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Scilab"><code translate="no" dir="ltr">// Don't copy over Column { Text("First row") Text("Second row") } </code></pre></devsite-code> Now try to change <code translate="no" dir="ltr">Greeting</code> so that it shows a column with two text elements like in this example: <img alt="bf27ee688c3231df.png" style="width: 240.50px" src="/static/codelabs/jetpack-compose-basics/img/bf27ee688c3231df.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/bf27ee688c3231df_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/bf27ee688c3231df_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/bf27ee688c3231df_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/bf27ee688c3231df_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/bf27ee688c3231df_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/bf27ee688c3231df_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/bf27ee688c3231df_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/bf27ee688c3231df_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/bf27ee688c3231df_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/bf27ee688c3231df_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/bf27ee688c3231df_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> Note that you might have to move the padding around. Compare your result with this solution: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import androidx.compose.foundation.layout.Column // ... @Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Surface(color = MaterialTheme.colorScheme.primary) { Column(modifier = modifier.padding(24.dp)) { Text(text = "Hello ") Text(text = name) } } } </code></pre></devsite-code> <h2 is-upgraded id="compose-and-kotlin" data-text="Compose and Kotlin" tabindex="-1">Compose and Kotlin</h2> Composable functions can be used like any other function in Kotlin. This makes building UIs really powerful since you can add statements to influence how the UI will be displayed. For example, you can use a <code translate="no" dir="ltr">for</code> loop to add elements to the <code translate="no" dir="ltr">Column</code>: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@Composable fun MyApp( modifier: Modifier = Modifier, names: List<String> = listOf("World", "Compose") ) { Column(modifier) { for (name in names) { Greeting(name = name) } } } </code></pre></devsite-code> <img alt="a7ba2a8cb7a7d79d.png" style="width: 219.19px" src="/static/codelabs/jetpack-compose-basics/img/a7ba2a8cb7a7d79d.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a7ba2a8cb7a7d79d_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a7ba2a8cb7a7d79d_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a7ba2a8cb7a7d79d_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a7ba2a8cb7a7d79d_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a7ba2a8cb7a7d79d_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a7ba2a8cb7a7d79d_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a7ba2a8cb7a7d79d_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a7ba2a8cb7a7d79d_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a7ba2a8cb7a7d79d_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a7ba2a8cb7a7d79d_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a7ba2a8cb7a7d79d_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> You haven't set dimensions or added any constraints to the size of your composables yet, so each row takes the minimum space it can and the preview does the same thing. Let's change our preview to emulate a common width of a small phone, 320dp. Add a <code translate="no" dir="ltr">widthDp</code> parameter to the <code translate="no" dir="ltr">@Preview</code> annotation like so: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@Preview(showBackground = true, widthDp = 320) @Composable fun GreetingPreview() { BasicsCodelabTheme { MyApp() } } </code></pre></devsite-code> <img alt="a5d5f6cdbdd918a2.png" style="width: 338.50px" src="/static/codelabs/jetpack-compose-basics/img/a5d5f6cdbdd918a2.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a5d5f6cdbdd918a2_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a5d5f6cdbdd918a2_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a5d5f6cdbdd918a2_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a5d5f6cdbdd918a2_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a5d5f6cdbdd918a2_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a5d5f6cdbdd918a2_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a5d5f6cdbdd918a2_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a5d5f6cdbdd918a2_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a5d5f6cdbdd918a2_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a5d5f6cdbdd918a2_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a5d5f6cdbdd918a2_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> Modifiers are used extensively in Compose so let's practice with a more advanced exercise: Try to replicate the following layout using the <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).fillMaxSize(kotlin.Float)" target="_blank"><code translate="no" dir="ltr">fillMaxWidth</code></a> and <a href="https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#(androidx.compose.ui.Modifier).padding(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)" target="_blank"><code translate="no" dir="ltr">padding</code></a> modifiers. <img alt="a9599061cf49a214.png" style="width: 382.20px" src="/static/codelabs/jetpack-compose-basics/img/a9599061cf49a214.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a9599061cf49a214_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a9599061cf49a214_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a9599061cf49a214_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a9599061cf49a214_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a9599061cf49a214_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a9599061cf49a214_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a9599061cf49a214_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a9599061cf49a214_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a9599061cf49a214_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a9599061cf49a214_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/a9599061cf49a214_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> Now compare your code with the solution: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import androidx.compose.foundation.layout.fillMaxWidth @Composable fun MyApp( modifier: Modifier = Modifier, names: List<String> = listOf("World", "Compose") ) { Column(modifier = modifier.padding(vertical = 4.dp)) { for (name in names) { Greeting(name = name) } } } @Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Surface( color = MaterialTheme.colorScheme.primary, modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp) ) { Column(modifier = Modifier.fillMaxWidth().padding(24.dp)) { Text(text = "Hello ") Text(text = name) } } } </code></pre></devsite-code> Note that: <ul> <li>Modifiers can have overloads so, for example, you can specify different ways to create a padding.</li> <li>To add multiple modifiers to an element, you simply chain them.</li> </ul> There are multiple ways to achieve this result, so if your code doesn't match this snippet, that doesn't mean your code is wrong. However, copy and paste this code to continue with the codelab. <h2 is-upgraded id="adding-a-button" data-text="Adding a button" tabindex="-1">Adding a button</h2> In the next step you'll add a clickable element that expands the <code translate="no" dir="ltr">Greeting</code>, so we need to add that button first. The goal is to create the following layout: <img alt="ff2d8c3c1349a891.png" style="width: 382.64px" src="/static/codelabs/jetpack-compose-basics/img/ff2d8c3c1349a891.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ff2d8c3c1349a891_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ff2d8c3c1349a891_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ff2d8c3c1349a891_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ff2d8c3c1349a891_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ff2d8c3c1349a891_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ff2d8c3c1349a891_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ff2d8c3c1349a891_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ff2d8c3c1349a891_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ff2d8c3c1349a891_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ff2d8c3c1349a891_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/ff2d8c3c1349a891_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <code translate="no" dir="ltr">Button</code> is a composable provided by the material3 package which takes a composable as the last argument. Since <a href="https://kotlinlang.org/docs/lambdas.html#passing-trailing-lambdas" target="_blank">trailing lambdas</a> can be moved outside of the parentheses, you can add any content to the button as a child. For example, a <code translate="no" dir="ltr">Text</code>: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Scilab"><code translate="no" dir="ltr">// Don't copy yet Button( onClick = { } // You'll learn about this callback later ) { Text("Show less") } </code></pre></devsite-code> <aside class="special">Note: Compose provides different types of <code translate="no" dir="ltr">Button</code> according to the <a href="https://m3.material.io/components/buttons/implementation/android" target="_blank">Material Design Buttons spec</a>—<code translate="no" dir="ltr">Button</code>, <code translate="no" dir="ltr">ElevatedButton</code>, <code translate="no" dir="ltr">FilledTonalButton</code>, <code translate="no" dir="ltr">OutlinedButton</code>, and <code translate="no" dir="ltr">TextButton</code>. In your case, you'll use an <code translate="no" dir="ltr">ElevatedButton</code> that wraps a <code translate="no" dir="ltr">Text</code> as the <code translate="no" dir="ltr">ElevatedButton</code> content. </aside> To achieve this you need to learn how to place a composable at the end of a row. There's no <code translate="no" dir="ltr">alignEnd</code> modifier so, instead, you give some <code translate="no" dir="ltr">weight</code> to the composable at the start. The <code translate="no" dir="ltr">weight</code> modifier makes the element fill all available space, making it flexible, effectively pushing away the other elements that don't have a weight, which are called inflexible. It also makes the <code translate="no" dir="ltr">fillMaxWidth</code> modifier redundant. Now try to add the button and place it as shown in the previous image. Check out the solution here: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import androidx.compose.foundation.layout.Row import androidx.compose.material3.ElevatedButton // ... @Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Surface( color = MaterialTheme.colorScheme.primary, modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp) ) { Row(modifier = Modifier.padding(24.dp)) { Column(modifier = Modifier.weight(1f)) { Text(text = "Hello ") Text(text = name) } ElevatedButton( onClick = { /* TODO */ } ) { Text("Show more") } } } } </code></pre></devsite-code> </google-codelab-step> <google-codelab-step label="State in Compose" duration="11" step="6"> <h2 class="step-title" id="6" data-text="State in Compose" tabindex="-1"> 7. State in Compose </h2> In this section you'll add some interaction to your screen. So far you've created static layouts but now you'll make them react to user changes to achieve this: <img alt="6675d41779cac69.gif" style="width: 374.54px" src="/static/codelabs/jetpack-compose-basics/img/6675d41779cac69.gif"> Before getting into how to make a button clickable and how to resize an item, you need to store some value somewhere that indicates whether each item is expanded or not–the state of the item. Since we need to have one of these values per greeting, the logical place for it is in the <code translate="no" dir="ltr">Greeting</code> composable. Take a look at this <code translate="no" dir="ltr">expanded</code> boolean and how it's used in the code: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="GDScript"><code translate="no" dir="ltr">// Don't copy over @Composable fun Greeting(name: String) { var expanded = false // Don't do this! Surface( color = MaterialTheme.colorScheme.primary, modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp) ) { Row(modifier = Modifier.padding(24.dp)) { Column(modifier = Modifier.weight(1f)) { Text(text = "Hello, ") Text(text = name) } ElevatedButton( onClick = { expanded = !expanded } ) { Text(if (expanded) "Show less" else "Show more") } } } } </code></pre></devsite-code> Note that we also added an <code translate="no" dir="ltr">onClick</code> action and a dynamic button text. More on that later. However, this won't work as expected. Setting a different value for the <code translate="no" dir="ltr">expanded</code> variable won't make Compose detect it as a state change so nothing will happen. <aside class="special">Note: Compose apps transform data into UI by calling composable functions. If your data changes, Compose re-executes these functions with the new data, creating an updated UI—this is called recomposition. Compose also looks at what data is needed by an individual composable so that it only needs to recompose components whose data has changed and skip recomposing those that are not affected. As mentioned in <a href="https://developer.android.com/jetpack/compose/mental-model#recomposition" target="_blank">Thinking in Compose</a>: Composable functions can execute frequently and in any order, you must not rely on the ordering in which the code is executed, or on how many times this function will be recomposed. </aside> The reason why mutating this variable does not trigger recompositions is that it's not being tracked by Compose. Also, each time <code translate="no" dir="ltr">Greeting</code> is called, the variable will be reset to false. To add internal state to a composable, you can use the <code translate="no" dir="ltr">mutableStateOf</code> function, which makes Compose recompose functions that read that <code translate="no" dir="ltr">State</code>. <aside class="special">Note: <code translate="no" dir="ltr">State</code> and <code translate="no" dir="ltr">MutableState</code> are interfaces that hold some value and trigger UI updates (recompositions) whenever that value changes. </aside> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import androidx.compose.runtime.mutableStateOf // ... // Don't copy over @Composable fun Greeting() { val expanded = mutableStateOf(false) // Don't do this! } </code></pre></devsite-code> However you can't just assign <code translate="no" dir="ltr">mutableStateOf</code> to a variable inside a composable. As explained before, recomposition can happen at any time which would call the composable again, resetting the state to a new mutable state with a value of <code translate="no" dir="ltr">false</code>. To preserve state across recompositions, remember the mutable state using <code translate="no" dir="ltr">remember</code>. <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember // ... @Composable fun Greeting(...) { val expanded = remember { mutableStateOf(false) } // ... } </code></pre></devsite-code> <code translate="no" dir="ltr">remember</code> is used to guard against recomposition, so the state is not reset. Note that if you call the same composable from different parts of the screen you will create different UI elements, each with its own version of the state. You can think of internal state as a private variable in a class. The composable function will automatically be "subscribed" to the state. If the state changes, composables that read these fields will be recomposed to display the updates. <h2 is-upgraded id="mutating-state-and-reacting-to-state-changes" data-text="Mutating state and reacting to state changes" tabindex="-1">Mutating state and reacting to state changes</h2> In order to change the state, you might have noticed that <code translate="no" dir="ltr">Button</code> has a parameter called <code translate="no" dir="ltr">onClick</code> but it doesn't take a value, it takes a function. <aside class="special">Note: If you're not familiar with functions being used this way, it is a very powerful Kotlin feature that is used extensively in Compose. Functions are <a href="https://kotlinlang.org/docs/lambdas.html" target="_blank">first class citizens in Kotlin</a>, so they can be assigned to a variable, passed into other functions and even be returned from them. You can <a href="https://developer.android.com/jetpack/compose/kotlin#higher-order" target="_blank">read how Compose uses Kotlin features here</a>. To learn more about how functions are defined and how you can instantiate them, read the <a href="https://kotlinlang.org/docs/lambdas.html#function-types" target="_blank">Function Types documentation</a>. </aside> You can define the action to take on click by assigning a <a href="https://kotlinlang.org/docs/lambdas.html#lambda-expression-syntax" target="_blank">lambda expression</a> to it. For example, let's toggle the value of the expanded state, and show a different text depending on the value. <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Text only"><code translate="no" dir="ltr">ElevatedButton( onClick = { expanded.value = !expanded.value }, ) { Text(if (expanded.value) "Show less" else "Show more") } </code></pre></devsite-code> Run the app in interactive mode to see the behavior. <img alt="374998ad358bf8d6.png" style="width: 481.50px" src="/static/codelabs/jetpack-compose-basics/img/374998ad358bf8d6.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/374998ad358bf8d6_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/374998ad358bf8d6_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/374998ad358bf8d6_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/374998ad358bf8d6_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/374998ad358bf8d6_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/374998ad358bf8d6_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/374998ad358bf8d6_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/374998ad358bf8d6_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/374998ad358bf8d6_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/374998ad358bf8d6_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/374998ad358bf8d6_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> When the button is clicked, <code translate="no" dir="ltr">expanded</code> is toggled triggering a recomposition of the text inside the button. Each <code translate="no" dir="ltr">Greeting</code> maintains its own expanded state, because they belong to different UI elements. <img alt="93d839b53b7d9bea.gif" style="width: 400.37px" src="/static/codelabs/jetpack-compose-basics/img/93d839b53b7d9bea.gif"> Code up to this point: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { val expanded = remember { mutableStateOf(false) } Surface( color = MaterialTheme.colorScheme.primary, modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp) ) { Row(modifier = Modifier.padding(24.dp)) { Column(modifier = Modifier.weight(1f)) { Text(text = "Hello ") Text(text = name) } ElevatedButton( onClick = { expanded.value = !expanded.value } ) { Text(if (expanded.value) "Show less" else "Show more") } } } } </code></pre></devsite-code> <h2 is-upgraded id="expanding-the-item" data-text="Expanding the item" tabindex="-1">Expanding the item</h2> Now let's actually expand an item when requested. Add an additional variable that depends on our state: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { val expanded = remember { mutableStateOf(false) } val extraPadding = if (expanded.value) 48.dp else 0.dp // ... </code></pre></devsite-code> You don't need to remember <code translate="no" dir="ltr">extraPadding</code> against recomposition because it's doing a simple calculation. And now we can apply a new padding modifier to the Column: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { val expanded = remember { mutableStateOf(false) } val extraPadding = if (expanded.value) 48.dp else 0.dp Surface( color = MaterialTheme.colorScheme.primary, modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp) ) { Row(modifier = Modifier.padding(24.dp)) { Column( modifier = Modifier .weight(1f) .padding(bottom = extraPadding) ) { Text(text = "Hello ") Text(text = name) } ElevatedButton( onClick = { expanded.value = !expanded.value } ) { Text(if (expanded.value) "Show less" else "Show more") } } } } </code></pre></devsite-code> If you run on an emulator or in the interactive mode, you should see that each item can be expanded independently: <img alt="6675d41779cac69.gif" style="width: 374.54px" src="/static/codelabs/jetpack-compose-basics/img/6675d41779cac69.gif"> </google-codelab-step> <google-codelab-step label="State hoisting" duration="5" step="7"> <h2 class="step-title" id="7" data-text="State hoisting" tabindex="-1"> 8. State hoisting </h2> In Composable functions, state that is read or modified by multiple functions should live in a common ancestor—this process is called state hoisting. To hoist means to lift or elevate. Making state hoistable avoids duplicating state and introducing bugs, helps reuse composables, and makes composables substantially easier to test. Contrarily, state that doesn't need to be controlled by a composable's parent should not be hoisted. The source of truth belongs to whoever creates and controls that state. For example, let's create an onboarding screen for our app. <img alt="5d5f44508fcfa779.png" style="width: 252.60px" src="/static/codelabs/jetpack-compose-basics/img/5d5f44508fcfa779.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/5d5f44508fcfa779_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/5d5f44508fcfa779_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/5d5f44508fcfa779_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/5d5f44508fcfa779_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/5d5f44508fcfa779_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/5d5f44508fcfa779_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/5d5f44508fcfa779_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/5d5f44508fcfa779_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/5d5f44508fcfa779_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/5d5f44508fcfa779_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/5d5f44508fcfa779_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> Add the following code to <code translate="no" dir="ltr">MainActivity.kt</code>: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import androidx.compose.foundation.layout.Arrangement import androidx.compose.material3.Button import androidx.compose.runtime.getValue import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment // ... @Composable fun OnboardingScreen(modifier: Modifier = Modifier) { // TODO: This state should be hoisted var shouldShowOnboarding by remember { mutableStateOf(true) } Column( modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Text("Welcome to the Basics Codelab!") Button( modifier = Modifier.padding(vertical = 24.dp), onClick = { shouldShowOnboarding = false } ) { Text("Continue") } } } @Preview(showBackground = true, widthDp = 320, heightDp = 320) @Composable fun OnboardingPreview() { BasicsCodelabTheme { OnboardingScreen() } } </code></pre></devsite-code> This code contains a bunch of new features: <ul> <li>You have added a new composable called <code translate="no" dir="ltr">OnboardingScreen</code> and also a new preview. If you build the project you'll notice you can have multiple previews at the same time. We also added a fixed height to verify that the content is aligned correctly.</li> <li><code translate="no" dir="ltr">Column</code> can be configured to display its contents in the center of the screen.</li> <li><code translate="no" dir="ltr">shouldShowOnboarding</code> is using a <code translate="no" dir="ltr">by</code> keyword instead of the <code translate="no" dir="ltr">=</code>. This is a property delegate that saves you from typing <code translate="no" dir="ltr">.value</code> every time.</li> <li>When the button is clicked, <code translate="no" dir="ltr">shouldShowOnboarding</code> is set to <code translate="no" dir="ltr">false</code>, however you are not reading the state from anywhere yet.</li> </ul> Now we can add this new onboarding screen to our app. We want to show it on launch and then hide it when the user presses "Continue". In Compose you don't hide UI elements. Instead, you simply don't add them to the composition, so they're not added to the UI tree that Compose generates. You do this with simple conditional Kotlin logic. For example to show the onboarding screen or the list of greetings you would do something like: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Scilab"><code translate="no" dir="ltr">// Don't copy yet @Composable fun MyApp(modifier: Modifier = Modifier) { Surface(modifier) { if (shouldShowOnboarding) { // Where does this come from? OnboardingScreen() } else { Greetings() } } } </code></pre></devsite-code> However we don't have access to <code translate="no" dir="ltr">shouldShowOnboarding</code> . It's clear that we need to share the state that we created in <code translate="no" dir="ltr">OnboardingScreen</code> with the <code translate="no" dir="ltr">MyApp</code> composable. Instead of somehow sharing the value of the state with its parent, we hoist the state–we simply move it to the common ancestor that needs to access it. First, move the content of <code translate="no" dir="ltr">MyApp</code> into a new composable called <code translate="no" dir="ltr">Greetings</code>. Also adapt the preview to call the <code translate="no" dir="ltr">Greetings</code> method instead: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@Composable fun MyApp(modifier: Modifier = Modifier) { Greetings() } @Composable private fun Greetings( modifier: Modifier = Modifier, names: List<String> = listOf("World", "Compose") ) { Column(modifier = modifier.padding(vertical = 4.dp)) { for (name in names) { Greeting(name = name) } } } @Preview(showBackground = true, widthDp = 320) @Composable fun GreetingsPreview() { BasicsCodelabTheme { Greetings() } } </code></pre></devsite-code> Add a preview for our new top level MyApp composable so we can test its behavior: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@Preview @Composable fun MyAppPreview() { BasicsCodelabTheme { MyApp(Modifier.fillMaxSize()) } } </code></pre></devsite-code> Now add the logic to show the different screens in <code translate="no" dir="ltr">MyApp</code>, and hoist the state. <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="GDScript"><code translate="no" dir="ltr">@Composable fun MyApp(modifier: Modifier = Modifier) { var shouldShowOnboarding by remember { mutableStateOf(true) } Surface(modifier) { if (shouldShowOnboarding) { OnboardingScreen(/* TODO */) } else { Greetings() } } } </code></pre></devsite-code> We also need to share <code translate="no" dir="ltr">shouldShowOnboarding</code> with the onboarding screen but we are not going to pass it directly. Instead of letting <code translate="no" dir="ltr">OnboardingScreen</code> mutate our state, it would be better to let it notify us when the user clicked on the Continue button. How do we pass events up? By passing callbacks down. Callbacks are functions that are passed as arguments to other functions and get executed when the event occurs. Try to add a function parameter to the onboarding screen defined as <code translate="no" dir="ltr">onContinueClicked: () -> Unit</code> so you can mutate the state from <code translate="no" dir="ltr">MyApp</code>. Solution: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="GDScript"><code translate="no" dir="ltr">@Composable fun MyApp(modifier: Modifier = Modifier) { var shouldShowOnboarding by remember { mutableStateOf(true) } Surface(modifier) { if (shouldShowOnboarding) { OnboardingScreen(onContinueClicked = { shouldShowOnboarding = false }) } else { Greetings() } } } @Composable fun OnboardingScreen( onContinueClicked: () -> Unit, modifier: Modifier = Modifier ) { Column( modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Text("Welcome to the Basics Codelab!") Button( modifier = Modifier .padding(vertical = 24.dp), onClick = onContinueClicked ) { Text("Continue") } } } </code></pre></devsite-code> By passing a function and not a state to <code translate="no" dir="ltr">OnboardingScreen</code> we are making this composable more reusable and protecting the state from being mutated by other composables. In general, it keeps things simple. A good example is how the onboarding preview needs to be modified to call the <code translate="no" dir="ltr">OnboardingScreen</code> now: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Transact-SQL"><code translate="no" dir="ltr">@Preview(showBackground = true, widthDp = 320, heightDp = 320) @Composable fun OnboardingPreview() { BasicsCodelabTheme { OnboardingScreen(onContinueClicked = {}) // Do nothing on click. } } </code></pre></devsite-code> Assigning <code translate="no" dir="ltr">onContinueClicked</code> to an empty lambda expression means "do nothing", which is perfect for a preview. This is looking more and more like a real app, good job! <img alt="25915eb273a7ef49.gif" style="width: 217.81px" src="/static/codelabs/jetpack-compose-basics/img/25915eb273a7ef49.gif"> In <code translate="no" dir="ltr">MyApp</code> composable we used the <code translate="no" dir="ltr">by</code> property delegate for the first time to avoid using value every time. Let's use <code translate="no" dir="ltr">by</code> instead of <code translate="no" dir="ltr">=</code> also in the Greeting composable for the <code translate="no" dir="ltr">expanded</code> property. Make sure you change <code translate="no" dir="ltr">expanded</code> from <code translate="no" dir="ltr">val</code> to <code translate="no" dir="ltr">var</code>. Full code so far: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">package com.example.basicscodelab import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.material3.Button import androidx.compose.material3.ElevatedButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.codelab.basics.ui.theme.BasicsCodelabTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { BasicsCodelabTheme { MyApp(modifier = Modifier.fillMaxSize()) } } } } @Composable fun MyApp(modifier: Modifier = Modifier) { var shouldShowOnboarding by remember { mutableStateOf(true) } Surface(modifier) { if (shouldShowOnboarding) { OnboardingScreen(onContinueClicked = { shouldShowOnboarding = false }) } else { Greetings() } } } @Composable fun OnboardingScreen( onContinueClicked: () -> Unit, modifier: Modifier = Modifier ) { Column( modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Text("Welcome to the Basics Codelab!") Button( modifier = Modifier.padding(vertical = 24.dp), onClick = onContinueClicked ) { Text("Continue") } } } @Composable private fun Greetings( modifier: Modifier = Modifier, names: List<String> = listOf("World", "Compose") ) { Column(modifier = modifier.padding(vertical = 4.dp)) { for (name in names) { Greeting(name = name) } } } @Preview(showBackground = true, widthDp = 320, heightDp = 320) @Composable fun OnboardingPreview() { BasicsCodelabTheme { OnboardingScreen(onContinueClicked = {}) } } @Composable fun Greeting(name: String, modifier: Modifier = Modifier) { var expanded by remember { mutableStateOf(false) } val extraPadding = if (expanded) 48.dp else 0.dp Surface( color = MaterialTheme.colorScheme.primary, modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp) ) { Row(modifier = Modifier.padding(24.dp)) { Column( modifier = Modifier .weight(1f) .padding(bottom = extraPadding) ) { Text(text = "Hello, ") Text(text = name) } ElevatedButton( onClick = { expanded = !expanded } ) { Text(if (expanded) "Show less" else "Show more") } } } } @Preview(showBackground = true, widthDp = 320) @Composable fun GreetingPreview() { BasicsCodelabTheme { Greetings() } } @Preview @Composable fun MyAppPreview() { BasicsCodelabTheme { MyApp(Modifier.fillMaxSize()) } } </code></pre></devsite-code> </google-codelab-step> <google-codelab-step label="Creating a performant lazy list" duration="5" step="8"> <h2 class="step-title" id="8" data-text="Creating a performant lazy list" tabindex="-1"> 9. Creating a performant lazy list </h2> Now let's make the names list more realistic. So far you have displayed two greetings in a <code translate="no" dir="ltr">Column</code>. But, can it handle thousands of them? Change the default list value in the <code translate="no" dir="ltr">Greetings</code> parameters to use another list constructor which allows to set the list size and fill it with the value contained in its lambda (here <code translate="no" dir="ltr">$it</code> represents the list index): <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="ActionScript 3"><code translate="no" dir="ltr">names: List<String> = List(1000) { "$it" } </code></pre></devsite-code> This creates 1000 greetings, even the ones that don't fit in the screen. Obviously this is not performant. You can try to run it on an emulator (warning: this code might freeze your emulator). To display a scrollable column we use a <code translate="no" dir="ltr">LazyColumn</code>. <code translate="no" dir="ltr">LazyColumn</code> renders only the visible items on screen, allowing performance gains when rendering a big list. <aside class="special">Note: <code translate="no" dir="ltr">LazyColumn</code> and <code translate="no" dir="ltr">LazyRow</code> are equivalent to <code translate="no" dir="ltr">RecyclerView</code> in Android Views. </aside> In its basic usage, the <code translate="no" dir="ltr">LazyColumn</code> API provides an <code translate="no" dir="ltr">items</code> element within its scope, where individual item rendering logic is written: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items // ... @Composable private fun Greetings( modifier: Modifier = Modifier, names: List<String> = List(1000) { "$it" } ) { LazyColumn(modifier = modifier.padding(vertical = 4.dp)) { items(items = names) { name -> Greeting(name = name) } } } </code></pre></devsite-code> <aside class="warning">Note: Make sure you import <code translate="no" dir="ltr">androidx.compose.foundation.lazy.items</code> as Android Studio will pick a different items function by default. </aside> <aside class="special">Note: <code translate="no" dir="ltr">LazyColumn</code> doesn't recycle its children like <code translate="no" dir="ltr">RecyclerView</code>. It emits new Composables as you scroll through it and is still performant, as emitting Composables is relatively cheap compared to instantiating Android <code translate="no" dir="ltr">Views</code>. </aside> <img alt="284f925eb984fb56.gif" style="width: 187.70px" src="/static/codelabs/jetpack-compose-basics/img/284f925eb984fb56.gif"> </google-codelab-step> <google-codelab-step label="Persisting state" duration="3" step="9"> <h2 class="step-title" id="9" data-text="Persisting state" tabindex="-1"> 10. Persisting state </h2> Our app has two problems: <h3 is-upgraded id="persisting-the-onboarding-screen-state" data-text="Persisting the onboarding screen state" tabindex="-1">Persisting the onboarding screen state</h3> If you run the app on a device, click on the buttons and then you rotate, the onboarding screen is shown again. The <code translate="no" dir="ltr">remember</code> function works only as long as the composable is kept in the Composition. When you rotate, the whole activity is restarted so all state is lost. This also happens with any configuration change and on process death. Instead of using <code translate="no" dir="ltr">remember</code> you can use <code translate="no" dir="ltr">rememberSaveable</code>. This will save each state surviving configuration changes (such as rotations) and process death. Now replace the use of <code translate="no" dir="ltr">remember</code> in <code translate="no" dir="ltr">shouldShowOnboarding</code> with <code translate="no" dir="ltr">rememberSaveable</code>: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr"> import androidx.compose.runtime.saveable.rememberSaveable // ... var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) } </code></pre></devsite-code> Run, rotate, change to dark mode or kill the process. The onboarding screen is not shown unless you have previously exited the app. <h3 is-upgraded id="persisting-the-expanded-state-of-the-list-items" data-text="Persisting the expanded state of the list items" tabindex="-1">Persisting the expanded state of the list items</h3> If you expand a list item and then either scroll the list until the item is out of view, or rotate the device and then go back to the expanded item, you'll see that the item is now back to its initial state. The solution for this is to use rememberSaveable for the expanded state as well: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="GDScript"><code translate="no" dir="ltr"> var expanded by rememberSaveable { mutableStateOf(false) } </code></pre></devsite-code> With around 120 lines of code so far, you were able to display a long and performant scrolling list of items each holding their own state. Also, as you can see, your app has a perfectly correct dark mode without extra lines of code. You'll learn about theming later. </google-codelab-step> <google-codelab-step label="Animating your list" duration="5" step="10"> <h2 class="step-title" id="10" data-text="Animating your list" tabindex="-1"> 11. Animating your list </h2> In Compose, there are multiple ways to animate your UI: from high-level APIs for simple animations to low-level methods for full control and complex transitions. You can read about them in the <a href="https://developer.android.com/jetpack/compose/animation" target="_blank">documentation</a>. In this section you will use one of the low-level APIs but don't worry, they can also be very simple. Let's animate the change in size that we already implemented: <img alt="9efa14ce118d3835.gif" style="width: 263.68px" src="/static/codelabs/jetpack-compose-basics/img/9efa14ce118d3835.gif"> For this you'll use the <code translate="no" dir="ltr">animateDpAsState</code> composable. It returns a State object whose <code translate="no" dir="ltr">value</code> will continuously be updated by the animation until it finishes. It takes a "target value" whose type is <code translate="no" dir="ltr">Dp</code>. Create an animated <code translate="no" dir="ltr">extraPadding</code> that depends on the expanded state. <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import androidx.compose.animation.core.animateDpAsState @Composable private fun Greeting(name: String, modifier: Modifier = Modifier) { var expanded by rememberSaveable { mutableStateOf(false) } val extraPadding by animateDpAsState( if (expanded) 48.dp else 0.dp ) Surface( color = MaterialTheme.colorScheme.primary, modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp) ) { Row(modifier = Modifier.padding(24.dp)) { Column(modifier = Modifier .weight(1f) .padding(bottom = extraPadding) ) { Text(text = "Hello, ") Text(text = name) } ElevatedButton( onClick = { expanded = !expanded } ) { Text(if (expanded) "Show less" else "Show more") } } } } </code></pre></devsite-code> Run the app and try the animation out. <aside class="warning">Note: If you expand item number 1, you scroll away to number 20 and come back to 1, you'll notice that 1 is back to the original size. You could save this data with <code translate="no" dir="ltr">rememberSaveable</code> if it were a requirement, but we are keeping the example simple. </aside> <code translate="no" dir="ltr">animateDpAsState</code> takes an optional <code translate="no" dir="ltr">animationSpec</code> parameter that lets you customize the animation. Let's do something more fun like adding a spring-based animation: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import androidx.compose.animation.core.Spring import androidx.compose.animation.core.spring @Composable private fun Greeting(name: String, modifier: Modifier = Modifier) { var expanded by rememberSaveable { mutableStateOf(false) } val extraPadding by animateDpAsState( if (expanded) 48.dp else 0.dp, animationSpec = spring( dampingRatio = Spring.DampingRatioMediumBouncy, stiffness = Spring.StiffnessLow ) ) Surface( // ... Column(modifier = Modifier .weight(1f) .padding(bottom = extraPadding.coerceAtLeast(0.dp)) // ... ) } </code></pre></devsite-code> Note that we are also making sure that padding is never negative, otherwise it could crash the app. This introduces a subtle animation bug that we'll fix later in Finishing touches. The <code translate="no" dir="ltr">spring</code> spec does not take any time-related parameters. Instead it relies on physical properties (damping and stiffness) to make animations more natural. Run the app now to try the new animation: <img alt="9efa14ce118d3835.gif" style="width: 263.68px" src="/static/codelabs/jetpack-compose-basics/img/9efa14ce118d3835.gif"> Any animation created with <code translate="no" dir="ltr">animate*AsState</code> is interruptible. This means that if the target value changes in the middle of the animation, <code translate="no" dir="ltr">animate*AsState</code> restarts the animation and points to the new value. Interruptions look especially natural with spring-based animations: <img alt="d5dbf92de69db775.gif" style="width: 285.39px" src="/static/codelabs/jetpack-compose-basics/img/d5dbf92de69db775.gif"> If you want to explore the different types of animations, try out different parameters for <code translate="no" dir="ltr">spring</code>, different specs (<code translate="no" dir="ltr">tween</code>, <code translate="no" dir="ltr">repeatable</code>) and different functions: <code translate="no" dir="ltr">animateColorAsState</code> or a <a href="https://developer.android.com/jetpack/compose/animation" target="_blank">different type of animation API</a>. <h2 is-upgraded id="full-code-for-this-section" data-text="Full code for this section" tabindex="-1">Full code for this section</h2> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">package com.example.basicscodelab import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.animation.core.Spring import androidx.compose.animation.core.animateDpAsState import androidx.compose.animation.core.spring import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.material3.Button import androidx.compose.material3.ElevatedButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.codelab.basics.ui.theme.BasicsCodelabTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { BasicsCodelabTheme { MyApp(modifier = Modifier.fillMaxSize()) } } } } @Composable fun MyApp(modifier: Modifier = Modifier) { var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) } Surface(modifier) { if (shouldShowOnboarding) { OnboardingScreen(onContinueClicked = { shouldShowOnboarding = false }) } else { Greetings() } } } @Composable fun OnboardingScreen( onContinueClicked: () -> Unit, modifier: Modifier = Modifier ) { Column( modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Text("Welcome to the Basics Codelab!") Button( modifier = Modifier.padding(vertical = 24.dp), onClick = onContinueClicked ) { Text("Continue") } } } @Composable private fun Greetings( modifier: Modifier = Modifier, names: List<String> = List(1000) { "$it" } ) { LazyColumn(modifier = modifier.padding(vertical = 4.dp)) { items(items = names) { name -> Greeting(name = name) } } } @Preview(showBackground = true, widthDp = 320, heightDp = 320) @Composable fun OnboardingPreview() { BasicsCodelabTheme { OnboardingScreen(onContinueClicked = {}) } } @Composable private fun Greeting(name: String, modifier: Modifier = Modifier) { var expanded by rememberSaveable { mutableStateOf(false) } val extraPadding by animateDpAsState( if (expanded) 48.dp else 0.dp, animationSpec = spring( dampingRatio = Spring.DampingRatioMediumBouncy, stiffness = Spring.StiffnessLow ) ) Surface( color = MaterialTheme.colorScheme.primary, modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp) ) { Row(modifier = Modifier.padding(24.dp)) { Column(modifier = Modifier .weight(1f) .padding(bottom = extraPadding.coerceAtLeast(0.dp)) ) { Text(text = "Hello, ") Text(text = name) } ElevatedButton( onClick = { expanded = !expanded } ) { Text(if (expanded) "Show less" else "Show more") } } } } @Preview(showBackground = true, widthDp = 320) @Composable fun GreetingPreview() { BasicsCodelabTheme { Greetings() } } @Preview @Composable fun MyAppPreview() { BasicsCodelabTheme { MyApp(Modifier.fillMaxSize()) } } </code></pre></devsite-code> </google-codelab-step> <google-codelab-step label="Styling and theming your app" duration="8" step="11"> <h2 class="step-title" id="11" data-text="Styling and theming your app" tabindex="-1"> 12. Styling and theming your app </h2> You didn't style any of the composables so far and yet you got a decent default, including dark mode support! Let's look into what <code translate="no" dir="ltr">BasicsCodelabTheme</code> and <code translate="no" dir="ltr">MaterialTheme</code> are. If you open the <code translate="no" dir="ltr">ui/theme/Theme.kt</code> file, you see that <code translate="no" dir="ltr">BasicsCodelabTheme</code> uses <code translate="no" dir="ltr">MaterialTheme</code> in its implementation: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Scilab"><code translate="no" dir="ltr">// Do not copy @Composable fun BasicsCodelabTheme( darkTheme: Boolean = isSystemInDarkTheme(), // Dynamic color is available on Android 12+ dynamicColor: Boolean = true, content: @Composable () -> Unit ) { // ... MaterialTheme( colorScheme = colorScheme, typography = Typography, content = content ) } </code></pre></devsite-code> <code translate="no" dir="ltr">MaterialTheme</code> is a composable function that reflects the styling principles from the <a href="https://m3.material.io/" target="_blank">Material design specification</a>. That styling information cascades down to the components that are inside its <code translate="no" dir="ltr">content</code>, which may read the information to style themselves. In your UI, you are already using <code translate="no" dir="ltr">BasicsCodelabTheme</code> as follows: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Text only"><code translate="no" dir="ltr"> BasicsCodelabTheme { MyApp(modifier = Modifier.fillMaxSize()) } </code></pre></devsite-code> Because <code translate="no" dir="ltr">BasicsCodelabTheme</code> wraps <code translate="no" dir="ltr">MaterialTheme</code> internally, <code translate="no" dir="ltr">MyApp</code> is styled with the properties defined in the theme. From any descendant composable you can retrieve three properties of <code translate="no" dir="ltr">MaterialTheme</code>: <code translate="no" dir="ltr">colorScheme</code>, <code translate="no" dir="ltr">typography</code> and <code translate="no" dir="ltr">shapes</code>. Use them to set a header style for one of your <code translate="no" dir="ltr">Text</code>s: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Text only"><code translate="no" dir="ltr"> Column(modifier = Modifier .weight(1f) .padding(bottom = extraPadding.coerceAtLeast(0.dp)) ) { Text(text = "Hello, ") Text(text = name, style = MaterialTheme.typography.headlineMedium) } </code></pre></devsite-code> The <code translate="no" dir="ltr">Text</code> composable in the example above sets a new <code translate="no" dir="ltr">TextStyle</code>. You can create your own <code translate="no" dir="ltr">TextStyle</code>, or you can retrieve a theme-defined style by using <code translate="no" dir="ltr">MaterialTheme.typography</code>, which is preferred. This construct gives you access to the Material-defined text styles, such as <code translate="no" dir="ltr">displayLarge, headlineMedium, titleSmall, bodyLarge, labelMedium</code> etc. In your example, you use the <code translate="no" dir="ltr">headlineMedium</code> style defined in the theme. Now build to see our newly styled text: <img alt="673955c38b076f1c.png" style="width: 275.16px" src="/static/codelabs/jetpack-compose-basics/img/673955c38b076f1c.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/673955c38b076f1c_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/673955c38b076f1c_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/673955c38b076f1c_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/673955c38b076f1c_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/673955c38b076f1c_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/673955c38b076f1c_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/673955c38b076f1c_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/673955c38b076f1c_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/673955c38b076f1c_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/673955c38b076f1c_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/673955c38b076f1c_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> In general it's much better to keep your colors, shapes and font styles inside a <code translate="no" dir="ltr">MaterialTheme</code>. For example, dark mode would be hard to implement if you hard-code colors and it would require a lot of error-prone work to fix. However sometimes you need to deviate slightly from the selection of colors and font styles. In those situations it's better to base your color or style on an existing one. For this, you can modify a predefined style by using the <code translate="no" dir="ltr">copy</code> function. Make the number extra bold: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import androidx.compose.ui.text.font.FontWeight // ... Text( text = name, style = MaterialTheme.typography.headlineMedium.copy( fontWeight = FontWeight.ExtraBold ) ) </code></pre></devsite-code> This way if you need to change the font family or any other attribute of <code translate="no" dir="ltr">headlineMedium</code>, you don't have to worry about the small deviations. Now this should be the result in the preview window: <img alt="b33493882bda9419.png" style="width: 298.40px" src="/static/codelabs/jetpack-compose-basics/img/b33493882bda9419.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/b33493882bda9419_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/b33493882bda9419_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/b33493882bda9419_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/b33493882bda9419_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/b33493882bda9419_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/b33493882bda9419_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/b33493882bda9419_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/b33493882bda9419_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/b33493882bda9419_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/b33493882bda9419_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/b33493882bda9419_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <h2 is-upgraded id="set-up-a-dark-mode-preview" data-text="Set up a dark mode preview" tabindex="-1">Set up a dark mode preview</h2> Currently, our preview shows only what the app will look like in light mode. Add an additional <code translate="no" dir="ltr">@Preview</code> annotation to <code translate="no" dir="ltr">GreetingPreview</code> with <code translate="no" dir="ltr">UI_MODE_NIGHT_YES</code>: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import android.content.res.Configuration.UI_MODE_NIGHT_YES @Preview( showBackground = true, widthDp = 320, uiMode = UI_MODE_NIGHT_YES, name = "GreetingPreviewDark" ) @Preview(showBackground = true, widthDp = 320) @Composable fun GreetingPreview() { BasicsCodelabTheme { Greetings() } } </code></pre></devsite-code> This adds a preview in dark mode. <img alt="2c94dc7775d80166.png" style="width: 520.50px" src="/static/codelabs/jetpack-compose-basics/img/2c94dc7775d80166.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/2c94dc7775d80166_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/2c94dc7775d80166_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/2c94dc7775d80166_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/2c94dc7775d80166_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/2c94dc7775d80166_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/2c94dc7775d80166_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/2c94dc7775d80166_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/2c94dc7775d80166_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/2c94dc7775d80166_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/2c94dc7775d80166_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/2c94dc7775d80166_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> <h2 is-upgraded id="tweak-your-apps-theme" data-text="Tweak your app's theme" tabindex="-1">Tweak your app's theme</h2> You can find everything related to the current theme in the files inside the <code translate="no" dir="ltr">ui/theme</code> folder. For example, the default colors that we have been using so far are defined in <code translate="no" dir="ltr">Color.kt</code>. Let's start by defining new colors. Add these to <code translate="no" dir="ltr">Color.kt</code>: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Text only"><code translate="no" dir="ltr">val Navy = Color(0xFF073042) val Blue = Color(0xFF4285F4) val LightBlue = Color(0xFFD7EFFE) val Chartreuse = Color(0xFFEFF7CF) </code></pre></devsite-code> Now assign them to the <code translate="no" dir="ltr">MaterialTheme</code>'s palette in <code translate="no" dir="ltr">Theme.kt</code>: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Text only"><code translate="no" dir="ltr">private val LightColorScheme = lightColorScheme( surface = Blue, onSurface = Color.White, primary = LightBlue, onPrimary = Navy ) </code></pre></devsite-code> If you go back to <code translate="no" dir="ltr">MainActivity.kt</code> and refresh the preview, the preview colors don't actually change! That's because by default, your Preview will use <a href="https://m3.material.io/styles/color/dynamic-color/overview" target="_blank">dynamic colors</a>. You can see the logic for adding dynamic coloring in <code translate="no" dir="ltr">Theme.kt</code>, using the <code translate="no" dir="ltr">dynamicColor</code> boolean parameter. To see the non-adaptive version of your color scheme, run your app on a device with API level lower than 31 (corresponding to Android S, where adaptive colors were introduced). You'll see the new colors: <img alt="493d754584574e91.png" style="width: 287.00px" src="/static/codelabs/jetpack-compose-basics/img/493d754584574e91.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/493d754584574e91_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/493d754584574e91_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/493d754584574e91_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/493d754584574e91_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/493d754584574e91_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/493d754584574e91_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/493d754584574e91_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/493d754584574e91_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/493d754584574e91_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/493d754584574e91_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/493d754584574e91_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> In <code translate="no" dir="ltr">Theme.kt</code>, define the palette for dark colors: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Text only"><code translate="no" dir="ltr">private val DarkColorScheme = darkColorScheme( surface = Blue, onSurface = Navy, primary = Navy, onPrimary = Chartreuse ) </code></pre></devsite-code> When we now run the app, we will see the dark colors in action: <img alt="84d2a903ffa6d8df.png" style="width: 286.85px" src="/static/codelabs/jetpack-compose-basics/img/84d2a903ffa6d8df.png" srcset="https://developer.android.com/static/codelabs/jetpack-compose-basics/img/84d2a903ffa6d8df_36.png 36w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/84d2a903ffa6d8df_48.png 48w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/84d2a903ffa6d8df_72.png 72w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/84d2a903ffa6d8df_96.png 96w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/84d2a903ffa6d8df_480.png 480w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/84d2a903ffa6d8df_720.png 720w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/84d2a903ffa6d8df_856.png 856w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/84d2a903ffa6d8df_960.png 960w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/84d2a903ffa6d8df_1440.png 1440w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/84d2a903ffa6d8df_1920.png 1920w,https://developer.android.com/static/codelabs/jetpack-compose-basics/img/84d2a903ffa6d8df_2880.png 2880w" sizes="(max-width: 840px) 100vw, 856px"> Final code for <code translate="no" dir="ltr">Theme.kt</code> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">import android.app.Activity import android.os.Build import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.material3.MaterialTheme import androidx.compose.material3.darkColorScheme import androidx.compose.material3.dynamicDarkColorScheme import androidx.compose.material3.dynamicLightColorScheme import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable import androidx.compose.runtime.SideEffect import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.toArgb import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalView import androidx.core.view.ViewCompat private val DarkColorScheme = darkColorScheme( surface = Blue, onSurface = Navy, primary = Navy, onPrimary = Chartreuse ) private val LightColorScheme = lightColorScheme( surface = Blue, onSurface = Color.White, primary = LightBlue, onPrimary = Navy ) @Composable fun BasicsCodelabTheme( darkTheme: Boolean = isSystemInDarkTheme(), // Dynamic color is available on Android 12+ dynamicColor: Boolean = true, content: @Composable () -> Unit ) { val colorScheme = when { dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> { val context = LocalContext.current if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context) } darkTheme -> DarkColorScheme else -> LightColorScheme } val view = LocalView.current if (!view.isInEditMode) { SideEffect { (view.context as Activity).window.statusBarColor = colorScheme.primary.toArgb() ViewCompat.getWindowInsetsController(view)?.isAppearanceLightStatusBars = darkTheme } } MaterialTheme( colorScheme = colorScheme, typography = Typography, content = content ) } </code></pre></devsite-code> </google-codelab-step> <google-codelab-step label="Finishing touches!" duration="10" step="12"> <h2 class="step-title" id="12" data-text="Finishing touches!" tabindex="-1"> 13. Finishing touches! </h2> In this step, you'll apply what you already know and learn new concepts with only a few hints. You will create this: <img alt="8d24a786bfe1a8f2.gif" style="width: 302.60px" src="/static/codelabs/jetpack-compose-basics/img/8d24a786bfe1a8f2.gif"> <h2 is-upgraded id="replace-button-with-an-icon" data-text="Replace button with an icon" tabindex="-1">Replace button with an icon</h2> <ul> <li>Use the <code translate="no" dir="ltr">IconButton</code> composable together with a child <code translate="no" dir="ltr">Icon</code>.</li> <li>Use <code translate="no" dir="ltr">Icons.Filled.ExpandLess</code> and <code translate="no" dir="ltr">Icons.Filled.ExpandMore</code>, which are available in the <code translate="no" dir="ltr">material-icons-extended</code> artifact. Add the following line to dependencies in your <code translate="no" dir="ltr">app/build.gradle.kts</code> file.</li> </ul> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Carbon"><code translate="no" dir="ltr">implementation("androidx.compose.material:material-icons-extended") </code></pre></devsite-code> <ul> <li>Modify paddings to fix alignment.</li> <li>Add a content description for accessibility (see "Use string resources" below).</li> </ul> <h2 is-upgraded id="use-string-resources" data-text="Use string resources" tabindex="-1">Use string resources</h2> Content description for "Show more" and "show less" should be present and you can add them with a simple <code translate="no" dir="ltr">if</code> statement: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Text only"><code translate="no" dir="ltr">contentDescription = if (expanded) "Show less" else "Show more" </code></pre></devsite-code> However, hard-coding strings is a bad practice and you should get them from the <code translate="no" dir="ltr">strings.xml</code> file. You can use "Extract string resource" on each string, available in "Context Actions" in Android Studio to do this automatically. Alternatively, open <code translate="no" dir="ltr">app/src/res/values/strings.xml</code> and add the following resources: <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="scdoc"><code translate="no" dir="ltr"><string name="show_less">Show less</string> <string name="show_more">Show more</string> </code></pre></devsite-code> <h2 is-upgraded id="showing-more" data-text="Showing more" tabindex="-1">Showing more</h2> The "Composem ipsum" text appears and disappears, triggering a change in size of each card. <ul> <li>Add a new <code translate="no" dir="ltr">Text</code> to the Column inside <code translate="no" dir="ltr">Greeting</code> that is displayed when the item is expanded.</li> <li>Remove the <code translate="no" dir="ltr">extraPadding</code> and instead apply the <code translate="no" dir="ltr">animateContentSize</code> modifier to the <code translate="no" dir="ltr">Row</code>. This is going to automate the process of creating the animation, which would be hard to do manually. Also, it removes the need to <code translate="no" dir="ltr">coerceAtLeast</code>.</li> </ul> <h2 is-upgraded id="add-elevation-and-shapes" data-text="Add elevation and shapes" tabindex="-1">Add elevation and shapes</h2> <ul> <li>You could use the <code translate="no" dir="ltr">shadow</code> modifier together with <code translate="no" dir="ltr">clip</code> modifier to achieve the card look. However, there's a Material composable that does exactly that: <a href="https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#card" target="_blank"><code translate="no" dir="ltr">Card</code></a>. You can change the <code translate="no" dir="ltr">Card</code>'s colors by calling <code translate="no" dir="ltr">CardDefaults.cardColors</code> and overriding the color you want to change.</li> </ul> <h2 is-upgraded id="final-code" data-text="Final code" tabindex="-1">Final code</h2> <div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="Python"><code translate="no" dir="ltr">package com.example.basicscodelab import android.content.res.Configuration.UI_MODE_NIGHT_YES import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.animation.animateContentSize import androidx.compose.animation.core.Spring import androidx.compose.animation.core.spring import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.items import androidx.compose.material.icons.Icons.Filled import androidx.compose.material.icons.filled.ExpandLess import androidx.compose.material.icons.filled.ExpandMore import androidx.compose.material3.Button import androidx.compose.material3.Card import androidx.compose.material3.CardDefaults import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.basicscodelab.ui.theme.BasicsCodelabTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { BasicsCodelabTheme { MyApp(modifier = Modifier.fillMaxSize()) } } } } @Composable fun MyApp(modifier: Modifier = Modifier) { var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) } Surface(modifier, color = MaterialTheme.colorScheme.background) { if (shouldShowOnboarding) { OnboardingScreen(onContinueClicked = { shouldShowOnboarding = false }) } else { Greetings() } } } @Composable fun OnboardingScreen( onContinueClicked: () -> Unit, modifier: Modifier = Modifier ) { Column( modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Text("Welcome to the Basics Codelab!") Button( modifier = Modifier.padding(vertical = 24.dp), onClick = onContinueClicked ) { Text("Continue") } } } @Composable private fun Greetings( modifier: Modifier = Modifier, names: List<String> = List(1000) { "$it" } ) { LazyColumn(modifier = modifier.padding(vertical = 4.dp)) { items(items = names) { name -> Greeting(name = name) } } } @Composable private fun Greeting(name: String, modifier: Modifier = Modifier) { Card( colors = CardDefaults.cardColors( containerColor = MaterialTheme.colorScheme.primary ), modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp) ) { CardContent(name) } } @Composable private fun CardContent(name: String) { var expanded by rememberSaveable { mutableStateOf(false) } Row( modifier = Modifier .padding(12.dp) .animateContentSize( animationSpec = spring( dampingRatio = Spring.DampingRatioMediumBouncy, stiffness = Spring.StiffnessLow ) ) ) { Column( modifier = Modifier .weight(1f) .padding(12.dp) ) { Text(text = "Hello, ") Text( text = name, style = MaterialTheme.typography.headlineMedium.copy( fontWeight = FontWeight.ExtraBold ) ) if (expanded) { Text( text = ("Composem ipsum color sit lazy, " + "padding theme elit, sed do bouncy. ").repeat(4), ) } } IconButton(onClick = { expanded = !expanded }) { Icon( imageVector = if (expanded) Filled.ExpandLess else Filled.ExpandMore, contentDescription = if (expanded) { stringResource(R.string.show_less) } else { stringResource(R.string.show_more) } ) } } } @Preview( showBackground = true, widthDp = 320, uiMode = UI_MODE_NIGHT_YES, name = "GreetingPreviewDark" ) @Preview(showBackground = true, widthDp = 320) @Composable fun GreetingPreview() { BasicsCodelabTheme { Greetings() } } @Preview(showBackground = true, widthDp = 320, heightDp = 320) @Composable fun OnboardingPreview() { BasicsCodelabTheme { OnboardingScreen(onContinueClicked = {}) } } @Preview @Composable fun MyAppPreview() { BasicsCodelabTheme { MyApp(Modifier.fillMaxSize()) } } </code></pre></devsite-code> </google-codelab-step> <google-codelab-step label="Congratulations" duration="1" step="13"> <h2 class="step-title" id="13" data-text="Congratulations" tabindex="-1"> 14. Congratulations </h2> Congratulations! You learned the basics of Compose! <h2 is-upgraded id="solution-to-the-codelab_1" data-text="Solution to the codelab" tabindex="-1">Solution to the codelab</h2> You can get the code for the solution of this codelab from GitHub: <div></div><devsite-code><pre translate="no" dir="ltr" is-upgraded>$ git clone https://github.com/android/codelab-android-compose </pre></devsite-code> Alternatively you can download the repository as a Zip file: <a href="https://github.com/android/codelab-android-compose/archive/main.zip" target="_blank"><button class="button button-primary button-with-icon">file_downloadDownload Zip</button></a> <h2 is-upgraded id="whats-next" data-text="What's next?" tabindex="-1">What's next?</h2> Check out the other codelabs on the <a href="https://developer.android.com/courses/pathways/compose" target="_blank">Compose pathway</a>: <ul> <li><a href="https://codelabs.developers.google.com/codelabs/jetpack-compose-layouts/#0" target="_blank">Compose Layouts</a></li> <li><a href="https://codelabs.developers.google.com/codelabs/jetpack-compose-state" target="_blank">State in Compose</a></li> <li><a href="https://codelabs.developers.google.com/codelabs/jetpack-compose-theming" target="_blank">Compose Theming</a></li> <li><a href="https://codelabs.developers.google.com/codelabs/jetpack-compose-migration" target="_blank">Compose for Existing Apps</a></li> </ul> <h2 is-upgraded id="further-reading" data-text="Further reading" tabindex="-1">Further reading</h2> <ul> <li><a href="https://www.youtube.com/watch?v=k3jvNqj4m08" target="_blank">Jetpack Compose basics code-along</a></li> <li><a href="https://developer.android.com/jetpack/compose/mental-model" target="_blank">Compose mental model</a> guide</li> <li><a href="https://github.com/android/compose-samples/" target="_blank">Sample apps</a> to see Compose in action!</li> </ul> </google-codelab-step> </google-codelab> </div> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates. </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> <nav class="devsite-footer-promos nocontent" aria-label="Promotions"> <ul class="devsite-footer-promos-list"> <li class="devsite-footer-promo"> <a href="//x.com/AndroidDev" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer X Promo" > <picture> <source class="devsite-dark-theme" srcset="https://developer.android.com/_static/android/images/logo-x_dt.svg" media="(prefers-color-scheme: dark)" loading="lazy" alt="X"> <img class="devsite-footer-promo-icon" src="/_static/android/images/logo-x.svg" loading="lazy" alt="X"> </picture> X </a> <div class="devsite-footer-promo-description">Follow @AndroidDev on X</div> </li> <li class="devsite-footer-promo"> <a href="//www.youtube.com/user/androiddevelopers" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer YouTube Promo" > <picture> <source class="devsite-dark-theme" srcset="https://developer.android.com/_static/android/images/logo-youtube_dt.svg" media="(prefers-color-scheme: dark)" loading="lazy" alt="YouTube"> <img class="devsite-footer-promo-icon" src="//www.gstatic.com/images/icons/material/product/2x/youtube_48dp.png" loading="lazy" alt="YouTube"> </picture> YouTube </a> <div class="devsite-footer-promo-description">Check out Android Developers on YouTube</div> </li> <li class="devsite-footer-promo"> <a href="//www.linkedin.com/showcase/androiddev" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer LinkedIn Promo" > <picture> <source class="devsite-dark-theme" srcset="https://developer.android.com/_static/android/images/logo-linkedin_dt.svg" media="(prefers-color-scheme: dark)" loading="lazy" alt="LinkedIn"> <img class="devsite-footer-promo-icon" src="/_static/android/images/logo-linkedin.svg" loading="lazy" alt="LinkedIn"> </picture> LinkedIn </a> <div class="devsite-footer-promo-description">Connect with the Android Developers community on LinkedIn</div> </li> </ul> </nav> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">More Android</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//www.android.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Android </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//www.android.com/enterprise/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Android for Enterprise </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//www.android.com/security-center/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Security </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//source.android.com" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Source </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/news" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > News </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//android-developers.googleblog.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)" > Blog </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/podcasts" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 7)" > Podcasts </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Discover</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/games" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Gaming </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/ml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Machine Learning </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/health-and-fitness" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Health & Fitness </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/media" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Camera & Media </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/privacy" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Privacy </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/training/connectivity/5g" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)" > 5G </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Android Devices</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/large-screens" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Large screens </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/wear" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Wear OS </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/chrome-os" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > ChromeOS devices </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/cars" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Android for cars </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/tv" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Android TV </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Releases</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/about/versions/15" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Android 15 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/about/versions/14" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Android 14 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/about/versions/13" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Android 13 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/about/versions/12" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Android 12 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/about/versions/11" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Android 11 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/about/versions/10" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 6)" > Android 10 </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/about/versions/pie" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 7)" > Pie </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Documentation and Downloads</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/studio/intro" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Android Studio guide </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/guide" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Developers guides </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/reference" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > API reference </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/studio" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Download Studio </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/ndk" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 5)" > Android NDK </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Support</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="//issuetracker.google.com/issues/new?component=190923&template=841312" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Report platform bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//issuetracker.google.com/issues/new?component=192697" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Report documentation bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="//support.google.com/googleplay/android-developer" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Google Play support </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://g.co/userresearch/androiddeveloperfooter" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Join research studies </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-sites" aria-label="Other Google Developers websites"> <a href="https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/lockup-google-for-developers-dark-theme.svg" media="(prefers-color-scheme: none)" class="devsite-dark-theme" loading="lazy" alt="Google Developers"> <img class="devsite-footer-sites-logo" src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/lockup-google-for-developers.svg" loading="lazy" alt="Google Developers"> </picture> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//developer.android.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link" > Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link" > Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//firebase.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link" > Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//cloud.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link" > Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="//developers.google.com/products/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link" > All products </a> </li> </ul> </nav> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="/license" data-category="Site-Wide Custom Events" data-label="Footer License link" > License </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="/distribute/marketing-tools/brand-guidelines" data-category="Site-Wide Custom Events" data-label="Footer Brand guidelines link" > Brand guidelines </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> <li class="devsite-footer-utility-item devsite-footer-utility-button"> Get news and tips by email <a class="devsite-footer-utility-link gc-analytics-event" href="/updates" data-category="Site-Wide Custom Events" data-label="Footer Subscribe link" > Subscribe </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [{"id": "G-QFRN08RN6E", "purpose": 0}], "ga4p": [{"id": "G-QFRN08RN6E", "purpose": 0}], "gtm": [], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "codelab", "projectName": null, "signedIn": "False", "tenant": "android", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <android-fully-clickable target=" .android-case-study .devsite-landing-row-item, .android-grouped-resources .devsite-landing-row-item, .android-grouped-resources-primary .devsite-landing-row-item, .android-grouped-resources-secondary .devsite-landing-row-item, .android-guide-cards .devsite-landing-row-item, .android-illustrated-resources-index .devsite-landing-row-item, .android-illustrated-resources-primary .devsite-landing-row-item, .android-illustrated-resources-secondary .devsite-landing-row-item, .android-illustrated-resources-secondary-small .devsite-landing-row-item, .android-illustrated-resources-tertiary .devsite-landing-row-item, .android-illustrated-resources-tertiary-small .devsite-landing-row-item, .android-promo .devsite-landing-row-item, .android-quick-link, .android-samples .devsite-card-wrapper, .fully-clickable" watch=".android-samples, devsite-content"></android-fully-clickable> <script nonce="AMAPIdiwFoucFI8KdVYeov06nqfb5y"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/js/app_loader.js', '[3,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android","https://android-dot-devsite-v2-prod.appspot.com",1,null,["/_pwa/android/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/favicon.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/android/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500,600,700|Google+Sans+Text:400,400italic,500,500italic,600,600italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","developer.android.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Search__enable_dynamic_content_confidential_banner","Profiles__enable_public_developer_profiles","MiscFeatureFlags__enable_firebase_utm","Profiles__enable_complete_playlist_endpoint","Profiles__require_profile_eligibility_for_signin","Cloud__enable_cloud_facet_chat","Search__enable_ai_eligibility_checks","Search__enable_ai_search_summaries","DevPro__enable_developer_subscriptions","MiscFeatureFlags__enable_project_variables","TpcFeatures__enable_required_headers","Experiments__reqs_query_experiments","Concierge__enable_pushui","Profiles__enable_release_notes_notifications","Profiles__enable_awarding_url","Profiles__enable_profile_collections","Cloud__enable_cloudx_ping","TpcFeatures__enable_mirror_tenant_redirects","Cloud__enable_cloud_shell","CloudShell__cloud_shell_button","MiscFeatureFlags__developers_footer_dark_image","Profiles__enable_developer_profiles_callout","Profiles__enable_dashboard_curated_recommendations","Analytics__enable_clearcut_logging","Profiles__enable_completecodelab_endpoint","Cloud__enable_cloud_dlp_service","Cloud__enable_legacy_calculator_redirect","Significatio__enable_by_tenant","Search__enable_suggestions_from_borg","Cloud__enable_llm_concierge_chat","MiscFeatureFlags__enable_dark_theme","CloudShell__cloud_code_overflow_menu","BookNav__enable_tenant_cache_key","Profiles__enable_recognition_badges","MiscFeatureFlags__enable_variable_operator","Cloud__enable_cloud_shell_fte_user_flow","Cloud__enable_cloudx_experiment_ids","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__enable_view_transitions","Search__enable_page_map","DevPro__enable_cloud_innovators_plus","MiscFeatureFlags__enable_explain_this_code","Cloud__enable_free_trial_server_call","MiscFeatureFlags__emergency_css","EngEduTelemetry__enable_engedu_telemetry","Profiles__enable_page_saving"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://developerscontentserving-pa.googleapis.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[3,"android","Android Developers","developer.android.com",null,"android-dot-devsite-v2-prod.appspot.com",null,null,[null,1,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],[1,null,null,[1,20],"/recommendations"],null,null,null,[1,null,1],[1,1,null,1,1]],null,[18,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,null,null,null,null,null,null,null,null,null,null,1,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[6,1,14,15,20,22,23,28,29,37,43],null,[[null,null,1],[1,1]],[[null,null,null,null,null,null,null,[["G-QFRN08RN6E"],null,null,[["G-QFRN08RN6E",1]]],null,null,null,null,1],null,[[2,2],[1,1]]],null,4,null,null,null,null,null,null,null,null,null,null,null,null,null,"android.devsite.google"],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>