sandhya bhat's Blog
Basics of Jetpack Compose - 1

Photo by Kelly Sikkema on Unsplash

Basics of Jetpack Compose - 1

sandhya bhat's photo
sandhya bhat
·

3 min read

Table of contents

What is Jetpack Compose?

Jetpack compose is Android's modern toolkit for developing the UI. It makes building the UI faster and easier. With less code and powerful intuitive Kotlin APIs you can build beautiful UIs for the native android apps.

How to Setup Compose for an existing app?

Step1: Add below configurations to your app's build.gradle file:

 buildFeatures {
        compose = true
    }
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.1"
    }

Note: kotlinCompileExtensionVersion defined under composeOptions is linked to Kotlin versioning. So choose the version of the library that matches your project's Kotlin version by referring to compatibility map.

Step 2: Add compose BOM (Bill of Materials) and library dependencies as per your need from the below block.


dependencies {

    val composeBom = platform("androidx.compose:compose-bom:2024.02.00")
    implementation(composeBom)
    androidTestImplementation(composeBom)

    // Choose one of the following:
    // Material Design 3
    implementation("androidx.compose.material3:material3")
    // or Material Design 2
    implementation("androidx.compose.material:material")
    // or skip Material Design and build directly on top of foundational components
    implementation("androidx.compose.foundation:foundation")
    // or only import the main APIs for the underlying toolkit systems,
    // such as input and measurement/layout
    implementation("androidx.compose.ui:ui")

    // Android Studio Preview support
    implementation("androidx.compose.ui:ui-tooling-preview")
    debugImplementation("androidx.compose.ui:ui-tooling")

    // UI Tests
    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
    debugImplementation("androidx.compose.ui:ui-test-manifest")

    // Optional - Included automatically by material, only add when you need
    // the icons but not the material library (e.g. when using Material3 or a
    // custom design system based on Foundation)
    implementation("androidx.compose.material:material-icons-core")
    // Optional - Add full set of material icons
    implementation("androidx.compose.material:material-icons-extended")
    // Optional - Add window size utils
    implementation("androidx.compose.material3:material3-window-size-class")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.8.2")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
    // Optional - Integration with LiveData
    implementation("androidx.compose.runtime:runtime-livedata")
    // Optional - Integration with RxJava
    implementation("androidx.compose.runtime:runtime-rxjava2")

}

How Compose is different from traditional XML approach?

In XML approach UI is built by instantiating the tree of widgets. XML layout file is inflated and each widget in the layout maintains its own state. App logic uses getter and setter methods to interact with the widgets.

In Compose, composable functions are used to construct the UI. They are Kotlin functions with @Composable annotation. These functions programatically describe how the app's UI should look. Here app logic responds to user events by calling composable functions with different parameters, which in turn would change the states of the concerned widgets.

Examples

Now that we have fair idea about Jetpack Compose, let us see some examples to get the look and feel of working with Compose.

  1. Display simple text on the screen
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeTrainingTheme {
                Text("Hello, Welcome to Jetpack Compose")
            }
        }
    }
}

In the above example, Text composable function which is defined by the Compose UI library displays a text label on the screen.

  1. Define a composable function.

     class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
             JetpackComposeTrainingTheme {
                DisplayWelcomeMessage("Jetpack Compose")
             }
         }
     }
 }

 @Composable
 fun DisplayWelcomeMessage(name: String){
     Text(text = "Welcome to $name!")
 }

    1. Preview your function in Android Studio by adding @Preview annotation

      1. Change text color, background color and text size as below.

         @Composable
 fun DisplayWelcomeMessage(name: String){
     Text(text = "Welcome to $name!",
         color= Color.Blue,
         fontSize = 50.sp,
         modifier = Modifier.background(
             color = Color.Gray
         ))
 }

Conclusion

Jetpack Compose indeed seems to be easier and faster as it claims. We will explore it further in the upcoming articles to build some interesting UIs.

2Articles1WeekAndroidJetpack Compose