What is Jetpack Compose

Explored Compose with Kotlin with Basic fundamentals of Jetpack Compose.

Transcript

3. Why Jetpack Comose? • Modern UI toolkit

4. • Modern UI toolkit
 • Entirely built in Kotlin

5. • Modern UI toolkit
 • Entirely built in Kotlin
 • Accelerate Development

6. • Modern UI toolkit
 • Entirely built in Kotlin
 • Accelerate Development
 • Intuitive Kotlin APIs

7. • Modern UI toolkit
 • Entirely built in Kotlin
 • Accelerate Development
 • Intuitive Kotlin APIs
 • Less Code

8. • Modern UI toolkit
 • Entirely built in Kotlin
 • Accelerate Development
 • Intuitive Kotlin APIs
 • Less Code
 • Powerful tools

10. • Declarative UI

11. • Declarative UI
 • Improved code Quality

12. • Declarative UI
 • Improved code Quality
 • Better Performance

13. • Declarative UI
 • Improved code Quality
 • Better Performance
 • Real-time Preview and faster Iteration

14. • Declarative UI
 • Improved code Quality
 • Better Performance
 • Real-time Preview and faster Iteration
 • Reusable UI components

16. app/build.gradle
 compose_version = 1.5.3

17. MainActivity.kt

19. • A modifier in Jetpack Compose is a function that can be used to change the appearance or behavior of a composable function. Modifiers can be chained together to create complex effects.
 • Changing the size, color, padding, and other properties.
 • Adding behavior to composable functions, such as click listeners and hover effects.
 • Combining composable functions in different ways to create new layouts.

20. • Spacer is a blank element that is used to create a Space between two UI elements. 
 • Ex: 
 Spacer(modifier = Modifier.height(16.dp)
 )
 
 
 

21. • A function that is used to create a UI element in Jetpack Compose.
 • Declarative (describe “what” the UI should look like)
 MainActivity.kt

22. • Text in Jetpack Compose is represented by the Text composable function. 
 
 Surat
23. • A Button in Jetpack Compose is a composable function that represents a clickable button.
24. @Composable fun Demo() { Image( painter = painterResource(R.drawable.img_jay_dp), contentDescription = "Jay" ) }
25. @Composable fun Demo() { Text("1",color = Orange) Text("2",color = Orange) Text("3",color = Orange) } 1 2 3
26. @Composable fun Demo() { Column { Text("1",color = Orange) Text("2",color = Orange) Text("3",color = Orange) } } 3 2 1
27. @Composable fun Demo() { Row{ Text("1",color = Orange) Text("2",color = Orange) Text("3",color = Orange) } } 1 2 3
28. @Composable fun Demo() { Box(Modifier.size(28.dp)) { Text("1", modifier = Modifier.align(Alignment.TopStart)) Text("2", modifier = Modifier.align(Alignment.Center)) Text("3", modifier = Modifier.align(Alignment.BottomEnd)) } } 1 2 3
30. • Column and Row
 • LazyColumn
 • LazyRow
 • ConstraintLayout
 • Spacer
 • Padding
 

31. @Composable fun Demo() { Box(Modifier.background(Color.Orange)) { Text( text = "Surat", color = Color.White modifier = Modifier .padding(8.dp) .background(Color.NavyBlue) ) } } Surat
32. <ConstraintLayout> <ImageView.> <TextView.> <TextView.> ./ConstraintLayout> val textView = findViewById(R.id.tv) textView.text = ... Imperative Row{ Image() Column{ Text() Text() } } Declarative
33. View Jetpack Compose MainActivity.kt activity_main.xml MainActivity.kt Composable Screen 1 Composable Screen N
34. // MainActivity.kt class MainActivity: Activity() { override fun onCreate(...) { setContentView(R.layout.activity_main) } } // activity_main.xml <LinearLayout ...> <TextView ... android:text="Hello World" .> ./LinearLayout> View // MainActivity.kt class MainActivity: Activity() { override fun onCreate(...) { setContent{ Greeting() } } } @Composable fun Greeting(){ Text(“Hello World”) } Jetpack Compose