Your First Compose App

Create a New Project

Open Android Studio. On the Welcome screen, click New Project:

The Welcome screen disappears, and a new window takes its place. This is where you choose the type of device you want your project to support.

By default, Phone and Tablet is selected, which shows a variety of screen types. Click Empty Activity to choose it as your preferred project setup. Click the Next button in the bottom-right of the window to move on to the next step.

Now, this screen requires some crucial app details:

1. Name is where you enter the name of the app. For this project, name the app Kodeco Chat.
2. Package name provides the app with a package name, a concept you might be familiar with from Java or Kotlin. Make sure this field reads as com.kodeco.chat.
3. Save location denotes where Android Studio will store the project. You can create your project anywhere you want. Choose a save location that makes sense for your setup. I like to have a dedicated directory on my hard drive for projects. You’ll want to choose a dedicated directory per Android project to avoid confusion. The folder button to the right of the field provides you with a system navigator to help make your selection.
4. Minimum SDK sets the minimum version of Android the app will support. This module requires apps to run API 28, or Android “Pie”, so ensure API 28 (“Pie”, Android 9.0) is selected.
5. Build configuration language lets you choose between Kotlin or Groovy for the Gradle configuration scripts language. Until recently, you had to use Groovy, but now the default language for Gradle is Kotlin, so you can focus on using a single language for all of your Android development. It also optionally lets you choose to use Gradle Version Catalogs. There are a lot of advantages to using Version Catalogs, but you’ll learn about that later. For now, just choose the default, Kotlin DSL.
6. Finish, the button in the bottom-right of the window, completes the project setup. Click this when you’re ready to move on.

Android Studio uses this information and gathers the required libraries and resources to generate a new project. Depending on your internet connection, this phase may take some time.

When that process finishes, Android Studio displays the newly created project with MainActivity.kt already open:

Note: If you see Gradle Sync in Progress and/or progress bars at the bottom of the Android Studio screen, wait for it to finish.

In the Project navigator, open the file in app ‣ kotlin+java ‣ com.kodeco.chat ‣ MainActivity.kt.

This is the code that represents the app screen that appears on your device.

Compose Fundamentals

The default Activity created for you contained the following function:

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
  Text(
    text = "Hello $name!",
    modifier = modifier
  )
}

This code has two notable things about it. First, it’s a function, and secondly, it’s annotated with @Composable. This is all you need to create a UI component in Compose, or, in Compose speak, a composable.

You might’ve noticed that the function name, Greeting(), is capitalized. Composable functions use Pascal case, unlike camel case commonly used in Kotlin code. Hence, a multi-word Compose function would be called, for example, ConversationContent instead of conversationContent. This distinction stems from the fact that composable functions return UI objects, hence adopting the same naming convention as classes.

Greet Yourself

Update the value of Greeting() from “Android” to your name so that Kodeco Chat says hello to you.

You might see the value change from “Android” to your name immediately on the device or emulator without having to re-run the app. If so, this is because of a Compose and Android Studio feature called Live Edit. If you don’t see it update live, you could run the app, or you can enable Live Edit in Android Studio’s settings. Build and run the app. When Android Studio is finished building and installing, Kodeco Chat will appear on your device or emulator:

Exploring Activities

A lifestyle of various activities — like cardio, strength training, and endurance — can keep you healthy. Although they’re all different, they each have a specific purpose or goal.

Android apps are similar — they’re built around a set of screens. Each screen is known as an Activity and is built around a single task. For example, you might have a settings screen where users can adjust the app’s settings or a sign-in screen where users can log in with a username and password.

In the Project navigator on the left, ensure that the app folder is expanded. Navigate to MainActivity.kt, which is located in app/kotlin+java/com.kodeco.chat/MainActivity.kt.

Open the file, and you’ll see the following contents:

package com.kodeco.chat

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.kodeco.chat.ui.theme.KodecoChatTheme

// 1
class MainActivity : ComponentActivity() {
   // 2 
  override fun onCreate(savedInstanceState: Bundle?) {
    // 3    
    super.onCreate(savedInstanceState)
    // 4    
    setContent {
      KodecoChatTheme {
        // A surface container using the 'background' color from the theme
        Surface(
          modifier = Modifier.fillMaxSize(),
          color = MaterialTheme.colorScheme.background
        ) {
          Greeting("Fuad")
        }
      }
    }
  }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
  Text(
    text = "Hello $name!",
    modifier = modifier
  )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
  KodecoChatTheme {
    Greeting("Fuad")
  }
}

MainActivity.kt is where the logic for your chat screen goes. Take a moment to explore what it does:

1. MainActivity is declared as extending ComponentActivity. It’s your first and only Activity in this app. What ComponentActivity does isn’t important right now; all you need to know is that subclassing is required to deal with content on the screen.

2. onCreate() is the entry point to this Activity. It starts with the keyword override, meaning you’ll have to provide a custom implementation from the base ComponentActivity class.

3. Calling the base’s implementation of onCreate() is not only important — it’s required. You do this by calling super.onCreate(). Android needs to set up a few things itself before your own implementation executes, so you notify the base class that it can do so at this point.

4. This line “composes” the given composable — everything that follows it in the braces {} — into the Activity. The content will become the root view of the Activity. The setContent{} block defines the Activity’s layout where composable functions are called. Composable functions can only be called from other composable functions. Hence, you see the Greeting inside of onCreate() is actually just another function, defined below that, but it’s also marked with @Composable. That makes it a composable function.

Jetpack Compose uses a Kotlin compiler plugin to transform these composable functions into the app’s UI elements. For example, inside of Greeting is the Text composable function that is, in turn, defined by the Compose UI library, and it displays a text label on the screen. You write composable functions to define a view layout that gets rendered on your device screen.

These four lines are the key ingredients in creating Activities for Android. You’ll see them in every Activity you create. In the most general sense, any logic you add must come after calling setContent{}.

Note: onCreate() isn’t the only entry point available for Activities, but it’s the one you should be most familiar with. onCreate() also works in conjunction with other methods you can override that make up an Activity’s lifecycle.

If you’re curious to know more, visit the official documentation at https://developer.android.com/guide/components/activities/activity-lifecycle.html.

Now you know the basics of how Activities work! Next, in the demo, you’ll transform the template Compose app into a basic chat interface.