Create a Simple Android App

02:54Replace the entire contents of MainActivity.kt with the following:

package com.kodeco.chat

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      Column {
        var chatInputText by remember { mutableStateOf("Type your text here") }
        var chatOutputText by remember { mutableStateOf("Press Send to update this text")}
        Text(text = chatOutputText)

        OutlinedTextField(
          value = chatInputText,
          onValueChange = {
            chatInputText = it
          },
          label = { Text("Label") }
        )

        Button(onClick = {
          chatOutputText = chatInputText
          chatInputText = ""
        }) {
          Text(text = "Send")
        }
      }
    }
  }
}

00:28Note: Sometimes, when using new objects in your classes, Android Studio won’t recognize them until you import the class definition. Android Studio shows this by highlighting the object in red.

02:54To import the class definition:

02:11• macOS: Click the object and press Option-Return.

01:30• Windows: Click the object and press Alt-Enter.

01:46You can also choose to let Android Studio handle imports automatically for you when pasting code. Select Android Studio ▸ Settings ▸ Editor ▸ General ▸ Auto Import. In the Kotlin section, check the Add unambiguous imports on the fly box. Click Apply in the bottom-right.

02:16Going through the code:

1. 02:18Column places a column in the view. A column is a layout group that stacks all of its contents, or its “children”, in a vertical column. You’ll learn all about different view layout groups later.
2. 02:34You define two variables, chatInputText and chatOutputText, and give them some default values. Note the use of by remember. The remember API is used by Composable functions to store an object in memory and update it during recomposition.
3. 02:50You define a simple Text composable to display the contents of a chat message.
4. 02:57OutlinedTextField is a styled text field designed to accept user input from the keyboard.
5. 03:04Finally, you define a Button which, when tapped, updates the text area with what you type into the text field.

03:53That’s it! Run your app. Enter some text into the text field and hit the Send button. You’ll see the text at the top update with whatever you typed.

03:42Congratulations! You’ve just created the most basic chat app, one that can accept input and display it back on screen.