Which is better for UI designs in Android App - Jetpack Compose or XML?






Every year new technologies are emerging to make developer's lives easier than before.


In this article, we are going to compare both


Jetpack and XML comparison

Android UI development is now more powerful. Few years back, before Jetpack compose, developers were using XML layouts to build native UI. When we build screens with XML, we have a very dependent structure.


User interface UI is a graphical representation of views displayed on a smartphone or tablet. It is a space where interaction between humans and machines occurs. It allows users to operate a machine to complete a task like downloading an app or making a purchase.


Google has introduced Jetpack Compose using which Android developers can do UI designs in app using the kotlin code instead of using XML. According to the Google developer website, Jetpack Compose is Android's modern toolkit for building native UI.


Jetpack compose speeds up testing and uses a single code base to write code. Therefore there are less chances of producing errors. Also it comes with all the functionality required to build a rich and responsive application UI.


Android uses xml format to define their UI's. UI layout has been developed right from Relative Layout, Absolute Layout, Linear Layout to Constraint Layout. Where each and every layout works independently. These UI's are separated by business logic. So Jetpack came with data binding, to couple Data and UI with each other.


Now the most important point about Android Compose is that it basically tells us that the whole Android UI has been rebuilt from scratch. It is advantageous for us as we get a modern layout, a modern way of reconstructing and building an actual UI. This will be beneficial to developers as they need a modern way of interacting between actual code and the layout.


A compose app uses composable functions. Compose helps you structure your code into small chunks. Composable functions are also referred to as composable.


Composable Function


Jetpack builds upon compose functions. To create a composable function, we have to just add @Composable annotation to the function name. To convert these composable functions into app UI elements, Jetpack compose uses the Kotlin compiler plugin. One can call Composable functions from other composable functions.


A simple composable function


Using compose, one can build a user interface by defining a set of composable functions that take in data and emit UI elements.


Below is an example of Jetpack Compose code.To show text on the screen we can use simple composable function that takes the string and displays it on the screen.We are also showing a simple button on the same screen.


Running Jetpack Compose preview in Android Studio

As a developer, one needs to check the logic that has been applied in the code. For this, to be sure and precise, Jetpack Compose provides Preview with Run icon.


Follow the below steps:


1. If it is not already created, create a preview composable using @Preview annotation.


2. Then pass the composable function you created in a setContent() method.


3. Finally, in order to preview changes, you need to pass the same function to preview composable as well.



So for development of these different composable functions, we need to understand how we can actually modify this stuff in compose.


Modifiers are standard Kotlin objects. It allows you to decorate a composable.

They allow you to do the following things, given as below:


1. Process User input


2. Change the composables size, layout, behavior and appearance


3. Add high-level interactions, like making an element clickable, draggable or zoomable.


4. Add information, like accessibility labels



As we already know, Jetpack compose doesn't have a modifier for margin. One should use the padding modifier for both padding and margin.


Jetpack Compose Phases


Compose has three main phases:


1. Composition: What UI to show. Compose runs composable functions and also creates a description of your UI.


2. Layout: where to place UI. This phase has two steps. Measurement and placement.


3. Drawing: This helps in display. UI elements draw into a canvas, which is usually a device screen.



Few things to be aware of when you program in compose:


1. A composable function might be run quite frequently including every frame of an animation.


2. Composable functions can be executed in parallel.


3. Recomposition is optimistic and it may be canceled.


4. Composable functions can also be executed in any order.



There are many benefits using Jetpack compose listed below:


1. It allows you to do more with less code compared to xml.


2. Jetpack compose is compatible with all your existing code.


3. Also, compose is inherent. You just need to compose what you should want to tell the user.



To build an app in Jetpack compose, one has to be familiar with the Kotlin programming language. Jetpack works only with the classes written in Kotlin.


At Optimum Technical Labs LLP, Our experience of using Jetpack Compose has been really good as it enables us to develop better apps with faster development pace.


There are benefits of using both jetpack compose and XML


We ran a LinkedIn poll related to the same question, poll got almost 50-50% votes by Professional Android Developers. This shows that Android developers are using both of these currently and they have mixed opinions about this question.


If you are looking for anything in which we can help, Just Contact us and we can quickly discuss details about your app.

Looking forward for your email/skype message and to discuss with you.






Contact Us

Get in touch with us.

Your message was sent, thank you!