Why I fell in love with Jetpack Compose at first sight: and not looking back.

Since back then when tigers smoked, and the owls sang lullabies at the king's backyard every night, it has been a common knowledge that Android development is difficult. It took much pain and grit to set up Android studio, and if you ever crossed that hurdle, there were yet much more waiting to be crossed: configuring JDK, waking up every day to wrestle with Gradle, Android studio wanting to turn your PC to an oven, Java with its overwhelming verbosity, having to keep up with the ever appearing "deprecated" APIs nightmare, ( the list is endless ) are usually enough to put off the weak-minded.

Then on a fateful moment in time, after what seemed like an endless antiquedom, appeared light. Android studio began to improve drastically, we can now install it and complete the setup in few simple steps, Gradle also got better, Kotlin came, yay! my love, welcome numerous benefits including syntactic sugar, goodbye to Java's verbosity. The light came, but a particular haunting nightmare persisted: designing UI with XML! I had often wished things were easier, even searching online for UI libraries, sometimes you just wonder why everything is so hard, and why you have to write lots of code to do even the most basic of things. Then appears Jetpack Compose, the modern declarative UI kit for building native UI. I found love. We now have the latest stable version 1.2 available. Life just got easier and more beautiful with this star tool in the picture, and takes lesser code, lesser time and energy to build a meaningful, awe-inspiring UI, backed by Google's material theme. Jetpack Compose requires Kotlin, so now you can write your business logic and build your UI in a single language, Kotlin!

Jetpack Compose is not just available on Android, it's also already available for Wear OS, as well as Linux, Windows, and MacOS through the Compose Multiplatform. If you are hopeful to have Jetpack Compose support iOS in the near future, I'm not afraid and I share the same hope with you ( and that would be like unveiling some super ammo for the Android devs? ).

Just like in Flutter (another great UI framework from Google for building cross-platform UI) where everything is a widget, in Jetpack Compose everything is a composable. A composable is simply a function that describes how your UI should look; it is just like any other Kotlin function, except that it is annotated with @Composable; and you can even call composable functions inside another composable function, yeah, so we can easily reuse our UI composables.

@Composable
fun MyUi(){
Text("Hello World!")
}

How Android XML is different from JetPack Compose.

To display the text "Hello Android" on the screen: In XML, we would have to create our layout XML file ( say my_ui.xml ), then in the file , we'd have:

<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Android"
/>

In JetPack Compose, we'd simply do:

Text("Hello Android")

Voila! I mean, just look at it and the simplicity in Jetpack Compose. Simple is better than complex, and definitely beautiful is better than ugly.

To draw a circle in Canvas:

For XML:

1. draw.kt

class DrawCircle @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) :
    View(context, attrs, defStyleAttr) {
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val paint=Paint()
        paint.setStyle(Paint.Style.FILL); paint.setColor(Color.BLACK);
        canvas.drawCircle(x,y,radius,paint)
        }
    }

2. draw.xml

<?xml version="1.0" encoding="utf-8"?>
<com.example.app.DrawCircle
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

Whereas, to draw the same circle in JetPack Compose we'd simply do:

Canvas(modifier=Modifier.fillMaxSize()){
  drawCircle(color=Color.BLACK,radius=radius)
}

This same simplicity cuts across everything Jetpack Compose represents when it comes to building native UI, animations, custom views, reusable UI, navigation, lesser build time, in Android compared to XML. To not bore you with much details my friend, I have limited the number of examples I had to make; you should check out this great kit.

So, this is my love story, definitely I must conclude I've fallen in love with this kit, and I'm not looking back!