# Jetpack Compose: Twitter UI

DevFeed: [Jetpack Compose: Twitter UI](<https://devfeed.tech/articles/jetpack-compose-twitter-ui-23104.md>)

Original publisher: [Read original article](<https://medium.com/android-news/jetpack-compose-twitter-ui-96f76577143a?source=rss----8fca399d4de---4>)

Author: Ahmed Rizwan

Published: 2020-04-25T23:46:18Z

Content type: tutorial

Language: en

Sources: [Android & Tech News -- Medium](<https://devfeed.tech/sources/android-tech-news-medium.md>)

Topics: [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [Compose](<https://devfeed.tech/topics/compose.md>), [ui](<https://devfeed.tech/topics/ui.md>), [App](<https://devfeed.tech/topics/app.md>), [navigation](<https://devfeed.tech/topics/navigation.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [android-app-development](<https://devfeed.tech/tags/android-app-development.md>), [app](<https://devfeed.tech/tags/app.md>), [compose](<https://devfeed.tech/tags/compose.md>), [cross-platform](<https://devfeed.tech/tags/cross-platform.md>), [dialog](<https://devfeed.tech/tags/dialog.md>), [jetpack](<https://devfeed.tech/tags/jetpack.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [layout](<https://devfeed.tech/tags/layout.md>), [navigation](<https://devfeed.tech/tags/navigation.md>), [navigation-drawer](<https://devfeed.tech/tags/navigation-drawer.md>), [state](<https://devfeed.tech/tags/state.md>), [themes](<https://devfeed.tech/tags/themes.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

The article documents a test of Jetpack Compose through a simple Twitter UI clone. It describes the app's three screens, state model, navigation, layouts, scrolling approach, and light, dark, and darker themes.

## Source excerpt

I decided to test out Jetpack Compose by making a simple Twitter UI clone after I came across this tweet by Mariano Zorrilla: Mariano Zorrilla 💙 on Twitter Wait... did I just copied Twitter using #Flutter and share it over @CodePen?! 🥰 Such an amazing tool! Took me 1 day of work and 1500 lines of code. Link: https://t.co/zI90oTPYDd cc @timsneath @redbrogdon @ZoeyFan723 @kevmoo @MartinAguinis @nlycskn @Nash0x7E2 https://t.co/OqzBNWET0y 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 ScreenProfile ScreenCompose ScreenApp 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 i