Jetpack Compose — Interview Notes

Photo by J. Kelly Brito on Unsplash

In this article I have tried to add as many interview questions related to Jetpack Compose. In the end I have also added few links which helped me to prepare for the same.

Why should you use compose?

1. It brings one language for everything, including UI : Kotlin.
2. Declarative approach instead of imperative approach.
3. Follows dynamic content concepts. Meaning depending on what data is passed to the composables the UI changes based on it.

Basics of Jetpack Compose

1. Why is it called Compose? — Follows composition pattern rather than inheritance pattern, which is followed by previous android ui patterns. All the UI extends View class (directly or indirectly). For more details on Composition patter check https://www.geeksforgeeks.org/composite-design-pattern/.
2. What is setContent? — It basically allow to display the actual UI to the user after the onCreate method has been called. It similar to setContentView which we have in the XML layout but instead it takes composable functions.
3. What are composable functions? — They are fundamental building blocks of an application built with Compose.
4. What is @Composable? — It can be applied to a function or lambda to indicate that the function/lambda can be used as part of a composition to describe a transformation fro application data into tree or hierarchy. Which means transform the code/function/logic into UI shown on the screen, which is handled by the compiler.
5. What are @Preview in Compose? — It’s a function which shows how the composable inside it will look. Like a preview of the UI. It’s also helpful when you want to see which composable function created the UI by clicking on it in the preview section of the IDE.
6. What are Modifier? — It’s a component or parameter in every composable. Used to modify properties of the composable like height, width, padding, etc. One note in setting modifiers is, the order matters when you are applying modifiers. Modifiers are applied from outer toward inner layer.

Core UI elements of Compose

1. What are the Core UI elements of Compose? — Surface Composable, Wrap content of Composable, Align Composables, Row Column Box Composables, Layout with Row and Columns, Extract Composables for reuse, Arrangements for Rows and Columns and, Combine and nest Rows with Columns.
2. What is Surface Composable? — One of the easiest composable which is a bloc of UI that is displayed on the screen, which can have a color and background color.
3. What is Wrap content of Composable? — It’s basically to tell the compose that take only that much space to fit the content, not more than that.
4. What is Align Composables? — This is used to align a composable on the screen like centre, top end, bottom start, etc. which is relative to its parent.
5. Row, Column and Box Composables — A surface can have only one direct child. So to have multiple children we can use Row, Column or Box. Column is a vertical container which places children in vertical manner, Row is a horizontal container which places children in horizontal manner and Box put the children on top of each other like a stack.
6. Arrangements for Rows and Columns — We can align the children of rows or column using arrangements, like space around. Also an alignment option is also provided to align the whole in the entire screen, like put it in the centre of the screen.

Compose fundamental concepts

1. What is Declarative approach? — It means we have a data flow and an events flow. In compose hierarchy the data flows from top to bottom, meaning the parent composable flows data to its child composable. And the events are triggered from child to parent i.e. bottom to top.
2. What is recomposition? — It allows whole UI to be rebuild and the state to be changed. If the parent composable is rebuild then all the children in the hierarchy are rebuild.

State management in Compose

1. What is a State? — State in an application is any value that can change over time.It depends on the data flow. Since data flow is unidirectional then, when an event is triggered the state is updated and then the state is displayed. Advantages are testability, state encapsulation and UI consistency.
2. What is remember? — Allow the state to be remembered over the recomposition.
3. What is ViewModel? — It’s a class that is responsible for preparing and managing the state of the UI for Fragments or Activities. It has a relationship with the view to prepare the data that has to be displayed. View points to the ViewModel, and expects data from it. ViewModel bounds on the UI State which is basically responsible for preparing and managing, and what the UI will display.
4. What is LiveData? — It’s basically a lifecycle-aware observable data holder. Which means it holds some data but is a more reactive in nature. View observe the changes on live data and it aspects to be notified when the data changes. LiveData doesn’t know which views are observing it, but all the views get notified when there is any change to the data.

Navigation in Compose

1. How navigation work in Compose? — Jetpack Compose does not works on the logic of Activity and Fragment, a view navigating between fragments, adding to the fragment manager. Much easier to navigate. So instead of fragment Jetpack Compose uses Composable Screen, so we can switch between composables.
2. What is a Navigation Graph in Compose? — It’s a graph which maps out all the composable screens in a graph, so that you have a very good understanding on what destinations you can have in different points of the actual flow of an application.
3. What is a Navigation Stack in Compose? — It’s a container similar to the stack that we had in our program manager in which we holds composables. And they are those composables that we have defined in the navigation graph that are represented as screens.

Some Other Concepts in Compose/Android

1. What is the difference between MVP and MVVM? — in MVP, the Presenter is tied with the View. The view knows about the presenter because it holds a reference to the presenter, and presenter in turns holds the reference of the View. But in MVVM the view model is not tied to the view. Also the view still holds the reference to the ViewModels, the ViewModel knows nothing about the view. And MVVM promotes decoupling because we can have multiple views that are bound to the same ViewModel.
2. What are the advantages of MVVM? — The code is decoupled. Easily testable. Package structure is even easier to navigate. Project is even easier to maintain. Scalable — easy to add new features.
3. What is LaunchedEffect? — It’s a special composable function that allows us to call things inside it only once, in the initial composition not in recomposition.

For more details related to Android, Kotlin and Jetpack Compose refer the below links, which was helpful for me

1. https://developer.android.com/jetpack/compose/documentation is the first place to go if you are starting with Jetpack Compose. The documentation is really well organised and helpful.
2. Android interview questions full list https://github.com/MindorksOpenSource/android-interview-questions (Not managed by me)
3. Sample Jetpack Compose projects: https://github.com/pradyotprksh/development_learning/tree/main/android
4. Kotlin basics: https://github.com/pradyotprksh/development_learning/tree/main/kotlin/basics
5. Jetpack Compose vs SwiftUI: https://pradyotprksh4.medium.com/jetpack-compose-vs-swiftui-vs-flutter-1b05db33f801
6. Udemy course: https://www.udemy.com/course/jetpack-compose-masterclass/ (Not managed by me)
7. Compose example for image loading, lazy column, coil and navigation: https://github.com/catalinghita8/Compose-Profile-Card-Layout/tree/master (Not managed by me) — See the branches for different sections

This article will be updated as I get new questions and experience. If you have any new question please provide it in the comments, will add it to the list.

Follow for getting the notification when new articles are published.

Follow me on Twitter and GitHub.