# Unboxing Jetpack Compose: My First Compose App

# Introduction 

### What is Jetpack Compose?

As per Google, *“Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs”.*

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:

 1. Kotlin v*1.5.10* and above, so let’s update our dependency in the project-level `build.gradle` file.

    ```kotlin
    plugins {
            id 'org.jetbrains.kotlin:android' version '1.5.10'
    } 
    ```

2. Minimum  *API level 21*

    ```kotlin
    android {
         defaultConfig {
             ...
             minSdkVersion 21
        }
    }    
    ```

3. Enable Compose 

    ```kotlin
        android { 

            defaultConfig {
                ...
                minSdkVersion 21
            }

            buildFeatures {
                // Enables Jetpack Compose for this module
                compose true
            }
        }
    ```
    
4. Others like min Java or Kotlin compiler and compose compiler

    ```kotlin
        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

    ```kotlin
        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.

```kotlin
    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

```kotlin
    @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.

```kotlin
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.

```kotlin
     Text (text = userName, fontSize = 20.sp)
```

Now let’s put it all together in rows and columns to complete the view.

```kotlin
@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, fontWeight = FontWeight.Bold)
            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.

```kotlin
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`.

>If you have questions, please head to our developer community website where the MongoDB engineers and the MongoDB community will help you build your next big idea with MongoDB.