Intro to Jetpack Compose

To Documents

Intro to Jetpack Compose

Reference

The example presented in this document is based the example starting on Page 755 this book:
Dawn and David Griffiths
Head First Android Development, 3rd Edition
O'Reilly, 2022

Overview

Jetpack Compose is a Kotlin-based declarative UI framework for creating Android apps.
It is an alternative to using layout files to specify the layout for an Android app -- Jetpack Compose apps specify the user interface completely in the activity file.
Unlike View-based Android apps that can use either Java or Kotlin as their backend language, apps developed with Jetpack Compose can only use Kotlin.
Although it is not yet clear whether traditional view-based apps will be replaced with Jetpack Compose apps, Android developers should become familiar with this new style of developing apps.

The TempConverter5 Example

The remainder of this document will show how to build a simple temperature converter app, which converts a Celsius remperature to Fahrenheit. We will learn how to add these UI elements Text, Image, Button, and TextView (similar to a view-based EditText) to our app.
Throughout this document, use Alt-Enter to create the import statement when necessary after adding new items to the project.
Start by creating an new Empty Activity not an Empty Views Activity. There is not a choice of language for an Empty Activity -- Kotlin must be used.

Start by changing the MainActivity.kt file to look like this:

package it372.tempconverter5
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text 
class MainActivity : ComponentActivity( ) { 
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState) 
    setContent { 
        Text("Hello, friends, " + 
            "welcome to JetPack Compose.")
        }
    }
}

Two differences between View Based and JetPack Compose Apps:
1. The MainActivity class does not inherit from the AppCompatActivity, it inherits from ComponentActivity instead.
2. The MainActivity class does not call setContentView to set the layout; it calls the setContent function instead.
Run the app. This text is displayed at the top of the app:
Hello, friends, welcome to JetPack Compose.

Using a Composable Function

Add this Hello function to the MainActivity class after the onCreate function:

@Composable
fun Hello(name : String) {
    Text("Hello, $name, welcome " + 
        " to Jetpack Composable")
}

Then rewrite the setContent function to look like this:
```
setContent {
    Hello("friends")
}
```
Run the app again. It shows the same line as before:
Hello, friends, welcome to JetPack Compose.

Add a line to the setContent function:

setContent {
    Hello("friends")
    Hello("everyone")
}

When we run the app now, unfortunately the greeting lines are written on top of each other. We must place the calls of the Hello function in a column so that they display properly.
Change the setContent function to display the greetings in a column and run the app again:
```
setContent {
    Column {
        Hello("friends")
        Hello("everyone")
    }
}
```
When we run the app again, these two lines are displayed:
Hello, friends, welcome to JetPack Compose.
Hello, everyone, welcome to JetPack Compose.

The Preview Option

Add this PreviewMainActivity function between the setContent and Hello functions and run the app again:

@Composable
fun PreviewMainActivity( ) {
    Column {
        Hello("friends")
        Hello("everyone")
    }
}

Display MainActivity.kt in Design View instead of Code View. The two sentences that display in the app now display in the Design View:
Hello, friends, welcome to JetPack Compose.
Hello, everyone, welcome to JetPack Compose.
The problem with this setup is redundant code. To fix this, add a new function named MainActivityContent between the PreviewMainActivity and Hello functions:
```
@Composable
fun MainActivityContent( ) {
    Column {
        Hello("friends")
        Hello("everyone")
    }
}
```

Then change call of the SetContent method to

setContent {
     MainActivityContent( )
}

Also change the definition of PreviewMainActivity to

@Preview(showBackground = true)
@Composable
fun PreviewMainActivity( ) {
     MainActivityContent( )
}

Display an Image Header

Between the MainActivityContent and Hello functions, add this ImageHeader function:

@Composable
fun ImageHeader(image : Int, description : String) {
    Image(
        painter = painterResource(image),
        contentDescription = description,
        modifier = Modifier.height(180.dp).fillMaxWidth( ),
        contentScale = ContentScale.Crop
    )
}

After adding this sunset.jpg image to the res/drawable folder, modify the MainActivityContent function to look like this:

@Composable
fun MainActivityContent( ) {
    Column {
        ImageHeader(R.drawable.sunset, "Ocean Sunset")
        Hello("friends")
        Hello("everyone")
    }
}

Run the app to see that the sunset image is displayed with the two greetings.

Display the Temperature Text

Add a TemperatureText function that displays the conversion of a hardcoded temperature:

@Composable
fun TempertureText(celsius : Int) {
    val fahrenheit = (celsius * 9 / 5) + 32
    Text("$celsius Celsius = $fahrenheit Fahrenheit")
}

We can remove the statements
```
Hello("friends")
Hello("everyone")
```
from the MainActivity function and also the Hello function because will not need these for our TemperatureConverter app.

Finally, call the TemperatureText function in the MainActivity method:

@Composable
fun MainActivityContent( ) {
    Column {
        ImageHeader(R.drawable.sunset, "Ocean Sunset")
        TemperatureText(0)
    }
}

Run the app. Under the Sunset image, you should see this text:
0 Celsius = 32 Fahrenheit

Add a Convert Button

Add this ConvertButton function between the ImageHeader and TemperatureText functions:

