Introto 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, this new style of developing apps is definitely something that Android developers should know about.

The TempConverter5 Example

The remainder of this document will show how to build a simple temperature converter app, which converts a Celsius remperature to a Fahrenheit one. 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 as we have been doing). Note that there is not a choice of language; Kotlin is always 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.")
        }
    }
}

Note two items:
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 should show the same line as before:
Hello, friends, welcome to JetPack Compose.
Add a line to the setContent function so that it looks like this:
```
setContent {
    Hello("friends")
    Hello("everyone")
}
```
When we run the app now, unfortunately the greeting lines are written on top of each other. We need to 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 Code 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 thermometer.png image to the res/drawable folder, modify the MainActivityContent function to look like this:

@Composable
fun MainActivityContent( ) {
    Column {
        ImageHeader(R.drawable.thermometer, "Thermometer")
        Hello("friends")
        Hello("everyone")
    }
}

Run the app to see that the thermometer image is displayed with the two

Display the Temperature Text

Add a TemperatureText function that displays a hardcoded temperature conversion:

@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. We won't need these for our TemperatureConverter app.

Finally, call the TemperatureText function in the MainActivity method:

@Composable
fun MainActivityContent( ) {
    Column {
        ImageHeader(R.drawable.thermometer, "Thermometer")
        TemperatureText(0)
    }
}

Run the app. Under the Thermometer 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 the convert button to the MainActivityContent function:

@Composable
fun MainActivityContent( ) {
    Column {
        ImageHeader(R.drawable.thermometer, "Thermometer")
        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 MainActivity function to hold the Celsius temperature. Here is the modified MainActivityContent 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.thermometer,
            "Thermometer")
        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. The EnterTemperature 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.thermometer, "Thermometer")
        EnterTemperature(newCelsius.value) {
            newCelsius.value = it
        }
        ConvertButton {
            newCelsius.value.toIntOrNull()?.let {
                celsius.value = it
            }
        }
        TemperatureText(celsius.value)
    }
}

Complete TempConverter5 Code So Far

Here is the complete code so far:


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

package it372.tempconverter5
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
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.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextDirection.Companion.Content
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

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

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

    @Composable
    fun MainActivityContent( ) {
        val celsius = remember { mutableStateOf(0) }
        val newCelsius = remember { mutableStateOf("")}
        Column {
            ImageHeader(R.drawable.thermometer,
                "Thermometer")
            EnterTemperature(newCelsius.value) {
                newCelsius.value = it
            }
            ConvertButton {
                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")
    }
}