Image for post
Image for post

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 :

He used (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 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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

Tweet Layout

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

For other constraints — you can view the complete .

Compose Screen

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Previously I also covered other composable layouts:

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 .

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

Web | Android | Senior Software Engineer @QuixelTools

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