@Composable
fun ConvertButton(clicked: ( ) -> Unit) {
    Button(onClick = clicked) {
        Text("Convert")
    }
}

Add this convert button to the MainActivityContent function:

@Composable
fun MainActivityContent( ) {
    Column {
        ImageHeader(R.drawable.sunset, "Ocean Sunset")
        ConvertButton {
            // Add event listener for button later.
        }
        TemperatureText(0)
    }
}

Event Listener Version 1 for Button

Add an anonymous function to the convert button to change the temperature in the temperature text. Also add a MutableState to the top of the MainActivityContent function to hold the Celsius temperature. Here is the modified function:

@Composable
fun MainActivityContent( ) {

    // Save Celsius value so it can be
    // accessed by both the convert button
    // and the temperature text.
    val celsius = remember { mutableStateOf(0) }

    Column {
        ImageHeader(R.drawable.sunset, "Ocean Sunset")
        ConvertButton { 
            // Anonymous event listener
            // for the convert button.
            celsius.value = 20 
        }
        TemperatureText(celsius.value)
    }
}

Add a TextField for Temperature Entry

Add this EnterTemperature function between ImageHeader and ConvertButton. This function adds a TextField (same as the EditText view) to let the user enter the temperature:

@Composable
fun EnterTemperature(temperature: String, 
        changed: (String) -> Unit) {
    TextField(
        value = temperature,
        label = { Text("Enter a temperature in Celsius") },
        onValueChange = changed,
        modifier = Modifier.fillMaxWidth()
    )
}

Modify the MainActivityContent function to add the anonymous event listener method:

@Composable
fun MainActivityContent( ) {
    // remember means keep the mutable state
    // in memory so that it is available to
    // all layout elements in the app.
    val celsius = remember { mutableStateOf(0) }
    val newCelsius = remember { mutableStateOf("")}

    Column {
        ImageHeader(R.drawable.sunset, "Ocean Sunset")
        EnterTemperature(newCelsius.value) {
            newCelsius.value = it
        }
        ConvertButton {
            newCelsius.value.toIntOrNull()?.let {
                celsius.value = it
            }
        }
        TemperatureText(celsius.value)
    }
}

Modify App Layout

Add padding around the column:

@Composable
fun MainActivityContent( ) {
   ...
   Column(modifier = Modifier.padding(25.dp)) {
   ...
}

Center horizontally all of the column's content:

@Composable
fun MainActivityContent( ) {
   ...
   Column(modifier = Modifier.padding(25.dp).fillMaxWidth( ),
          horizontalAlignment = Alignment.CenterHorizontally) {
       ...
   }           
   ...
}

Instead of centering the entire column, we can center only the row containing the Convert button:

@Composable
fun MainActivityContent( ) {
   ...
   Column(modifier = Modifier.padding(25.dp).fillMaxWidth( )) {
       ...
       Row(modifier = Modifier.fillMaxWidth( ),
           horizontalAlignment = Alignment.CenterHorizontally) {
           ConvertButton { ... }
       }
       ...
   }           
   ...
}

Code for the TempConverter5 App

The complete TempConverter5 code:

// TempConverter5 Example
// Source Code File: MainActivity.kt

package it372.ssmith.tempconverter5
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge( )
        setContent {
            MainActivityContent( )
        }
    }

    @Composable
    fun PreviewMainActivity( ) {
        MainActivityContent( )
    }

    @Preview(showBackground = true)
    @Composable
    fun MainActivityContent( ) {

        // Save celsius values so they can be used by the
        // button and the temperature text.
        val celsius = remember { mutableStateOf(0) }
        val newCelsius = remember { mutableStateOf("") }

        Column(modifier = Modifier.padding(25.dp).fillMaxWidth( ),
                horizontalAlignment = Alignment.CenterHorizontally) {

            ImageHeader(R.drawable.sunset,
              "Ocean Sunset")
            // Hello("friends")
            // Hello("everyone")
            EnterTemperature(newCelsius.value) {
                newCelsius.value = it
            }
            ConvertButton {
                // Anonymous event listener
                // for convert button
                // celsius.value = 20
                newCelsius.value.toIntOrNull( )?.let {
                    celsius.value = it
                }
            }
            TemperatureText(celsius.value)
        }
    }

    @Composable
    fun ImageHeader(image : Int, description : String) {
        Image(
            painter = painterResource(image),
            contentDescription = description,
            modifier = Modifier.height(180.dp).fillMaxWidth( ),
            contentScale = ContentScale.Crop
        )
    }

    @Composable
    fun EnterTemperature(temperature: String,
            changed : (String) -> Unit) {
        TextField(
            value = temperature,
            label = { Text("Enter a temperature in Celsius") },
            onValueChange = changed,
            modifier = Modifier.fillMaxWidth( )
        )
    }

    @Composable
    fun ConvertButton(clicked : ( ) -> Unit) {
        Button(onClick = clicked) {
            Text("Convert")
        }
    }

    @Composable
    fun TemperatureText(celsius : Int) {
        val fahrenheit = (celsius * 9) / 5 + 32
        Text("$celsius Celsius = $fahrenheit Fahrenheit")
    }

    /*
    @Composable
    fun Hello(name : String) {
        Text("Hello, $name, " +
            "welcome to Jetpack Compose.")
    }
    */
}