September 21, 2022 5:11 am

Val Okafor

New to Jetpack Compose? Here are 20 Jetpack Compose key terms and quick introductions that I believe will help you start Jetpack Compose right. If possible, you should commit these to memory or at least familiarise yourself with them as you start Composing.

  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. So what Composables do you call from here? So what composables do you call from the onCreate … your Composables! And in case you are not ready with your composable functions, Jetpack is here for the rescue in that it provides you with ready-to-go composables such as Text, Images, Icons, and various layouts such as Columns, Rows, 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 LinearLayout with a horizontal orientation.
  5. Box – this built-in composable can be likened to a FrameLayout. Like a Framelayout, the Box displays children related to their parent’s edges. The children of the Box layout will be stacked over each other. The align modifier can specify where the composable should be drawn.
  6. ConstraintLayout – This layout 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 shows the currently visible items. No more ViewHolder classes, LazyColumns are 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 implements 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 a composable that wraps and configures MaterialTheme. You get basic implementations of color, typography, and shape systems by default. However, if needed, you can modify or add your custom systems to the default Theme object.
  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 very flexibly. 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 the 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 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 if you provide it the value of the steps as an observable. And if you do, Jetpack Compose is smart enough only to update the value 123 as that is the only thing that changes and not updates 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 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 item’s name, 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 primary 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 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 who 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.
About the Author

Family first Software Engineer and Entreprenuer.

Leave a Reply

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