Building Apps with Jetpack Compose

Wait, what, why? What is Jetpack Compose Now!!
Jetpack Compose is a modern toolkit for building native Android UI. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.
Jetpack Compose was announced at Google I/O’19. If you missed it, you can watch below:
Prerequisites, first.
To start with Jetpack Compose you need to keep a few things in your mind.
- You should have some experience in developing android applications irrespective of the framework.
- You should be comfortable with Object-Oriented Languages such as Java, C++ and especially with Kotlin.
- Jetpack Compose is currently in Developer Preview, so you require Android Studio 4.0 or higher to use it. Download it from here.
I don’t know Kotlin!?
Some of you, who may not have worked on Android would not have heard or played with Kotlin yet. So I’d recommend that before jumping straight to Compose, take a day or two out for Kotlin.
List of some resources that can help you —
https://kotlinlang.org/docs/tutorials/
Let’s Compose😍
First, create a new project in Android Studio(4.0) and select Empty Compose Activity in your Project Template.
Now delete everything from your MainActivity.kt except the import statements, and write down the below code.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Text(text = "Hello World")
}
}
}If you run the app now, you’ll see something like this

The “setContent” block contains a composable that defines the root of your Activity and so becomes the content of the activity.
Whats’s a Composable? 👀
Composable are basically functions that become the fundamental building block of our application. They may take input and decide what UI to show based on that input, thus describing our UI. Jetpack Compose basically uses these composable functions instead of XML layouts to define UI components.
Text Composable
Text(text = "Hello World")Text Composable is just a TextView where you can pass in a String for text parameter and also define the styling.
Text("Jetpack Compose", style = +themeTextStyle { h2 })Now that you know what a composable is, let’s try other composable functions. Since these composable are the building blocks for our app, it’s important to keep experimenting with them.
With Android Studio 4.0 and higher, we can immediately preview our Compose UI. Let’s take advantage of that and create a new Composable function inside MainActivity.kt
@Preview
@Composable
fun MyFirstComposable(){
Text(text = "Text 1")
}After adding this you’ll notice Android Studio asking you to Build & Refresh. Once you do it, you’ll see a preview of our composable function.

Toggle the View Options and check Show Decorations. You’ll now see the device view of our function. PS — If you remove the @Preview annotation you will not be able to preview your composable.
Let’s check Column now. Inside our function create a Column and add three Text components to it.
@Preview
@Composable
fun MyFirstComposable(){
Column {
Text(text = "Text 1")
Text(text = "Text 2")
Text(text = "Text 3")
}
}You can think of Column as a vertical linear layout. Similarly, for horizontal arrangement, we have the Row component. You must have guessed it’s pretty similar to how we declare UI in Flutter.
@Composable
fun MyFirstComposable() {
Row {
Text(text = " Text 1", style = +themeTextStyle { body1 })
Text(text = " Text 2", style = +themeTextStyle { body1 })
}
}You can also add Spacing to a Column or Row. If you want to wrap a component by Padding, you can do so like this -
@Composable
fun PaddedText() {
Padding(top = 16.dp, left = 16.dp, right = 16.dp) {
Text(
text = "Text With Padding",
style = TextStyle(color = Color.Green,fontSize = 20.sp)
)
}
}Similarly, you can add an image by using either DrawImage or SimpleImage component —
@Composable
fun ImageExample(context: Context) {
val img = imageFromResource(context.resources, R.drawable.ic_launcher_background)
DrawImage(image = img)
}Some of the other basic components are-
- Card
- Stack
- Container
- Wrap
- MaterialTheme
- VerticalScoller and so on..
Keep exploring the rest of the widgets and try to pick your favorite UI and replicate it. Try to break down the design into blocks and you’ll find Compose super helpful.
Other Resources on Compose
I’m listing some of the resources so that you can start with Compose in no time -
