Say Hello 👋 to Jetpack Compose and Compare with XML

Published in

Kt. Academy

5 min readDec 5, 2021

Introduction

Hi everyone 👋 I will try to explain Jetpack Compose Fundamentals and Why should I use Jetpack Compose. Jetpack Compose is important because it is a new way of building modern UI in Android. Let’s dive into the UI development in Android without XML.

In my opinion, Jetpack Compose is the future of Android UI development and we must adopt fastly.

What is Jetpack Compose?

Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android - Google

Jetpack Compose is a modern toolkit that allows us to build our screens in a declarative approach writing less code. Android UI Development is now more powerful and more decoupled.

Before Jetpack Compose, we were using XML layouts to build the native UI. We had a very dependent structure when we build the screens with XML. Also, fragments are very heavy components for the UI. Jetpack Compose allows us to build the same UI with a declarative UI approach and with less code.

Why should I use Jetpack Compose?

In my opinion, it’s more than easy from XML and Kotlin ❤️

If we look technically:

Declarative UI is cleaner, readable, and performant than Imperative UI.
Compose allows you to do more with less code compared to XML.
Compose is Intuitive. This means that you just need to tell Compose what you want to show the user.
Compose is compatible with all your existing code: you can call Compose code from Views and Views from Compose. Also integrated with many Jetpack Libraries.
Compose improves your build time and APK size.

XML Design vs Jetpack Compose

Composition — Recomposition — State Management

Each composables has a initial compositon. Initial composition runs only when we see a view at first time in screen.

Composables can hold a state and re-run on state changes. This is called Recomposition.

Atomic Design

In Compose, component inheritance is implemented with functions, because composables are functions. A composable function can only be called with in another composable. As we write smaller composables, we get a more flexible component structure.

XML vs Jetpack Compose with Code Samples

1. Basic UI Components

Now let’s build the same view using Xml and Jetpack Compose and look at the differences on the code side.
Here is the target view structure:

Build with Xml

Build with Jetpack Compose

2. List Items

Build with Xml

We need a few file/class for showing a list in screen with Xml:

adapter_item_list.xml
ListItemAdapter.kt
ListItemViewHolder (inner class)
Populate activity/fragment

Build with Jetpack Compose

We need only LazyColumn for showing list items in screen. No needed adapter class or item design xml file. We can describe item design in item/items scope.

State Management

“State in an app is any value that can change over time.”- Google

Compose is declarative so the only way to update it is by calling with different arguments.

Initial Composition: creation of a Composition by running composables the first time.
Recomposition: Re-running composables to update the Composition when data (state) changes.

Store a data with remember:

val data by remember { mutableStateOf(INITIAL_VALUE) }

If you want to keep data when configuration changes, you shold store data with rememberSaveable:

var tite by rememberSaveable { mutableStateOf("") }
Text(
    text = title,
    modifier = Modifier.padding(bottom = 10.dp),
    style = MaterialTheme.typography.h5
)

Navigation

Everything is composable, even navigation. We need a NavHost and Screens. Every screen should have a route.

Route: A string that defines the path your composable. Each destination should have a unique route.
NavGraphBuilder.composable: A function for bindind your composable using unique route with navigation graph.

Here is a composable function for creating NavHost:

MainActivity.kt:

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = NavScreen.getStartDestination()
    ) {
        composable(NavScreen.Home.route) { HomeScreen(navController) }
        composable(NavScreen.Explore.route) { ExploreScreen(navController) }
    }}sealed class NavScreen(val route: String) {
    object Home : NavScreen("home")
    object Explore : NavScreen("explore")    companion object {
        fun getStartDestination() = Home.route
    }
}

HomeScreen.kt:

@Composable
fun HomeScreen(
    navController: NavController = rememberNavController(),
    homeViewModel: HomeViewModel = viewModel()
) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = homeViewModel.getTitle())        Button(
            onClick = { navController.navigate(NavScreen.Explore.route) },
        ) {
            Text(text = "Go to Explore screen")
        }
    }
}

ExploreScreen.kt

@Composable
fun ExploreScreen(
    navController: NavController = rememberNavController(),
    exploreViewModel: ExploreViewModel = viewModel()
) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = exploreViewModel.getTitle())        Button(
            onClick = { navController.navigateUp() },
        ) {
            Text(text = "back to previous screen")
        }
    }
}

Conclusion

And we’re done. In this article, I wanted to explain what’s in the box for Jetpack Compose and what is the difference between compose and XML based design.

To me, Jetpack Compose is a revolution of Android UI development. Less code and more understandable code, declarative UI approach, managing state, and more. In addition, it can work directly with the jetpack libraries.

I hope this article was helpful. if so you can leave claps 👏 👏 If you catch a wrong, please leave me a message.

Twitter & Linkedin & Github