Android Jetpack Compose: Modern UI toolkit with Kotlin (Basic)

Android Jetpack Compose

What is a jetpack compose?

Android jetpack is a powerful toolkit to design an android native app without using XML. It means we are not more dependent on complex UI integration in android by binding XML files into our Activity/Fragments. We just need to design the whole app using this only.

Why do we work on the compose?

Jetpack compose simplifies the practice for design & UI development on Android. It quickly brings your app to develop with less code, accelerates development by removing boilerplate XML code, and intuitive Kotlin APIs & powerful.

Less Code means you need to write less code as compared to the previous approach where we have to write and manage multiple classes for code like Activity/Fragment & XML.
Now there is just a single class where we write all the UI & logic in one class using Kotlin only and very less code is required to create lists, animation, etc.

Accelerate Development means it is compatible with your current code and with the most popular libraries in android like ViewModel, Navigation, Coroutine, etc.
Also, it saves time by switching between the XML & Class for reviewing the code now we can see the design UI on the class where we are designing using compose preview method.

Intuitive Kotlin APIs mean it has declarative APIs. You just need to describe the UI compose will take care of the rest and it’s not tied with a specific Activity/Fragment that means this declare stateless component which is easy to use on multiple classes & easy to maintain, customize, etc

Powerful means we can create beautiful UI using compose where we get direct support of various APIs like Material Design, Animation, Layouts & Dark theme, etc.

Also, We can use jetpack compose along with our current project structure there is no limitation of use.

How to enable jetpack compose in our project?

There are two ways to enable jetpack compose into the existing project.

The easiest method for existing projects
Step 1:
In the project window, right click on the package you want to include the compose activity -> compose -> Empty compose activity.

OR

File -> new -> compose -> Empty compose activity.

Add Empty Compose Activity

Step 2:
A dialog window will get displayed and you just need to fill in the detail and click on the finish button.

Compose Activity Dialog

That's it!

Manual configuration for existing projects

Step :1
Use the latest version of kotlin and gradle plugins in your project/build.gradle file.

plugins {
    id 'com.android.application' version '7.3.0' apply false
    id 'com.android.library' version '7.3.0' apply false
    id 'org.jetbrains.kotlin.android' version '1.6.10' apply false
}

In your project/app/build.gradle, add the following

android {
    namespace 'com.maraj.composedemo'
    compileSdk 33

    defaultConfig {
        minSdk 23
        targetSdk 33
        //....
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.1.1'
    }
    //....
}

dependencies {

    implementation 'androidx.core:core-ktx:1.9.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
    implementation 'androidx.activity:activity-compose:1.6.0'
    implementation "androidx.compose.ui:ui:$compose_ui_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_ui_version"
    implementation 'androidx.compose.material:material:1.2.1'
}

Step 2:
Add the jetpack compose Activity into the project by extending a class with AppCompatActivity .

Step 3:
Add compose activity into your manifest file as we were adding a normal activity

Let’s start with some code :)

Before starting the code first look into some basic things which we will use in the code as we need to use Composable annotation for defining a view & Preview annotation will be used to display the draw view at compile time.

@Composable functions are the fundamental building blocks of an application built with Compose. These functions help you to design your UI programmatically.
Composable can be applied to a function or lambda to indicate that the function/lambda can be used as part of a composition to describe a transformation from application data into a tree or hierarchy.
To make a function composable, add the @Composable annotation. To try this out, define a Greeting function that is passed a name, and uses it to configure the text element.

Composable function always be start with capital latter

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

@Preview can be applied to Composable methods with no parameters to show them in the Android Studio preview.@Preview annotation lets you preview your composable functions within Android Studio without having to build and install the app to an Android device or emulator
The annotation contains a number of parameters that allow defining the way the Composable will be rendered within the preview.
The passed parameters are only read by Studio when rendering the preview.

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

Android studio preview

And the setContent block defines the activity's layout where composable functions are called. Composable functions can only be called from other composable functions.

And Tha’s all about the basics of jetpack compose.

Thank you, and feel free to add comments for questions and suggestions. I will try my best to improve it.