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

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

A Complete package for Android Developers. What is Jetpack? 

A Complete package for Android Developers. What is Jetpack? 

Modern Declarative UI Toolkit. Jetpack Compose 

Difference Between Imperative and Declarative User Interface in Android. 

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

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 

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

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. 

And what is Recomposition. Composables and its Lifecycle 

LifeCycle ● Initialization ● Recomposition ● End of Composition 

And Some Best practices. State Management In Jetpack Compose 

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

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

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. 

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

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

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

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

Compose Animation Flow Chart 

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

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 

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. 

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

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

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 

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

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

Thank you! Android Developer @nikeight Niket Jain