1.8K Followers
·
Follow

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

The Code

You can get the source code here:

Starting with the top most level composable

The hierarchy goes like: MaterialTheme → WithConstraints → Content

It’s a high level component that sets the pre-defined colors and styling according to the Material design principles. …


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

Complete source code:

The App

There are three screens in this app

Home…


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

AdapterList constructor takes in data, which is a list of items you want to display and passes individual items to a lambda. There you can define the list item.

Currently it’s limited to vertical scrolling only. This might change in future releases.

We can easily differentiate between different view types — by simply adding if conditions. …

About

Ahmed Rizwan

Web | Android | Senior Software Engineer @QuixelTools

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