Android Jetpack Compose basic tutorial with example
Android Jetpack Compose basic tutorial with example

Hi Guys Welcome to Proto Coders Point, In this android tutorial we will learn about android jetpack compose and will build an simple app using state management (MutableState) in jetpack that will update UI when State or Variable value changes on button click.

Android Jetpack Compose tutorial – A declarative UI Toolkit

What is Android Jetpack Compose?

A Jetack compose is an modern toolkit by using which we can build Native android UI Application, It’s based on the declarative programming model, so all you need is to simply describe how you app UI should look like and the compose will take care of rest app state changes, and UI gets Automatically Changed.

What we mean by declarative UI?

Declarative UI means developer can design the UI by the means of Programming Code, This Android Jetpack compose is been inspired by React.js and Flutter development.

Why Compose Jetpack?

Easy way to Explain you :

Whenever we design a screen in android we are making us of XML to create UI design & then giving functionality to the UI using code in Java or kotlin.

  • Less Lines of Code
  • No XML Needed

When we use Android JetPack compose there is no need  to write XML UI Files, we just need to write the whole UI Code in Kotlin language itself.

Building Block of jetpack

  1. Composable
  2. Model
  3. Preview

If you are designing a UI using jetpack compose, then you are basically writing function by making use of @Composable,

Then to check of the preview display of your android application UI design in android studio preview section you just need to add @Preview on top of @Composable.

A Composing is a function whatever we write in it get printed on the mobile screen as a widget view.

Note: As in Flutter all every think is a widget likewise in android jetpack every view is an widget

For Now Android-Studio Stable version does not support Jetpack Compose so you need to make use of Android Studio Canary version

Download Canary version from here https://developer.android.com/studio/preview?authuser=1

Project Creation

Start Android-Studio and

Create a new Android project and in Templete section select “Empty Compose Activity”  then finish to build a project

Now, Let’s go into build.gradle file & check what new is been added for Jetpack Compose project

As you can see in below screenshot of build.gradle file every thing is same as in normal android project except, you can see highlighted, there are new thing that are integrated.

There are 2 new thing you would see in this gradle file

the first is buildFeature with compose as true

the second there are 3 new dependencies added.

jetpack compose build.gradle

 

Android jetpack android example – Increment number on Button Click

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import android.text.Layout
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.Column
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.state
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.unit.TextUnit
import androidx.ui.tooling.preview.Preview
import com.example.myapplication.ui.MyApplicationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme() {
                MyApp()
            }

        }
    }
    @Preview
    @Composable
    private fun MyApp() {
       setupStateUsingState()

    }

    @Composable
    private fun setupStateUsingState() {

        Column {

            //Using MutableState in Compose
            var counterState: MutableState<Int> = state { 0 }

            TopAppBar(
                    title = { Text(text = "State Management") }
            )

            Text(
                    text = "Clicked:  ${counterState.value}",color = Color.White,fontSize = TextUnit.Sp(20)//set new value
            )
            Button(onClick = {
                //update value
                counterState.value +=1

            }) {
                Text(text = "Click to Add by +1")
            }
        }

    }
}

Output

jetpack compose state management tutorial output

As you can see in above kotlin code,

I have created a @Composable function by name “MyApp()” and this in turn calls another Composable function names “setupStateUsingState()”

It has a Column widget which has 3 children, i.e TopAppBar, Text, and a Button

Then, I have variable of MutableState dataType Int initial value is set to 0.

And The value is printed into Text Widget.

whenever user clicks on button the variable counterState gets incremented by +1 and the changed value is printed on the screen.

Any Question/Query please do comment below

Thank You