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:
The Code
You can get the source code here:
Starting with the top most level composable
The hierarchy goes like: MaterialTheme → WithConstraints → Content
MaterialTheme
It’s a high level component that sets the pre-defined colors and styling according to the Material design principles. …
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:
Complete source code:
The App
There are three screens in this app
Home…
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 😍
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.
Multiple Types
We can easily differentiate between different view types — by simply adding if conditions. …
About
