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
Tweet

Other Decks in Programming

Transcript

  1. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis

    non erat sem Niket Jain Android Developer @ Mutual Mobile nikeight @nikeight_
  2. Adobe Stock#243026154 1. Step by Step Approach 2. Needed to

    be updated manually 3. XML approach Imperative UI
  3. 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
  4. Adobe Stock#243026154 1. Declared Approach 2. Event Driven ⏫ 3.

    Updates based on the State Declarative UI
  5. 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.
  6. Important things to notice here - remember key word -

    mutableStateOf ( State<T> ) - Delegates ( By ) - Lambdas Callbacks
  7. 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.
  8. - Rows - Columns - Constraint Layouts Layouts 01 -

    Surface - Box - TextInputs - Buttons - Lazy Column Components 02 - App Bar - Scaffold - SnackBar Material Components 03 UI Components
  9. Adobe Stock#243026154 - Initialization of Recycler View - Creating Adapter

    - Creating ViewHolder Recycler View - Creating Lazy Column - Items Lazy Column
  10. 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
  11. 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.
  12. 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
  13. Adobe Stock#243026154 - Modern and Fast - Easy to learn

    and apply - Powerful API - Less Code - Declarative Approach Pros - Needed intermediate Kotlin knowledge. - Cons