Jetpack Compose Tutorial

Jetpack Compose Tutorial is small Android Jetpack Compose tutorial by Google → good to start

• To create a composable function just add @Composable annotation to the function name
• In onCreate create a setContent block and call there the composable
  • The setContent block defines the activity's layout where composable functions are called.
    • Composable functions can only be called from other composable functions.
• @Preview annotation helps to see the previews of Composable functions within Android Studio
  • The function annotated with @Preview should have NO parameters

• In Compose, a UI hierarchy will be built by calling composable functions from other composable functions

• Column → builds elements vertically:
• author
• text

@Composable
fun MessageCard(msg: Message) {
    Column {
        Text(text = msg.author)
        Text(text = msg.body)
    }
}

• Row → builds elements horizontally:
  • author | text

• To decorate or configure a composable Jetpack Compose uses modifiers:

@Composable
fun MessageCard(msg: Message) {
    // Add padding around our message
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(R.drawable.profile_picture),
            contentDescription = "Contact profile picture",
            modifier = Modifier
                // Set image size to 40 dp
                .size(40.dp)
                // Clip image to be shaped as a circle
                .clip(CircleShape)
        )
 
        // Add a horizontal space between the image and the column
        Spacer(modifier = Modifier.width(8.dp))
 
        Column {
            Text(text = msg.author)
            // Add a vertical space between the author and message texts
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = msg.body)
        }
    }
}

• Jetpack Compose provides an implementation of Material Design 3
  • To start, wrap the MessageCard function with the Material theme created in your project, ComposeTutorialTheme, as well as a Surface

• Material Design is built around three pilars:
• Color
  • MaterialTheme.colorSheme
• Typography
  • MaterialTheme.typography.titleSmall
  • MaterialTheme.typography. …
• Shape
  • MaterialTheme.shapes.medium
  • MaterialTheme.shapes. …
• Enable dark theme
• @Preview (uiMode = Configuration.UI_MODE_NIGHT_YES)

• Create a list of messages
  • Use Compose's LazyColumn and LazyRow because they shows only elements, which are on the screen
    • ⇒ efficient
• Animate message while expanding
  • to keep track of whether message has been expanded or not, use the Composable functions
    • remember
    • mutableStateOf
• Recomposition
  • redraw automatically when the value is updated