Web | Android | Senior Software Engineer @QuixelTools
Image for post
Image for post

Cloned Android 10’s Calculator UI using Jetpack Compose, as it’s (surprisingly) one of the more complex UI structures.

Before I get into it — previously I also covered Twitter UI —so check that out as well:

Also recommend these:

The Calculator UI

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

Ok — so the thing that’s complex about the Calculator UI is that it has multiple draggable panels and overlays.

What it looks like:


Image for post
Image for post

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:


Image for post
Image for post

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 😍


Image for post
Image for post

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


Image for post
Image for post

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…


Image for post
Image for post

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.


Image for post
Image for post

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…


Image for post
Image for post

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. …


Image for post
Image for post

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…


Image for post
Image for post

A quick intro to MotionLayouts and it’s setup.

MotionLayout is the new layout in Android, for creating amazing interactive animations in android. It’s a part of ConstraintLayout 2.0 library.

To have MotionLayout up and running in your project, and to get a feel of how it works, you’ll need

  • A starting layout
  • An ending layout that has the ending constraints
  • And a motion scene (which defines our animation)

And finally we connect our starting layout to the motion scene — and bamm!

First thing, add ConstraintLayout 2.0 to your build.gradle dependencies

implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha2'

Starting Layout

This can be our activity_main.xml

Just three…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store