Android Jetpack Compose Explained

http://unsplash.com/&utm_source=slidescarnival

The business logic in android applications as regards to the change in views has been all about changing stateful views manually. This means that as the app changes, the UI hierarchy is updated manually to display the current data. Commonly referred to as, changing the internal state of a widget.

Breaking it down further, Singh’s article explains a state as an object which contains certain data that is mapped to one or many widgets. Using the value from the state object we can update the data shown in the widgets. The value of the state can change during the runtime, and this will help us to update the widget with the updated data.

Here’s an example of a manual change of a TextView Widget (state widget) to a different background.

class MainActivity : AppCompatActivity() {
   lateinit var textView: TextView
   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
      title = "KotlinApp"
      textView = findViewById(R.id.textView)
      textView.setOnClickListener {
         if (Build.VERSION.SDK_INT < 23) {
            textView.setTextAppearance(applicationContext,     R.style.boldText)
         }
         else {
            textView.setTextAppearance(R.style.boldText)
         }
      textView.setBackgroundResource(R.color.highlightedTextViewColor)
      }
   }
}

We now see a recent trend toward reactive programming which solves this particular challenge of manually changing a stateful view within an Android application. Also, explaining why there has been a switch from the conventional system design architectures like MVC/MVP to a more reactive MVVM and MVI approach.

Introducing Jetpack Compose… Jetpack Compose was developed as a way to improve the way Android Engineers design user interfaces, making them easier and quicker to write and run.

PS: Jetpack Compose is not Jetpack — Jetpack comes with several separate libraries and resources that help Android developers architect the app and handle the data that it uses and the displays.

Why Jetpack Compose?

A composition is a tree-structured set of the composables that make up your user interface. Running composables produces a composition, which defines the user interface. So when the composables that might have changed in response to state changes are recomposed, this event is action recompostion.

For example, when a composable function displays a button and each time the button is clicked, a caller updates the value of clicks.
Meaning, every time a click event happens, the text function is reused to display the new text with an updated value.

In the long run, recomposing the entire UI tree can be computationally expensive, which uses computing power and battery life. As a result, Jetpack Compose uses an intelligent recomposition tree to solve this problem. One composable function can be used for several state views.

3 reasons to use Jetpack Compose

1. Fewer redundant options for a single solution. Less code for creating entire layouts
2. Clear state of ownership and event flow in UI models.
3. It’s easy to update (It’s all Kotlin) and easy to test.

Here are some easy steps to get you started. You can also find other sample applications using Jetpack Compose here.

Get Started

• Install Android Studio Canary - Canary version gets all the newest releases (including stable).
• Open the app/build.gradle file and in following lines of code in each block as shown.

buildFeatures {
    compose true
}
composeOptions {
     kotlinCompilerExtensionVersion "${compose_version}"
}
dependencies {
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.activity:activity-compose:1.3.0-alpha05"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling:$compose_version"
}

• Replace the existing call setContentView() in MainActivity.kt to refer to the composable functions.

setContent {
    MaterialTheme {
     Greeting(name = "compose")
    }
}

• Finally, apply the @Composable annotation to the feature name to make it composable.

For a more detailed explanation of the setup process, use the official documentation by Google.

All the best as you explore Jetpack Compose!

Thank you David Odari for all the help in putting this together.