Jetpack Compose: Twitter UI

Ahmed Rizwan
AndroidPub
Published in
4 min readApr 25, 2020

--

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 Screen

Profile Screen

Compose Screen

App State

Before we get to the screens — take a look at app state model, which will be used for navigation and theming. I also added some helpers for navigating to individual screens & for checking theme.

Models

There are two models — both data classes. The Tweet model is annotated with @Model as we update this model from our composed functions to update view state. User stays the same, hence it’s not annotated.

Home Screen

--

--

Ahmed Rizwan
AndroidPub

Web | Android | Senior Software Engineer @QuixelTools