Jetpack Compose Android

Jetpack compose a new declarative UI toolkit. Using Jetpack compose we build native UI. Before Jetpack Composes we are using XML layout to build the UI which was the imperative approach. It's a traditional way of building UI as now we have jetpack compose that much faster or better than XML.  

Features of jetpack compose - 
 

1.  No more XML, just one language Kotlin.
2.  Fewer lines of code rather than XML.
3.  Accelerate Development. 
4.  Powerful and fast.

Note - You have must latest android studio Chipmunk or minimum android Canary. And you will have to update your existing android studio. 

Steps of Jetpack Compose

1.  Open Android Studio and Create a New project. First, click File then click New -> New Project.
2.  Select Empty Compose Activity then Enter a unique package name then click Finish. 
3.  Main Activity of Jetpack compose 
4.  Basic introduction of SetContent, Surface, Composable Function, and Preview. 

1. Open Android Studio and Create a New project. First, click File then click New -> New Project.

2. Select Empty Compose Activity then Enter a unique package name then click Finish. 

3. Main Activity of Jetpack compose 

package com.example.firstjetpackcomposeapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.firstjetpackcomposeapplication.ui.theme.FirstJetpackComposeApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            FirstJetpackComposeApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier
                        .fillMaxHeight()
                        .fillMaxWidth(),
                    color = MaterialTheme.colors.background
                )
                {
                    Greeting("Oodles Technologies Pvt Ltd")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(1.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Hello $name",
            fontSize = 25.sp,
            color = colorResource(id = R.color.purple_700)
        )
    }


}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    FirstJetpackComposeApplicationTheme {
        Greeting("Oodles Technologies Pvt Ltd")
    }
}

4.1 SetContent

Previously we were using the setContentView Function to set an XML layout file to our activity. But This time we are using the setContent Function because we are working with the jetpackCompose. Inside this function, we are passing a trailing lambda as an argument. This means we can pass a composable function to this setContent. The Composable Function is a function that is annotated with @Composable. We have FirstJetpackComposeApplicationThem is a composable function.

4.2 SurFace 

In the previous, we have a Linear layout and constraint layout. Inside that, all have our child components Like Text View and Image View. So the Constraint or Linear layout whatever you are using acts as a container to contain all the chile components and the same way we use the surface with jetpack compose. So instead of my Greeting function, we need to write the Surface function. In the surface pass the parameter modifier provide the fillMaxHeight and FillMaxWidth. Inside that surface we have text.  FillMaxWidth and FillMaxHeight Same as width -> match_parent and height -> match_parent.   

4.3 Composable Function 

If you want to create a Composable function you need to annotate your function with @Compposable annotation and then you can create a function for your function. Can accept any number of arguments and inside your composable function, you can use other comparables. For Example. we are using the text this is a composable function. This text equivalent with XML TextView. So we have predefined composable functions for text views, image views, buttons, etc. Those are equivalent to composable functions. And Naming convention of the composable function starts with a capital letter.

4.4 Preview

Now you can easily preview your compressible function and as you can see we are getting a preview here. In Code Editor split as we had with android XML. now we have code mode we have split and we have design mode. So to see the preview you need to create one more function and you need to annotate this function with @Preview. Then only you can see the only preview. Inside the preview function, we have another predefined composable function. that is FirstJetpackComposeTheme and it accepts a trailing lambda. after that inside lambda, we are calling our custom composable function like Greeting. 

If you want to learn more about jetpack compose check this link -> Jetpack Compose