Jetpack Compose: Twitter UI

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:

ahmedrizwan/JetpackComposeTwitter

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

Home screen is a Scaffold — with drawer, bottom app bar, fab and content components. The scaffoldState is for managing the navigation drawer state. Initially the drawer is closed.

Content

The content consists of a custom top bar & list of tweets. I used VerticalScroller (with column inside) for the list instead of an AdapterList, as for some reason it wasn’t as smooth when scrolling (this will change as Jetpack Compose matures). Ideally we would opt for AdapterList instead — but for now, I’m using the scroller.

Top Bar

As it’s a custom top bar — I used a Surface with some elevation. Inside it’s a simple row with three image resources, all arranged in a SpaceBetween pattern.

Tweet Layout

The tweet layout is also basically composed up of Rows & Columns.

Profile Screen

For profile screen, I used ConstraintLayout within a VerticalScroller — the reason for using this layout is how simple it is to place profile image on top banner.

Constraints

Here’s an example of setting constraints inside the ConstraintSet. This is how I placed the image at the center of Banner’s bottom.

For other constraints — you can view the complete source code.

Compose Screen

Compose screen is also built using columns and rows. Additionally it includes TextField for input.

Theming

There are three themes light, dark and darker. Compose library gives us light and dark color palettes where we set primary, accent, background colors etc. These are considered “themes”.

And here’s how I switch the theme from a dialog:

ThemeOption is a custom compose layout with a Radio Button & Text — I pass in on click event which triggers the theme switch.

Limitations

While implementing the layout — there were some limitations, as Compose is in pre-release dev stage.

1. Something like CoordinatorLayout is not available yet (which allows us to do custom app bar animations). Hence I wasn’t able to add that in Profile screen.
2. TextField doesn’t have placeholder/hint. So I had to implement one myself.
3. There’s currently no pull to refresh functionality available in lists.

Next up — check out Compose implementation of Android 10’s Calculator UI

Jetpack Compose: Calculator UI

Previously I also covered other composable layouts:

Jetpack Compose: Lists

Jetpack Compose: Columns and Rows

Jetpack Compose: Container Layout

Disclaimer: As the Jetpack Compose is in development phase — any of these APIs can change at any time. So as the source of truth, please always refer to the official documentation.

That’s it for now, thank you for reading! 🙂