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

Getting started with Jetpack Compose.

Getting started with Jetpack Compose.

These slides mainly focus on how an individual can start learning jetpack compose.
A modern UI Toolkit for Android Developers.
In these Slides, we discussed the basics of the Compose and its future.
How one can start the journey and what things they must take care of while learning the new tech.
This includes some resources, tips,s, and links for the same.

Niket Jain

June 19, 2022

Other Decks in Programming


  1. Android Developer @ Mutual Mobile Jetpack Compose Getting started with

    Niket Jain
  2. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem Niket Jain Android Developer @ Mutual Mobile nikeight @nikeight_
  3. A Complete package for Android Developers. What is Jetpack?

  4. A Complete package for Android Developers. What is Jetpack?

  5. Modern Declarative UI Toolkit. Jetpack Compose

  6. Difference Between Imperative and Declarative User Interface in Android.

  7. Adobe Stock#243026154 1. Step by Step Approach 2. Needed to

    be updated manually 3. XML approach Imperative UI
  8. Adobe Stock#243026154 Imperative UI Some Problems with this approach. 1.

    Coupled with XML 2. Lots of Boilerplate Code 3. Old way of Building UI
  9. Adobe Stock#243026154 1. Declared Approach 2. Event Driven ⏫ 3.

    Updates based on the State Declarative UI
  10. Adobe Stock#243026154 Declarative UI Advantages of Using this approach 1.

    Fast the developer’s speed 2. Less Boilerplate codes. 3. Less chances of errors or inaccuracies. 4. Modern and recommended way to build UI.
  11. And what is Recomposition. Composables and its Lifecycle

  12. LifeCycle • Initialization • Recomposition • End of Composition

  13. And Some Best practices. State Management In Jetpack Compose

  14. Important things to notice here - remember key word -

    mutableStateOf ( State<T> ) - Delegates ( By ) - Lambdas Callbacks
  15. Type of States - Stateful - StateLess Type of Observables

    - Live Data - Flows - RxJava.
  16. We will be learning about - How to create a

    Compose Project - Project Structure - Layouts and UI Components. Lets shift to Android Studio to Understand some UI Components.
  17. - Rows - Columns - Constraint Layouts Layouts 01 -

    Surface - Box - TextInputs - Buttons - Lazy Column Components 02 - App Bar - Scaffold - SnackBar Material Components 03 UI Components
  18. We will be using Marvel API. Lets Create a list

    in XML and Compose
  19. Adobe Stock#243026154 - Initialization of Recycler View - Creating Adapter

    - Creating ViewHolder Recycler View - Creating Lazy Column - Items Lazy Column
  20. Compose provides rich set of API’s. Building Beautiful and rich

    Animated UI screens.
  21. Compose Animation Flow Chart

  22. Migrations to Compose Approaches - Top To Bottom - Bottom

    To Top
  23. Adobe Stock#243026154 - Starting Migrating Activity - Start migrating Fragments

    - Comes to the Custom Views - And Finally the Basic Views Top To Bottom - Start with the basic Views - Try to create Common Components - Migrate the Whole Screen to ComponentActivity - Migrate the Values and themes Bottom To Top
  24. Adding Compose to the Existing App - Create a `ComposeView`

    - Find the View and Inflate it - By setting the content - Define a theme - Start writing your composables.
  25. As Jetpack Compose is interoperable we can use Android Views

    at Composable as well.
  26. Let’s Talk about KMM Little more about Compose and its

  27. Build Cross Platform apps using native UI Kotlin Multi Platform

    - Share the Business Logic with all the Domains - Build Your Domains with respective UI Frameworks ( React, Swift UI) - One Code Runs everywhere The Catch here is this - Jetbrains provides support for React with Compose - Support for Desktop apps - Soon they are going to release the support for IOS
  28. Adobe Stock#243026154 - Modern and Fast - Easy to learn

    and apply - Powerful API - Less Code - Declarative Approach Pros - Needed intermediate Kotlin knowledge. - Cons
  29. Resources : https://developer.android.com/jetpack/compose https://developer.android.com/ https://developer.android.com/jetpack https://github.com/android

  30. Thank you! Android Developer @nikeight Niket Jain