Slide 1

Slide 1 text

Android Developer @ Mutual Mobile Jetpack Compose Getting started with Niket Jain

Slide 2

Slide 2 text

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Niket Jain Android Developer @ Mutual Mobile nikeight @nikeight_

Slide 3

Slide 3 text

A Complete package for Android Developers. What is Jetpack?

Slide 4

Slide 4 text

A Complete package for Android Developers. What is Jetpack?

Slide 5

Slide 5 text

Modern Declarative UI Toolkit. Jetpack Compose

Slide 6

Slide 6 text

Difference Between Imperative and Declarative User Interface in Android.

Slide 7

Slide 7 text

Adobe Stock#243026154 1. Step by Step Approach 2. Needed to be updated manually 3. XML approach Imperative UI

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Adobe Stock#243026154 1. Declared Approach 2. Event Driven ⏫ 3. Updates based on the State Declarative UI

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

And what is Recomposition. Composables and its Lifecycle

Slide 12

Slide 12 text

LifeCycle ● Initialization ● Recomposition ● End of Composition

Slide 13

Slide 13 text

And Some Best practices. State Management In Jetpack Compose

Slide 14

Slide 14 text

Important things to notice here - remember key word - mutableStateOf ( State ) - Delegates ( By ) - Lambdas Callbacks

Slide 15

Slide 15 text

Type of States - Stateful - StateLess Type of Observables - Live Data - Flows - RxJava.

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

- Rows - Columns - Constraint Layouts Layouts 01 - Surface - Box - TextInputs - Buttons - Lazy Column Components 02 - App Bar - Scaffold - SnackBar Material Components 03 UI Components

Slide 18

Slide 18 text

We will be using Marvel API. Lets Create a list in XML and Compose

Slide 19

Slide 19 text

Adobe Stock#243026154 - Initialization of Recycler View - Creating Adapter - Creating ViewHolder Recycler View - Creating Lazy Column - Items Lazy Column

Slide 20

Slide 20 text

Compose provides rich set of API’s. Building Beautiful and rich Animated UI screens.

Slide 21

Slide 21 text

Compose Animation Flow Chart

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

As Jetpack Compose is interoperable we can use Android Views at Composable as well.

Slide 26

Slide 26 text

Let’s Talk about KMM Little more about Compose and its future.

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Adobe Stock#243026154 - Modern and Fast - Easy to learn and apply - Powerful API - Less Code - Declarative Approach Pros - Needed intermediate Kotlin knowledge. - Cons

Slide 29

Slide 29 text

Resources : https://developer.android.com/jetpack/compose https://developer.android.com/ https://developer.android.com/jetpack https://github.com/android

Slide 30

Slide 30 text

Thank you! Android Developer @nikeight Niket Jain