I decided to test out Jetpack Compose by making a simple Twitter UI clone after I came across this tweet by Mariano Zorrilla:

He used Flutter (which is an amazing tool btw for building cross platform apps) — with just one day of work, 1500 lines of code. That’s beyond impressive (specially the fact that Flutter can be hosted on CodePen as well).

So with similar constraints, I wanted to try out Jetpack Compose. I followed the CodePen example (as closely as I could) and this is the result:

The two ways we can implement Lists in Jetpack Compose.

Note: I’m using Jetpack Compose version 0.1.0-dev08 at the time of writing this.

Using AdapterList

We can use AdapterList composable — it is equivalent to RecyclerViews + RecyclerViewAdapters — but with significantly less code 😍

As the Jetpack Compose library is being developed, I wanted to quickly go over the layout options we have so far. This time covering Columns and Rows.

Previously I covered the Container layout — you can check out the article here:

The Column layout is another simple layout (slash ViewGroup). And as the name implies — it lays out items vertically. And Row layout lays out items horizontally.

Their counterpart in the xml world would be the LinearLayout (vertical and horizontal orientations).

Here’s what it looks like

As the Jetpack Compose library is being developed — I wanted to quickly go over the layout options we have so far. Starting with the Container layout.

Update: As of compose version 0.1.0-dev08 the Container Layout has been deprecated in favor of using Box — You can still read details about the Container, as it’s similar to Box — with difference being that Container can only hold one child.

We are already familiar with ViewGroups in the xml world, examples of which are LinearLayout, FrameLayout, ConstraintLayout and so on. There are similar layout options in Jetpack Compose.

The Container layout…

A quick recipe on how to save ViewModel state across android process death.

A misconception among some android developers is that the purpose of using ViewModels is state persistence — it’s actually partly true — they do help in saving state across configuration change (e.g. device rotation) but not process death. So if Android kills your app (let’s say because of low memory), then your app state is lost.

So depending on whether you want to persist your state across process death or not — you can either use onSaveInstanceState in your Fragments/Activities or the new SavedStateHandle in your ViewModels.

…

A pretty cool feature in Kotlin is the ability to construct custom DSLs. And you need just four things in order to write them.

• Infix Notations
• Extension Methods
• Lambdas
• Lambda with Receiver

Let’s go through these one by one.

Infix Notation

Remove brackets & dots!

class Car {
   fun drive(miles: Int) {
      ...
   }
}val car = Car()
car.drive(10) // normal stuff

Just add infix notation before method declaration for it to work

class Car {
   infix fun drive(miles: Int) {
      ...
   }
}val car = Car()
car drive 10 // no brackets! no dots!

Extension Methods

Add new functions to any…

Arrow is a functional programming tool-kit for Kotlin. We can apply a lot of the functional programming concepts with it, as we do in other purely functional programming languages.

A Real World Example

I came across this video — about functional programming in Scala by Jordan Parmer. In the video Functional programming concepts are beautifully explained and demonstrated using Scala & scalaz.

And I had the idea of achieving something similar with Kotlin & Arrow. Following the real world example in the video — the task is to map raw data to domain specific data. …

When building an app, most of the time what we’re doing is pretty much mapping direct/indirect actions to some UI state.

While using Architecture Components, achieving this is quite easy with the help of LiveData + Coroutines + ViewModels — but it does require a bit of code to set it up.

Reason being that in order to observe “state” of a LiveData, we have to write a wrapper around its value, as well as integrate actions around this state.

Let’s take an example, there’s a list-based UI where

• data is loaded from an API
• user can swipe-refresh and retry…