Few years ago, we had only one option i.e. XML in Native Android for the UI design. But now we have Jetpack Compose as well, so the question comes to our mind is which one is actually better for our app XML or Jetpack Compose?
From the start Android Apps use XML notation to describe their design such as screen layouts. Using XML, Screens were made up of views such as ConstraintLayout, Button, LinearLayout, Edit text. We had only one option i.e. XML in Native Android for the UI design.
But a few years later, Google introduced Jetpack Compose, a modern approach for developing user interfaces, in the most declarative ways using Kotlin code.
User interface design can be done perfectly with Figma. We have expertise in designing android screens from Figma design and Adobe xd design. For developing a great user interface from figma design in android, we can use Jetpack Compose or XML whichever is best according to the app.
In this article, we are going to see which is better for UI designs in Android App among Jetpack or XML?
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.
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.
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.
4. Jetpack compose is easy to test and update.
5. Helps to increase development speed.
There are benefits of using both jetpack compose and XML
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.
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.
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. Also we have experts in Kotlin Programming Language with the help of which we can make our clients happy.
If you want to build an app using Jetpack compose, then you can contact us any time or hire our Android Developer.
Looking forward for your email/skype message and to discuss with you.
Swapnil Chouhan is Founder of Optimum Technical Labs LLP, Worked on Several mobile app development projects, He writes about it.
Get in touch with us.