Jetpack Composable UI toolkit: Part 1

5 min readMay 24, 2023

Overview :

Jetpack Compose is a modern toolkit for building native Android UI. It simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.

Composable :
1. Jetpack Compose is Android’s recommended modern toolkit for building native UI.

2. It simplifies and accelerates UI development on Android.

3. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

4. You will call composable functions to define what elements you want, and the Compose compiler will do the rest.

5. Easily access the full capabilities of every platform, just like native applications.

Composable UI and programming UI :

Why adopt compose :

Create a composable project in android studio :

Create a sample project from Composable Text :

Follow the link for step by step.

Build a simple app with text composables | Android Developers

In this codelab, you use Jetpack Compose to build a simple Android app that displays a birthday message on the screen…

developer.android.com

How to convert an existing app into composable :

Add composable dependencies

2. Enable compose in gradle

Compose Vs XML :

APK size

2. Build Time

3. Lines of code

4. Declarative UI >> Src1 Src2

5. Removed boilerplate code (Example : RecyclerView)

A small tour with composable components.

Define a composable function
Define a recomposable function // Dynamic content
Preview your function
RunWithPreview
Using a Column
Configure your layout
Use Material Design >> Color, Typography, Shape
Lists and animations >> LazyColoum, LazyRow
Surface
Modifier

Conclusion :

1. Compose has been a complete redesign of the UI system

2. XML is not deprecated so dont worry.

3. Compose will be the preferred way of dealing with UI same like kotlin overcome with java.

4. Do more practise and try to familiar with components and drive SDKs.

5. As compare result with xml There is no doubt in “Compose is the future of UI development on Android.”

6. Easier to build custom views because of its flexibility

7. Intuitive and faster development

Consider compose in development — Beginner

Create project with android studio.
Familiar with basic views.
Create a counter assignment. (click button to increase/decrease functions)
Create a theme change assignment. (click button change light/dark mode of app)
Display a list of user. (click button change light/dark mode of app)
Enter value in text box and show into next screen
Load Url in webview
Intent : Share Url, Open Url, Open camera and take picture, Open gallery and take list of picture
Read device location and display location on map.

Consider compose in development — Intermediate

APIs :

Get API : Display a user list in read data from API and open new screen once you tap on user list.

Get API + MVVM approach + Glide : Display a user list in read data from API and open new screen once you tap on user list.

Consider compose in development — Advanced

APIs :

Post API + MVVM approach + Dagger : Fill form and send data to

API + MVVM approach + Dagger : Display a user list in read data from API and open new screen once you tap on user list.

Dagger + API + MVVM approach + ROOM API : Display a user list in read data from API and open new screen once you tap on user list.

Test Cases :

Write test cases to validate UIs and functionalities.

Jetpack compos android apps :