Introduction

Jetpack Compose is Android’s modern UI toolkit for building native Android apps. After a decade of using XML-based Views for UI, the ecosystem realized that some decisions made when developing the now-dated UI toolkit needed to be updated. In contrast, Android development has significantly advanced in the last five years in architecture and testing.

Existing Problems with the XML-Based UI Toolkit

• Verbosity: Writing UI in XML is extremely verbose and riddled with boilerplate, often prone to introducing unintended errors by developers.
• Manual state management: While architecture components have significantly cleaned up state management on the UI layer in recent years, interfacing with the UI and making it interactive still requires manual work.
• Performance: Due to the nature in which the view system has been written, complex UIs with nested view hierarchies have significant performance overhead.

Jetpack Compose, being a declarative UI framework, solves all of these problems:

• You write less code to achieve the same result and write your UI in Kotlin.
• UI written in compose is a function of its backing state, requiring no manual workarounds to keep your UI updated and in sync.
• As the name suggests, compose is built with the idea of “composability” in mind, so even complex screens can be written without any complicated nesting.

Learning Jetpack Compose

Jetpack Compose uses a different programming model, which simplifies UI development and makes you more productive with less code, modern tooling, and well-crafted Kotlin APIs. Some of the key benefits of adopting compose are:

• Using modern, declarative syntax: Jetpack Compose adopts a modern, declarative UI approach, aligning with other popular frameworks like React on the web and SwiftUI on iOS. This approach simplifies UI development by allowing you to describe what your UI should look like, not how to construct it, making code more concise and readable.

• Less boilerplate code: Writing UIs in Compose involves significantly less boilerplate. To achieve the same result, you’ll write less code than XML. Since Compose uses Kotlin, it’s far more expressive than XML.

• Improved Development Experience: Being a Kotlin-exclusive UI framework, it leverages Kotlin’s language features, such as lambdas and coroutines, making the development process more efficient and enjoyable.

• Interoperability with existing code: Just like Kotlin, Compose has a strong interop story. You can use as little or as much of Compose in your codebase as possible. This means you can start small and gradually migrate your codebase to Compose. Compose is also designed to be interoperable with the existing Android view system. You can use Composables within your existing XML layouts and bring your XML views into a Compose UI, offering you a lot of flexibility of choice.

• Multiplatform future: Initially developed for Android, Jetpack Compose has extended its reach beyond mobile development with Compose Multiplatform. JetBrains is developing it as a solution to share native UI code with desktop, web and iOS alongside Android. So, the skills you pick up while learning Compose will also be transferable to other platforms.

In this lesson, you’ll learn:

• What a composable is.
• How to create a composable.
• Naming conventions that composables follow.
• How to preview UI built using composables in Android Studio.