1. Introduction to Jetpack Compose and Composable Functions

🎯 Goal : In this article, we will explore why Jetpack Compose, how to create a new app with Compose support, and how to preview composable functions in Android Studio. By the end, you’ll have a solid foundation to start building modern UIs with Compose

Don’t forget to subscribe, like and comment if you have any question ❤️

Why Compose?

1- Less Code

Traditional Android (XML + Kotlin):

Layout File(res/layout/activity_main):

Activity Code (MainActivity.kt):

Lines of Code: ~20 lines (XML + Kotlin)

Jetpack Compose (Kotlin Only):

💞I write these articles to help fellow developers. If you found this useful and want to support my work, you can do so here: Buy Me a Coffee ☕

Composable Function (MainActivity.kt):

Lines of Code: ~10 lines (No XML!)

Key Advantages:

1. No XML Boilerplate: Compose eliminates layout files.
2. State Management: Automatic UI updates via mutablestateOf(no manual findViewById or view updates).
3. Conciseness: All UI logic is in one place (no splitting between XML and Kotlin).

Result: Jetpack Compose reduces code by ~50% while improving readability and maintainability. 🚀

2- Intuitive

Compose’s declarative programming model and state-driven approach make it inherently more intuitive than traditional Android’s imperative XML-based approach.

✅ It describes UI declaratively with functions
✅ UI updates automatically react to state changes
✅ It removes XML + ViewBinding complexity
✅ Composable functions are reusable
✅ It provides live previews

3-️ Accelerate Development

Compose is compatible with all your existing code: you can call Compose code from Views and Views from Compose. Most common libraries like Navigation, ViewModel and Kotlin coroutines work with Compose, so you can start adopting when and where you want.

4- Powerful

Whether you’re building with Material Design or your own design system, Compose gives you the flexibility to implement the design you want.

Create a new project with Compose

1. If you’re in the Welcome to Android Studio window, click Start a new Android Studio project. If you already have an Android Studio project open , select File > New > New Project from the menu bar.
2. In the Select a Project Template window, select Empty Activity and click Next.
3. In the Configure your project window, do the following:
4. Set the Name, Package name, and Save location as you normally would. Note that, in the Languagedropdown menu, Kotlin is the only available option because Jetpack Compose works only with classes written in Kotlin.
5. In the Minimum API level dropdown menu, select API level 21 or higher.
6. Click Finish.

Jetpack Compose is built around composable functions. These functions let you define your app’s UI programmatically by describing how it should look and providing data dependencies, rather than focusing on the process of the UI’s construction (initializing an element, attaching it to a parent, etc.).

Define a simple composable function

To make a function composable, add the @Composable annotation. This annotation informs the Compose compiler that this function is intended to convert data into UI.

@Composable
fun Greeting (name: String) {
Text ("Hello $name")
}

📚 The function doesn’t return anything. Compose functions that emit UI do not need to return anything, because they describe the desired screen state instead of constructing UI widgets.

Preview your function in Android Studio

The @Preview annotation lets you preview your composable functions within Android Studio without having to build and install the app to an Android device or emulator. The annotation must be used on a composable function that does not take in parameters.

@Preview
@Composable
fun PreviewMessageCard() {
    Greeting("Android")
}

📚 One challenge with regenerating the entire screen is that it is potentially expensive, in terms of time, computing power, and battery usage. To mitigate this cost, Compose intelligently chooses which parts of the UI need to be redrawn at any given time.

⭐ Next Up: Text in Compose

🔎 Click “Learn Jetpack Compose in 30 Days” to see all articles