vmodal_ai

Posted on Aug 3

Build a Counter App in Kotlin with Jetpack Compose: Beginner Android Tutorial

#android #kotlin #jetpackcompose #counter

Jetpack Compose is Google's modern toolkit for building Android user interfaces using Kotlin. Unlike traditional XML layouts, Compose allows you to create UI components directly with Kotlin code.

In this beginner tutorial, we will build a simple Counter App using Jetpack Compose and learn:

Creating a Compose UI
Managing state
Handling button clicks
Updating UI dynamically

What is Jetpack Compose?

Jetpack Compose is a declarative UI framework for Android.

In traditional Android development:

XML Layout → Find Views → Update UI

With Compose:

Kotlin Code → State Changes → UI Updates Automatically

You describe what the UI should look like, and Compose handles updating it.

Step 1: Create a Jetpack Compose Project

Open Android Studio:

Select New Project
Choose Empty Activity
Select Kotlin
Make sure Jetpack Compose is enabled
Click Finish

Android Studio will create a Compose-ready project.

Step 2: Create the Counter UI

Open MainActivity.kt.

Replace the existing code with:

package com.example.counterapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview

class MainActivity : ComponentActivity() {

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

        setContent {

            CounterApp()

        }
    }
}

setContent() is where we define our Compose UI.

Step 3: Create a Composable Function

A Composable function creates UI components.

Create a function called CounterApp.

@Composable
fun CounterApp() {

}

The @Composable annotation tells Compose that this function describes UI.

Step 4: Add Counter State

A UI needs data that can change.

Create a counter variable:

var count by remember {
    mutableStateOf(0)
}

Here:

remember keeps the value during recomposition.
mutableStateOf tells Compose that the value can change.
When the value changes, Compose updates the UI automatically.

Step 5: Create the Layout

Use Column to arrange items vertically.

Column(
    horizontalAlignment = Alignment.CenterHorizontally
) {

}

Add required imports:

import androidx.compose.foundation.layout.*
import androidx.compose.ui.Alignment

Step 6: Display the Counter Value

Add a Text component:

Text(
    text = "Count: $count",
    style = MaterialTheme.typography.headlineLarge
)

The UI automatically updates whenever count changes.

Step 7: Add Increment Button

Create a button:

Button(
    onClick = {
        count++
    }
) {

    Text("Increment")

}

Every click increases the counter value.

Step 8: Add Reset Button

Add another button:

Button(
    onClick = {
        count = 0
    }
) {

    Text("Reset")

}

Complete Counter App Code

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.tooling.preview.Preview


class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContent {

            CounterApp()

        }
    }
}


@Composable
fun CounterApp() {

    var count by remember {
        mutableStateOf(0)
    }


    Column(

        modifier = Modifier
            .fillMaxSize(),

        verticalArrangement = Arrangement.Center,

        horizontalAlignment = Alignment.CenterHorizontally

    ) {


        Text(

            text = "Count: $count",

            style = MaterialTheme
                .typography
                .headlineLarge

        )


        Spacer(
            modifier = Modifier.height(20.dp)
        )


        Button(

            onClick = {

                count++

            }

        ) {

            Text("Increment")

        }


        Spacer(
            modifier = Modifier.height(10.dp)
        )


        Button(

            onClick = {

                count = 0

            }

        ) {

            Text("Reset")

        }

    }
}

Understanding Recomposition

When the button is clicked:

Button Click
     |
     ↓
count++
     |
     ↓
State Changes
     |
     ↓
Compose Recomposition
     |
     ↓
UI Updates

You don't manually call functions like:

textView.text = "New Value"

Compose handles UI updates automatically.

Preview Your UI

Compose provides a preview feature.

Add:

@Preview
@Composable
fun CounterPreview(){

    CounterApp()

}

You can see your UI directly inside Android Studio.

Common Compose Concepts Used

Concept	Purpose
`@Composable`	Creates UI functions
`remember`	Stores state
`mutableStateOf`	Observable state
`Column`	Vertical layout
`Text`	Displays text
`Button`	Handles clicks
`Spacer`	Adds spacing

Next Steps

After creating this simple counter app, try adding:

Save counter value using DataStore
Add ViewModel architecture
Use StateFlow for state management
Create a Material 3 UI
Add animations
Build a Todo application

Conclusion

Jetpack Compose makes Android UI development faster and cleaner by allowing developers to build interfaces using Kotlin instead of XML.

The Counter App is a simple project, but it introduces important Compose concepts like state management, recomposition, and declarative UI.

Learning these basics will help you build modern Android applications using Kotlin and Jetpack Compose.

SDK Flutter: https://github.com/v-modal/vmodal_sdk_flutter
SDK Android: https://github.com/v-modal/vmodal_sdk_android
Discord: https://discord.gg/K72z28KUx

kotlin android jetpackcompose mobiledevelopment tutorial

DEV Community