====== Jetpack Compose Tutorial ======


[[https://developer.android.com/jetpack/compose/tutorial|Jetpack Compose Tutorial]] is small [[Android Jetpack Compose]] tutorial by Google -> good to start


===== Lesson 1: Composable functions =====
  * 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  

===== Lesson 2: Layouts =====

  * In Compose, a UI hierarchy will be built by calling composable functions from other composable functions
  
  * ''Column'' -> builds elements vertically:
    * author
    * text

<code kotlin>
@Composable
fun MessageCard(msg: Message) {
    Column {
        Text(text = msg.author)
        Text(text = msg.body)
    }
}
</code>

  * ''Row'' -> builds elements horizontally:
    * author | text


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

<code kotlin>
@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)
        }
    }
}

</code>

===== Lesson 3: Material design =====

  * 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)''

===== Lesson 4: Lists and animations =====

  * 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