JetPack Compose Introduction

What’s JetPack Compose?

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 is totally declarative programming, which means you can describe your user interface by invoking a set of composable.For past ten years we have been using a traditional way of imperative UI design.

mperative programming vs Declarative programming

Imperative UI This is the most common paradigm. It involves having a separate prototype/model of the application’s UI. This design focuses on the how rather than the what. A good example is XML layouts in Android. We design the widgets and components which are then rendered for the user to see and interact with.

Imperative UI sample code:

xml

<TextView
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
     />

Declarative UI This pattern is an emerging trend that allows the developers to design the user interface based on the data received. This on the other hand focuses on the what. This design paradigm makes use of one programming language to create an entire application.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text(text = "Hello World")
        }
    }
}

In JetPack Compose there is no need for any xml code. We can create views using composable.

Advantages of JetPack Compose

• It is very fast and offers a smooth performance.
• It’s simple to learn.
• It is possible to interoperate with an imperative approach.
• Offers a better way to implement loose coupling principles.
• It is 100% made in Kotlin which makes it a modern approach in Android development.

Composable Function

It’s same as any function in programming. But we need to annotate with @Composable annotation.

Syntax:

@Composable
fun MethodName(parameter: String) {
    //your content 
}
Example: 

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

In this example we created new composable function – Greeting(). We use the Text() as content. It’s an inbuilt composable function. We can add composable functions to another composable function.

After creating a composable function we can use it as content.

Sample Hello world App using Jetpack Compose:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting("World")
        }
    }
}
@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

Should I use Jetpack compose in my existing Android Studio?

If you are using stable version – Answer is No.

You need Android studio Beta Version. Beta version link here.

And also you need to add some dependencies for Jetpack Compose.

//compose_version = '1.0.2'
implementation 'androidx.activity:activity-compose:1.3.0-alpha06'
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.ui:ui-tooling:$compose_version"

Conclusion

We will see more composable functions in our upcoming tutorial.

Refer to the official tutorial page for some basic details about Jetpack Compose.