Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Simplify Android Development with Jetpack Compose

Simplify Android Development with Jetpack Compose

Bhoomi Vaghasiya Gadhiya

September 18, 2023
Tweet

More Decks by Bhoomi Vaghasiya Gadhiya

Other Decks in Programming

Transcript

  1. What is Jetpack Compose? • Modern UI toolkit for building

    native UI • Entirely built in Kotlin
  2. What is Jetpack Compose? • Modern UI toolkit for building

    native UI • Entirely built in Kotlin • Do more with Less Code
  3. What is Jetpack Compose? • Modern UI toolkit for building

    native UI • Entirely built in Kotlin • Do more with Less Code • Intuitive Kotlin APIs
  4. What is Jetpack Compose? • Modern UI toolkit for building

    native UI • Entirely built in Kotlin • Do more with Less Code • Intuitive Kotlin APIs • Accelerate Development
  5. What is Jetpack Compose? • Modern UI toolkit for building

    native UI • Entirely built in Kotlin • Do more with Less Code • Intuitive Kotlin APIs • Accelerate Development • Powerful tool
  6. Imperative vs Declarative <ConstraintLayout> <ImageView+> <TextView+> <TextView+> +/ConstraintLayout> val textView

    = findViewById(R.id.tv) textView.text = ++. Imperative Row{ Image() Column{ Text() Text() } } Declarative
  7. Why Jetpack Compose? • Declarative UI • Concise and less

    boilerplate • Real-time preview and faster iteration
  8. Why Jetpack Compose? • Declarative UI • Concise and less

    boilerplate • Real-time preview and faster iteration • Kotlin integration and interoperability
  9. Why Jetpack Compose? • Declarative UI • Concise and less

    boilerplate • Real-time preview and faster iteration • Kotlin integration and interoperability • Reusable UI components
  10. View vs Jetpack Compose // 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
  11. Composable Function • A function that is used to create

    a UI element in Jetpack Compose. • Declarative (describe “what” the UI should look like)
  12. Button @Composable fun Demo() { Button(onClick = { ** Do

    Something */ }) { Text("Click Me") } }
  13. Box @Composable fun Demo() { Box(Modifier.size(28.dp)) { Text("A", modifier =

    Modifier.align(Alignment.TopStart)) Text("B", modifier = Modifier.align(Alignment.Center)) Text("C", modifier = Modifier.align(Alignment.BottomEnd)) } } A B C
  14. Modifier • Change the appearance and behavior of composables. •

    Example: setting background color, adding padding, making elements clickable, and more.
  15. Modifier @Composable fun Demo() { Box(Modifier.background(Color.Yellow)) { Text( text =

    "Hello", modifier = Modifier .padding(8.dp) .background(Color.Red) ) } } Hello
  16. State • State in Jetpack Compose refers to the data

    that can change and affect the UI of your app. • State is any value that can change over time. • Update UI by calling same composable with new arguments.
  17. Recomposition🔁 • Any time a state is updated a recomposition

    takes place. • Whenever state changes, whoever is consuming state is recomposed. • Triggered By Events : Changes to state variables, user input, or other events trigger recomposition, • Only rebuild the parts of the UI that are affected by the changes. instead of calling whole function. Event Composable UI-Redraw
  18. Recomposition @Composable fun Demo() { Column { val count =

    remember { mutableStateOf(0) } Button(onClick = { count.value++ }) { Text(text = ”Click me”) } Text(text = "Button Clicks: ${count.value}") } } Button Clicks: 0
  19. Remember val someClass Composition 1 Recomposition 2 Recomposition 3 SomeClass@111

    SomeClass@222 SomeClass@333 Without remember {} @Composable fun Detail(name: String) { val someClass = SomeClass() Text(name) } @Composable fun Detail(name: String) { val someClass = remember { SomeClass() } Text(name) } With remember {} val someClass Composition 1 Recomposition 2 Recomposition 3 SomeClass@111 SomeClass@111 SomeClass@111
  20. Resources to learn Jetpack Compose • developer.android.com/jetpack/compose • github.com/android/compose-samples •

    github.com/android/nowinandroid • medium.com/androiddevelopers • youtube.com/c/AndroidDevelopers/videos Official Resources • composables.com • github.com/Gurupreet/ComposeCookBook • youtube.com/@CheezyCode • jetpackcompose.app Unofficial Resources