Build a Dice Roller App | Android Studio + Jetpack Compose (Beginner Tutorial)

In this video, we build a complete Dice Roller App using Jetpack Compose in Android Studio. This beginner-friendly project helps you understand how state works in Android apps and how to create interactive UI elements. Official Codelab Link: https://developer.android.com/codelabs/basic-android-kotlin-compose-build-a-dice-roller-app Code:- package com.example.diceroller import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.material3.Button import androidx.compose.material3.Scaffold import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.material3.rememberDrawerState import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.example.diceroller.ui.theme.DiceRollerTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() setContent { DiceRollerTheme { Surface( modifier = Modifier.fillMaxSize() ) { DiceRollerApp() } } } } } @Preview(showBackground = true) @Composable fun DiceRollerApp() { DiceWithButtonAndImage(modifier = Modifier .fillMaxSize() .wrapContentSize(Alignment.Center) ) } @Composable fun DiceWithButtonAndImage(modifier: Modifier = Modifier) { var result by remember { mutableStateOf(1) } val imageResource = when (result) { 1 - R.drawable.dice_1 2 - R.drawable.dice_2 3 - R.drawable.dice_3 4 - R.drawable.dice_4 5 - R.drawable.dice_5 else - R.drawable.dice_6 } Column( modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally ) { Image( painter = painterResource(imageResource), contentDescription = result.toString() ) Button( onClick = { result = (1..6).random() }, ) { Text(stringResource(R.string.roll), fontSize = 24.sp) } } } This video is part of the Android Development for Beginners series. 👍 Like the video 💬 Comment your dice number below 🎲 🔔 Subscribe for more Android projects Let’s build real Android apps together.