Unleashing the Potential of Jetpack Compose: Part II — Composition Vs Inheritance
In the previous part, we explored the fundamentals of Jetpack Compose and its advantages over XML UI development
The Challenge of Inheritance in Android Views:
The existing UI of Android or the View system is based on inheritance.
All the views such as TextView, ImageView, etc. inherit from the View class. All the common code was mainly written in the view class such as Visibility, onClickListener, etc.
It works perfectly for a small codebase, but for a larger codebase, it becomes complex.
Let’s understand the Inheritance of View via an Example:
For a Button, the hierarchy in the View system is Button extends TextView, TextView extends View and View extends Object
Button → TextView → View → object
Similarly, the Hierarchy of ImageButton would be something like this:
ImageButton → ImageView → View → Object
Now, What if I need to create a view in which I can show Images and text both? 🤔
The answer is: I can not create them easily as both hierarchies are different. And in Java and Kotlin, We can not extend from multiple parents.
PS: I can not extend from button and image both
The Power of Composition in Jetpack Compose
👉It’s considered a good practice to consider composition over inheritance
Compose is based on the concept of Composition. You include the functionalities that you need.
In Compose, it’s possible to create a custom view that extends both the functionalities like Image and Text. As in the above example we can see, it’s not possible in the traditional Android View way.
In the case of Compose, Whichever functionalities are required we simply include them, There’s no hierarchy.
Benefits of Composition over Views
Imagine a screen with a question and 4 answers that are displayed with different cards and a radio button. We’ll try to create this UI using both methods, using the view approach as well as using the compose approach.
👉View approach
Now, to define the UI for answers, we need to create a card and a radio button within that. we have to define every option. We also need to handle the UI for selected and unselected states and update them accordingly. So if a view is selected we want other views to be unselected as a side effect.
Having to manually update views when the state changes is error-prone.
It’s possible to forget to update a view with its dependent state. In cases like screen rotation, or configuration changes, we might forget to remember states.
Synchronizing state changes throughout the lifespan of an app is a recurring challenge working with views. This complexity problem also increases when the number of views and dependent states grows in the app.
It’s a solvable problem, but a common source of bugs.
👉Composable approach
Instead of defining XML, we’d define those elements directly in the code, in Kotlin. By doing this we don’t have to jump between XML and code as UI would’ve already been declared in the code
In compose, UI elements are functions and not objects. It means we can’t find the ref of them but call methods to mutate them
UI elements in compose are entirely controlled by the arguments that we pass. i.e. we’re passing the properties to the function to display that particular UI.
Now, imagine that in our radio button composable function, we’re passing false( as unselected). Another difference from the view is, If we tap the radio button it won’t be selected. Because we’re always passing false from the code regardless of user interaction.
But In view, the radio button state automatically changes due to the user event.
In conclusion, Jetpack Compose’s approach to composition offers a more flexible and maintainable way to build UIs compared to inheritance-based Views.
By composing functionalities instead of inheriting them, developers can create complex UI elements with ease.
We’ve explored the advantages of Jetpack Compose over the View system. Now, let’s see how Jetpack Compose leverages recomposition for dynamic UI updates. Head over to the final part of the series:
Appreciate this breakdown of Compose? Show some love with a 👏
