Differences

This shows you the differences between two versions of the page.

--- jetpack_compose_tutorial [2023/11/20 11:53] – [Lesson 3: Material design] kalaschnikow
+++ jetpack_compose_tutorial [2023/11/20 15:44] (current) – [Jetpack Compose Tutorial] kalaschnikow
@@ Line 1: / Line 1: @@
+====== 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