Android Jetpack Compose introduction and started with Hello layout

Hello all,

In this article, we are going to explore the new Jetpack Compose library which is used to design the android user interface smartly. 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.

Use Android Studio with Jetpack Compose:

For the best experience developing with Jetpack Compose, you should download Android Studio Arctic Fox. That’s because when you use Android Studio to develop your app with Jetpack Compose, you can benefit from smart editor features, such as New Project templates and the ability to immediately preview your Compose UI.

Setup And Dependencies:

Include Jetpack Compose toolkit dependencies in your app’s build.gradle file, as shown below:

// Integration with activities
   implementation 'androidx.activity:activity-compose:1.3.1'
   // Compose Material Design
   implementation 'androidx.compose.material:material:1.0.5'
   // Animations
   implementation 'androidx.compose.animation:animation:1.0.5'
   // Tooling support (Previews, etc.)
   implementation 'androidx.compose.ui:ui-tooling:1.0.5'
   // Integration with ViewModels
   implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
   // UI Tests
   androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.5'

And You need to enable compose feature.

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.5'
    }
}

You are almost done for setup. Now let’s implement our first screen with MainActivity with simple textview with hello android. In old style we are typically set using the setContent(R.id.activity_main) method to interact with xml view. But in Compose we need to write the setContent block to defines the activity’s layout. We represent a Composable function by annotating it with the @Composable annotation. Composable functions can only be called from within the scope of other composable functions.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.sunil.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApplicationTheme {
        Greeting("Android")
    }
}

In android studio, we can show see the default preview by clicking on switch code +preview on split tab. For this screen it will be look like that.

Now let’s run the app and show the output of our launch screen.

That is for today. You also read the article for how to use the App Theme for support the dark mode as well as Light mode. We can explore more design stuff of Compose in our next article. Thank you for reading this article. Please share you valuable suggestion in comment box. Happy Coding.