Experiment with Android Jetpack Compose

Jetpack Compose is an unbundled toolkit designed to simplify UI development. It combines a reactive programming model with the conciseness and ease of use of the Kotlin programming language.

Let's get started:

Step 1: build.gradle inside app.

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-kapt'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.2"
    defaultConfig {
        applicationId "com.example.jetpackcomposedemo"
        minSdkVersion 23
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        targetCompatibility = 1.8
        sourceCompatibility = 1.8
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }
}

def compose_version = "0.1.0-dev01"

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.core:core-ktx:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

    **// jetpack compose libraries **
    kapt "androidx.compose:compose-compiler:$compose_version"
    implementation 'org.jetbrains.kotlin:kotlin-reflect:1.3.50'
    implementation "androidx.compose:compose-runtime:$compose_version"
    implementation "androidx.ui:ui-layout:$compose_version"
    implementation "androidx.ui:ui-foundation:$compose_version"
    implementation "androidx.ui:ui-framework:$compose_version"
    implementation "androidx.ui:ui-tooling:$compose_version"
    implementation "androidx.ui:ui-android-text:$compose_version"
    implementation "androidx.ui:ui-text:$compose_version"
    implementation "androidx.ui:ui-material:$compose_version"
    
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
}

Step 2: delete your 'layout' folder from res

Step 3: main.activity

package com.example.jetpackcomposedemo

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.Composable
import androidx.compose.state
import androidx.compose.unaryPlus
import androidx.ui.core.Text
import androidx.ui.core.dp
import androidx.ui.core.setContent
import androidx.ui.graphics.Color
import androidx.ui.layout.*
import androidx.ui.material.FloatingActionButton
import androidx.ui.material.MaterialTheme
import androidx.ui.text.TextStyle

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent { mainView() }
    }

    @Composable
    fun mainView() = MaterialTheme {
        val count = +state { 0 }

        FlexColumn {

            expanded(1F) {
                Center {
                    Column(
                        mainAxisAlignment = MainAxisAlignment.Center,
                        crossAxisAlignment = CrossAxisAlignment.Center
                    ) {
                        Text("Counter value: ${count.value}")
                    }
                }
            }

            inflexible {
                Row(
                    mainAxisSize = LayoutSize.Expand,
                    mainAxisAlignment = MainAxisAlignment.SpaceBetween
                ) {
                    Padding(padding = EdgeInsets(all = 16.dp)) {
                        FloatingActionButton(
                            text = "-", onClick = {
                                count.value--
                            },
                            textStyle = TextStyle(color = Color.White),
                            color = Color(getColor(R.color.colorPrimary))
                        )
                    }

                    Padding(padding = EdgeInsets(all = 16.dp)) {
                        FloatingActionButton(
                            text = "+", onClick = {
                                count.value++
                            },
                            textStyle = TextStyle(color = Color.White),
                            color = Color(getColor(R.color.colorPrimary))
                        )
                    }
                }
            }
        }
    }
}

Thats' it enjoy

You can also look into IOS SwiftUI.
SwiftUI - Simple State Management