A. Appendix A: ViewGroups / Widgets to Jetpack Compose Cheatsheet

Written by Prateek Prasad

Since Jetpack Compose is still relatively new, you will find yourself working in hybrid codebases for a while, comprising older features built-in XML and newer ones adopting compose.

This is a reasonably standard adoption pattern for any new technology. With this in mind, before concluding the book, here’s a handy cheatsheet you can use to find the Jetpack Compose equivalent for the most common Android Views on Android.

This guide should be a quick reference whenever you build a new UI in composing or converting an existing screen to Compose.

ViewGroup and Their Equivalents

• LinearLayout - To stack items linearly in compose, you can use a Row for laying out items horizontally or a Column for laying out items vertically.
• FrameLayout - To stack items on top of one another, use a Box composable.
• RelativeLayout - Relative layout lets you lay items out relative to one another. While there is no direct equivalent for a RelativeLayout in compose, you can use a combination of Row, Column and Box with the align modifiers to achieve the same result.
• ConstraintLayout - To lay out items relative to one another based on constraints, Jetpack Compose offers a similarly named composable, ConstraintLayout.

Composables for Building Lists

An everyday use case in any app is to present data as a list. In the XML world, you would use a RecyclerView for the job but compose offers a few variations based on the orientation and arrangement.

• Vertical List - LazyColumn()
• Horizontal List - LazyRow()
• Vertical Grid - LazyVerticalGrid()
• Horizontal Grid - LazyHorizontalGrid()

Each of the above composables offers parameters and modifiers for content padding, item placement etc.

Common View Use Cases and Their Compose Equivalents

Here’s a quick rundown of the most common views, their most common use cases in XML, and their Jetpack Compose equivalents.

• TextView - Text() .
• TextView with Span-based styling - Use a Text() composable with an AnnotatedString as the text parameter.
• TextView, which is clickable - Use the clickable() modifier but if you require sub-sections of the text to be clickable, use the ClickableText() composable instead.
• EditText - TextField().
• TextInputLayout - OutlinedTextField().
• ImageView - Image() composable. Based on the kind of asset you need to show (bitmap, animated vector drawable etc.), you need to use the respective painterResource as the parameter.
• ImageView, where the image needs to be loaded from the internet - Use the composables offered by third-party libraries like Coil or Glide.
• Button - Button() composable.
• Text only Button - TextButton() composable.
• ScrollView - Based on the orientation, use the Row() or Column() composable with the scrollable() modifier.
• Button with Material Theming - MaterialButton() composable.
• App bar (bottom) - BottomAppBar().
• App bar (top) - TopAppBar().
• Bottom navigation - BottomNavigation().
• FloatingActionButton - FloatingActionButton().
• FloatingActionButton (extended style) - ExtendedFloatingActionButton().
• CardView - Card().
• CheckBox - Checkbox().
• Dialog - AlertDialog().
• Navigation Drawer - ModalDrawer().
• Progress indicator (circular) - CircularProgressIndicator().
• Progress indicator (linear) - LinearProgressIndicator().
• BottomSheet - BottomSheetScaffold().

While this list is not exhaustive, it covers 90% of the views you would use daily and their composed equivalents. You can keep this list handy when converting your views to Jetpack Compose or when you need to find the available alternative for a view.