February 9


Jetpack Compose Key Terms

By Val Okafor

February 9, 2023

Android Development, Jetpack Compose

Below is a list of twenty Jetpack Compose terminologies and quick introductions that I believe will help you start Jetpack Compose right. You will see numerous usages and sometimes in-depth coverage of each of these terms and concepts throughout this tutorial series.

  1. Composable – Composable functions are the building block of Jetpack Compose. The UI is created in functions that do not return a value, instead, they write to the screen whatever is described in that function. These functions are annotated with @Composable annotation and must be called from another Composable.
  2. Built-in Composables -The onCreate of a Composable Activity has a setContent Composable block which can serve as an entry point to your first Composable function and from there you can call other Composable functions. And in case you are not ready with your own composable functions yet, Jetpack provides you with ready-to-go composables such as Text, Image, Icon, and various layouts such as Column, Row, and Box. Speaking of Column…
  3. Column – this built-in composable is used to place items vertically on the screen. Think FrameLayout or LinearLayout on the Android XML layout system. This is one of the most commonly used layouts/composables in Jetpack Compose. You will be using this a lot.
  4. Row – this built-in composable is used to place items horizontally on the screen. It’s like a linear layout with a horizontal orientation.
  5. Box – this built-in composable can be likened to a FrameLayout. Just like a Framelayout, the Box is used to display children related to their parent’s edges. The children of the Box layout will be stacked over each other. You can use the align modifier to specify where the composable should be drawn.
  6. ConstraintLayout – this is a layout that allows you to place composables relative to other composables on the screen. It arranges items relative to one another. It provides an alternative to using multiple nested Columns, boxes, & Rows and custom layout elements.
  7. LazyColumn – this is Jetpack Compose equivalent of RecyclerView. It provides a vertically scrolling list that only lays out the currently visible items. No more ViewHolder classes, LazyColumns are the ultimate time and space savers.
  8. LazyRow – this less-used composable lays out its children horizontally. Think of Recyclerview with a Horizontal Layout Manager in the legacy Android View system.
  9. Preview – adding @Preview annotation to @Composeable functions allows you to view the output of any Composable called within that Preview function right on Android Studio without running the composable on an Emulator or device. This Jetpack Compose ability speeds up development time because you can quickly see your changes almost in real time as you code. Moreover, Preview lets you render composable for different devices, group multiple composes, specify different themes, and orientations, and much more.
  10. Surface – is Jetpack Compose equivalent of CardView in XML. It is an implementation of the Material design surface and is responsible for providing clipping, elevation, and borders to its children. It also blocks touch propagation behind it. Using Surface makes the code easier and indicates that you are using material design.
  11. Scaffold – A Scaffold implements the basic material design and visual layout structure. It can be likened to the Bootstrap template for Android UI, it has placeholders known as slots for AppBar (Top and Botton), NavigationDrawer, and FloatingActionButton (FAB). Scaffold ensures that these components will be positioned and work together correctly.
  12. Theme – The core element for implementing theming in Jetpack Compose is the MaterialTheme composable. To centralize your styling you create your own composable that wraps and configures MaterialTheme. By default, you get basic implementations of color, typography, and shape systems. However, you can modify or add your own custom systems to the default Theme object if needed.
  13. MaterialTheme – is a systematic way to customize Material Design to better reflect your product’s brand. A Material Theme contains color, typography, and shape attributes. When you customize these attributes, your changes are automatically reflected in the components you use to build your app. Jetpack Compose implements these concepts with the MaterialTheme composable.
  14. Modifier – Modifiers are used to modify how a Composable is laid out or behaves in a very flexible way. To set modifiers, a Composable needs to accept a modifier as a parameter and by convention, the modifier is specified as the first optional parameter of a function. This way you can specify a modifier on a composable without having to name all parameters. You will love Modifiers!
  15. State – Let’s say the time is 10.00 am and you display that value with a Text composable on the screen. Jetpack Compose has a built-in mechanism for you to continually update that value as time increments. This mechanism is known as State management. A State in Jetpack Compose, therefore, is any value that can change during the execution of your app. All composables are not required to have a state. A stateless composable is a composable that cannot directly change any state while a stateful composable is a composable that owns a piece of state that can change over time. The state is essential in working with Compose.
  16. Recomposition – when a state value changes, Jetpack updates the UI through a process called recomposition. The whole concept of thinking in Compose depends on your understanding of recomposition. Imagine a step counter app with a single screen that shows the number of steps in the format “Number of Steps = 123”. Jetpack Compose will continually recompose to update the UI as long as you provide it the value of the steps as an observable. And if you do, Jetpack Compose is smart enough to only update the value 123 as that is the only thing that changes and not update the value “Number of Steps = “
  17. Hoisting – State hoisting is the pattern of moving a state up to make a component stateless. Let’s put this into a little context, continuing with the step counter app, we can write our composable to simply accept the step value as a state even if we provide an input in that Composable that allows the user to enter their step. The general approach with state hoisting in composing is to replace the value of the state (in this case the count of steps) with two parameters. The value: T which is the number of steps to display and an onValueChange: (T) → Unit which is an event that requests the value to change.
  18. Side Effect – A side effect is any changes that are visible outside of the execution of a composable function. A composable function that displays a list of to-do items in a to-do list should do just that – display an item. Since most to-do items have a checkbox next to the name of the item, the composable displaying that item should not have the side effect of handling when the checkbox is checked or unchecked.
  19. NavController – manages app navigation within a NavHost. It is the main object in a Navigation Component. There is a subclass called NavHostController which provides additional APIs such as setOnBackPressedDispatcher that are needed for Compose navigation. The same principles of implementing navigation with Fragments apply to Compose navigation, however, there are new concepts such as routes that are native to Compose.
  20. NavHost – it is the object that manages the real estate under navigation. Let’s use the concept of a property manager to understand NavHost. Let’s assume you have a multi-story building and you decide to occupy the base floor and top floors and hand over the other floors to a property management company to manage. You can now think of this section of the building under management as being wrapped with a NavHost that can swap in and swap out tenants or screens as needed using the NavController you passed to it. The top and basement floor can be likened to the Top and Bottom Appbars which will learn about later in this section.

Val Okafor

About the author

I am a family-first Software Engineer and Creator. I create mobile-first apps that grow businesses and increase efficiency. I learn and share my journey figuring out the money side of code. It is written "Man shall not live by code alone"

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Never miss a good story!

 Subscribe to our newsletter to keep up with the latest trends!