Unboxing Jetpack Compose: Experience My First Compose App
--
Introduction
What is Jetpack Compose?
In my words, it’s a revolutionary declarative way of creating (or should I say composing 😄) UI in Android using Kotlin. Until now, we created layouts using XML and never dared to create via code (except for custom views, no choice) due to its complexity, non-intuitiveness, and maintenance issues.
But now it’s different!
What is Declarative UI?
You know, imperative is like how you do something, and declarative is more like what you do, or something.
Doesn’t that make sense? It didn’t to me as well in the first go 😄. In my opinion, imperative is more like an algorithm to perform any operation step by step, and declarative is the code that is built using the algorithm, more to do what works.
In Android, we normally create an XML of a layout and then update (sync) each element every time based on the input received, business rules using findViewById/Kotlin Semantics/View Binding/ Data Binding 😅.
But with Compose, we simply write a function that has both elements and rules, which is called whenever information gets updated. In short, a part of the UI is recreated every time without performance issues.
This philosophy or mindset will in turn help you write smaller (Single Responsibility principle) and reusable functions.
Why is Compose Getting So Popular?
I’m not really sure, but out of the many awesome features, the ones I’ve loved most are:
1. Faster release cycle: Bi-weekly, so now there is a real chance that if you get any issue with composing, it can be fixed soon. Hopefully!
2. Interoperable: Similar to Kotlin, Compose is also interoperable with earlier UI design frameworks.
3. Jetpack library and material component built-in support: Reduce developer efforts and time in building beautiful UI with fewer lines of code ❤️.
4. Declarative UI: With a new way of building UI, we are now in harmony with all other major frontend development frameworks like SwiftUI, Flutter, and React Native, making it easier for the developer to use concepts/paradigms from other platforms.
Current state
As of 29th July, the first stable version was released 1.0, meaning Compose is production-ready.
Get Started with Compose
For using Compose, we need to set up a few things:
- Kotlin v1.5.10 and above, so let’s update our dependency in the project-level build.gradle file.
plugins {
id 'org.jetbrains.kotlin:android' version '1.5.10'
} 2. Minimum API level 21
android {
defaultConfig {
...
minSdkVersion 21
}3. Enable Compose
android {
defaultConfig {
...
minSdkVersion 21
} buildFeatures {
// Enables Jetpack Compose for this module
compose true
}
}
4. Others like min Java or Kotlin compiler and compose compiler
android {
defaultConfig {
...
minSdkVersion 21
}
buildFeatures {
// Enables Jetpack Compose for this module
compose true
}
...
// Set both the Java and Kotlin compilers to target Java 8.
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = "1.8"
}
composeOptions {
kotlinCompilerExtensionVersion '1.0.0'
}
}5. At last compose dependency for build UI
dependencies { implementation 'androidx.compose.ui:ui:1.0.0'
// Tooling support (Previews, etc.)
implementation 'androidx.compose.ui:ui-tooling:1.0.0'
// Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
implementation 'androidx.compose.foundation:foundation:1.0.0'
// Material Design
implementation 'androidx.compose.material:material:1.0.0'
// Material design icons
implementation 'androidx.compose.material:material-icons-core:1.0.0'
implementation 'androidx.compose.material:material-icons-extended:1.0.0'
// Integration with activities
implementation 'androidx.activity:activity-compose:1.3.0'
// Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
// Integration with observables
implementation 'androidx.compose.runtime:runtime-livedata:1.0.0'
}
Mindset
While composing UI, you need to unlearn various types of layouts and remember just one thing: Everything is a composition of rows and columns.
But what about ConstraintLayout, which makes life so easy and is very useful for building complex UI? We can still use it ❤️, but in a little different way.
First Compose Project — Tweet Details Screen
For our learning curve experience, I decided to re-create this screen in Compose.
So let’s get started.
Create a new project with Compose project as a template and open MainActivity.
If you don’t see the Compose project, then update Android Studio to the latest version.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeTweetTheme {
....
}
}
}
}Now to add a view to the UI, we need to create a function with @Composable annotation, which makes it a Compose function.
Creating our first layout of the view, toolbar
@Composable
fun getAppTopBar() {
TopAppBar(
title = {
Text(text = stringResource(id = R.string.app_name))
},
elevation = 0.dp
)
}To preview the UI rendered in Android Studio, we can use @Preview annotation.
TopAppBar is an inbuilt material component for adding a topbar to our application.
Let’s create a little more complex view, user profile view
As discussed earlier, in Compose, we have only rows and columns, so let’s break our UI 👇, where the red border represents columns and green is rows, and complete UI as a row in the screen.
So let’s create our compose function for user profile view with our root row.
You will notice the modifier argument in the Row function. This is the Compose way of adding formatting to the elements, which is uniform across all the elements.
Creating a round imageView is very simple now. No need for any library or XML drawable as an overlay.
Image(
painter = painterResource(id = R.drawable.ic_profile),
contentDescription = "Profile Image",
modifier = Modifier
.size(36.dp)
.clip(CircleShape)
.border(1.dp, Color.Transparent, CircleShape),
contentScale = ContentScale.Crop)
Again we have a modifier for updating our Image (AKA ImageView) with clip to make it rounded and contentScale to scale the image.
Similarly, adding a label will be a piece of cake now.
Text(text = userName, fontSize = 20.sp)Now let’s put it all together in rows and columns to complete the view.
@Composable
fun userProfileView(userName: String, userHandle: String) {
Row(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(all = 12.dp),
verticalAlignment = Alignment.CenterVertically
) {
Image(
painter = painterResource(id = R.drawable.ic_profile),
contentDescription = "Profile Image",
modifier = Modifier
.size(36.dp)
.clip(CircleShape)
.border(1.dp, Color.Transparent, CircleShape),
contentScale = ContentScale.Crop
)
Column(
modifier = Modifier
.padding(start = 12.dp)
) {
Text(text = userName, fontSize = 20.sp)
Text(text = userHandle, fontSize = 14.sp)
}
}
}Another great example is to create a Text Label with two styles. We know that traditionally doing that is very painful.
Let’s see the Compose way of doing it.
Text(
text = buildAnnotatedString {
withStyle(style = SpanStyle(fontWeight = FontWeight.ExtraBold)) {
append("3")
}
append(" ")
withStyle(style = SpanStyle(fontWeight = FontWeight.Normal)) {
append(stringResource(id = R.string.retweets))
}
},
modifier = Modifier.padding(end = 8.dp)
)
That’s it!! I hope you’ve seen the ease of use and benefit of using Compose for building UI.
Just remember everything in Compose is rows and columns, and the order of attributes matters. You can check out my Github repo complete example which also demonstrates the rendering of data using viewModel.
