Goodbye XML, Hello Jetpack Compose
This post is the first part in a series of Jetpack Compose tutorials. Along the line, we are going to learn what Jetpack Compose is at possibly the lowest level of detail, while we work our way up to building complex, reusable and flexible layouts.
What is Jetpack Compose?
Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.
What about XML?
XML has been the go-to guy for UI structuring/building from the beginning of android development until recently. Its been a great tool, but not one without its shortcomings.
- XML is not typesafe
- Can lead to overhead in CPU and RAM usage on lower-end devices.
- The more views you have in your XML file the more time it takes to Inflate, Create and Find these views by their IDs.
- Longer syntaxes to achieve minimal view rendering.
Take a look at the following code below, the snippet is supposed to show an update prompt as a dialog and all it should contain is a title of the update eg “update to stream videos on the go”, a NestedScrollView to scroll the Release notes/What’s new Text. This minimal function takes up 40 lines of markup.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorPrimaryDark"> <TextView android:id="@+id/update_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginTop="20dp" android:gravity="center_vertical" android:textColor="@color/colorWhite" android:textSize="20sp" android:textStyle="bold" app:layout_constraintStart_toEndOf="@id/update_logo" app:layout_constraintTop_toTopOf="parent" /> <androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toBottomOf="@id/update_version"> <TextView android:id="@+id/update_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:text="" android:textColor="@color/colorWhite" android:textSize="18sp"/> </androidx.core.widget.NestedScrollView> </androidx.constraintlayout.widget.ConstraintLayout>
On the other hand, the same layout can be written with compose in less than 15 lines of code.
Why Jetpack Compose?
Little by little more android developers are migrating away from Java to Kotlin (Not that Java is bad, but Kotlin is a better-written language, more readable, cleaner code, less boilerplate, better APIs and it still uses Java native APIs) because of its simplicity, so also Jetpack composes appearance is timely because it would grow alongside Kotlin and fully become the UI engine of future android apps.
Jetpack Compose is built around composable functions. These functions let you define your app’s UI programmatically by describing its shape and data dependencies, rather than focusing on the process of the UI’s construction.
In a nutshell, Jetpack Compose takes away the burden and error-prone task of building your UI on your own, All you need do is give Jetpack Compose a hint of what you want and it draws it up for you. You can then go ahead to add a bit more customisations as you deem fit.
From the next part, we would set up our machine to use Jetpack Compose and begin creating our first Jetpack Compose App using Kotlin.