If you are an android developer then surely you are making your UI in an XML file and then attach it to the java file or Kotlin file using the setContentView() method.

So, to overcome this separation android provides the new feature which is “Jetpack compose”.

With the help of the jetpack compose library we can easily construct our UI in a declarative manner(you describe what it should be like)rather than in an imperative manner(you code the steps to create it). 

The official definition of jetpack compose is : 

“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.”

If you have ever worked on a flutter framework in which we use widgets to create our UI, Jetpack compose is almost the same as flutter in which we create UI using composable functions and views.

but for working on jetpack compose there is one prerequisite that you have to follow :

i) If you want to use Jetpack Compose with Android Studio, you must use Android Studio Canary 4.1 or higher, and then you are good to go.

Let’s see how we can use jetpack compose in our projects:

you have to follow the below steps to achieve this : 

i) Add google() to the project’s build.Gradle file.

allprojects {

     repositories {

         google()

         jcenter()

maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }

     }

}

 

ii) upgrade your gradle tools and kotlin plugins

dependencies {

        classpath 'com.android.tools.build:gradle:4.0.0-alpha01'

        classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.60-eap-25'

    }

 

— The written versions might be changed when you are reading this so please change the versions to the latest version.

iii) Then you have to enable "compose" and set java and Kotlin compilers to java 8 by just copy and paste the below code 

buildFeatures {

        // Enables Jetpack Compose for this module

        compose true

    }

    compileOptions {

        sourceCompatibility JavaVersion.VERSION_1_8

        targetCompatibility JavaVersion.VERSION_1_8

    }

 

iv) and the last one add the jetpack dependencies :

      implementation "androidx.compose:compose-runtime:0.1.0-dev02" 

      implementation "androidx.ui:ui-core:0.1.0-dev02" 

      implementation "androidx.ui:ui-layout:0.1.0-dev02" 

      implementation "androidx.ui:ui-framework:0.1.0-dev02" 

      implementation "androidx.ui:ui-material:0.1.0-dev02" 

      implementation "androidx.ui:ui-foundation:0.1.0-dev02" 

      implementation "androidx.ui:ui-text:0.1.0-dev02" 

      implementation "androidx.ui:ui-tooling:0.1.0-dev02"

//same change the version to its latest version accordingly.

**** At this step you have successfully integrated jetpack compose on your project. So now let’s make a hello world app in jetpack compose.

*** Go to your MainActivity onCreate() method and add the below code :

override fun onCreate(savedInstanceState: Bundle?) {

     super.onCreate(savedInstanceState)

     setContent {

         makeHelloWorldUi() 

     }

}

@Composable

fun Greeting() {

     Text(text = "Hello World")

}

// Here you can see we haven’t use setcontentview() method in onCreate() to add our layout files. It’s because here we are not required to use layout XML files instead we use the setContent method to add all our views to UI.

and the setContent method is a composable function.

Now, what are composable functions?

==> Composable function is nothing but a normal function. We can make any function composable by adding the annotation “@Composable” but we can call Composable only from the composable function itself. Jetpack compose uses a composable function to make UI hierarchy that’s why it is compulsory to make composable function.

// You can also use many views like Columns, Rows, … according to your requirement.

So, This is all about the start of jetpack compose, if you want to deep dive into it please check out the official docs of jetpack compose by this URL : 

https://developer.android.com/jetpack/compose

Happy coding 🙂