Procedural(Imperative) UI vs Declerative UI and Approach on the Android Side

Kaan Enes KAPICI
4 min readApr 10, 2021

--

Hello everyone,

Today we’re looking for to the difference between imperative ui and declarative ui then learn information about the jetpack compose.

In the dynamic realm of Android app development, it is not uncommon for new libraries, SDKs, and architectures to rise and fall and new features to get added or removed each year. Among the few things to survive the flux, the XML-based UI toolkit is relied on by developers to build user interfaces of all kinds.

What’s a “Declarative UI”?

A declarative UI pattern defines the UI as a function of the “state.” A “state” is nothing but a variable or an object that holds a value, which can change based on user input or other business logic. When the state changes, the framework will redraw the UI.You don’t have to manually modify the UI to reflect the new state. Instead, you can declare what to show in each state and the framework will show the matching UI for the current state.

What’s a “Imperative UI”?

Imperative programming is a programming paradigm that describes computation in terms of statements that change a program state.From another point of view,you tell the compiler what you want to happen,step by step.

Difference between in Android App Development

In Android side,If you want to do a design interface with imperative uı,you can use only Java or Kotlin code to design the user interface.But if you want to do with declarative ui,you can use a descriptive markup language, as XHTML or XML, to describe the user interface.While declarative ui can only change the desired area,all field change occurs in imperative ui.

As a result, the jetpack compose structure has arrived in the android area for so that user interface design can be made easily.

What’s a Jetpack Compose?

Jetpack Compose is a modern declarative UI toolkit that simplifies native UI development across all Android platforms. It is the Android team’s take on the revolutionary declarative paradigm. Google announced Jetpack Compose during IO 2019 and released alpha in August 2020.In the last weeks,it was annonced to the whole world.

More information : https://developer.android.com/jetpack/compose

For example, a button in Compose doesn’t use the native Android “Button” class under the hood; instead, it literally paints a button on the screen.

Example Code:

So,Why Should We Learn Compose?

You can continue using the XML-based UI toolkit — it’s not going to disappear anytime soon. But do you really want to miss the ease of writing less code and speeding up app development? If I were to compare Compose vs XML, Compose is the clear winner.

Five reasons why you think should learn compose:

  1. Easy UI Management:Currently, keeping the app state and the UI state in sync is a hassle considering how you have to manually update all the UI components to reflect the changes in the app state.Compose does away with this step of manual synchronization. It automatically updates the UI to match the state.
  2. Kotlin for UI and Logic:To develop XML-based UIs, you must maintain two files — an XML file for layout and a Kotlin file for Activity or Fragment. Compose eliminates the need for a separate file for the UI layout. It allows you to write UI elements within the Activity or Fragment using Kotlin. Compose is built using Kotlin, so you don’t have to learn another language to use Compose.
  3. Independent of the OS:The current UI components are tightly bound to the OS platform. When you create a “Button” in XML, it may look different on different OS versions and devices. Also, since these components are bundled with the OS, new fixes and improvements require another release of the OS. In Compose, every UI element is built from scratch, independent of the underlying OS. For example, a “Button” in Compose looks and behaves the same on all devices.
  4. Interoperability:Compose supports interoperability, which means developers can use Compose within projects that use XML layouts. It can reuse the existing XML layouts to build UIs.
  5. Less code, faster development:Currently, you have to write a lot of code to manage the UI — from setting contents, defining themes, and positioning components to managing visibility based on the business logic. This steals a lot of development time for polishing the UI and debugging other UI issues. In Compose, you can declare UIs directly within the Kotlin files. It eliminates the need to maintain separate XML files and handle them in the code. This means less code and faster development.

As a result of,We all want to write applications quickly and beautifully.Let’s write them in such a way that they can get errors in the least way and see the instant change while writing them.In my opinion compose is better than classic xml coding in android side.

Thank you..

--

--

Kaan Enes KAPICI
Kaan Enes KAPICI

Written by Kaan Enes KAPICI

Hi everybody, I’m Kaan. Senior Application(Android) Engineer at @TurkTelekom/Innova - Ex @Qnb Love cats and dogs.🐶🐈. Writing whatever I want..