Dice Challenge in Jetpack Compose

Building dice using nothing but basic components in Jetpack Compose. If you want to know where this idea came from, check out this article.

Before we get started, please take a couple of seconds to follow me and 👏 clap for the article so that we can help more people learn about this useful content.

Jumping straight to the code

The sides of the dice are built with their own individual views, for the sake of simplicity all the files have been added to the same code block below.

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun Dot() {
    Box(
        modifier = Modifier
            .size(20.dp)
            .clip(CircleShape)
            .background(Color.Green)
    ) {}
}

@Composable
fun Dice1() {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .border(width = 1.dp, color = Color.Green)
            .size(width = 190.dp, height = 190.dp)
    ) {
        Dot()
    }
}

@Composable
fun Dice2() {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .border(width = 1.dp, color = Color.Green)
            .size(width = 190.dp, height = 190.dp)
            .padding(12.dp)
    ) {
        Column {
            Row {
                Spacer(Modifier.weight(1f))
                Dot()
            }

            Spacer(Modifier.weight(1f))

            Dot()
        }
    }
}

@Composable
fun Dice3() {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .border(width = 1.dp, color = Color.Green)
            .size(width = 190.dp, height = 190.dp)
            .padding(12.dp)
    ) {
        Column {
            Dot()

            Spacer(Modifier.weight(1f))

            Row {
                Spacer(Modifier.weight(1f))
                Dot()
            }
        }

        Dot()
    }
}

@Composable
fun Dice4() {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .border(width = 1.dp, color = Color.Green)
            .size(width = 190.dp, height = 190.dp)
            .padding(12.dp)
    ) {
        Column {
            Row {
                Dot()
                Spacer(Modifier.weight(1f))
                Dot()
            }

            Spacer(Modifier.weight(1f))

            Row {
                Dot()
                Spacer(Modifier.weight(1f))
                Dot()
            }
        }

    }
}

@Composable
fun Dice5() {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .border(width = 1.dp, color = Color.Green)
            .size(width = 190.dp, height = 190.dp)
            .padding(12.dp)
    ) {
        Column {
            Row {
                Dot()
                Spacer(Modifier.weight(1f))
                Dot()
            }

            Spacer(Modifier.weight(1f))

            Row {
                Dot()
                Spacer(Modifier.weight(1f))
                Dot()
            }
        }

        Dot()
    }
}

@Composable
fun Dice6() {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .border(width = 1.dp, color = Color.Green)
            .size(width = 190.dp, height = 190.dp)
            .padding(12.dp)
    ) {
        Column {
            Row {
                Dot()
                Spacer(Modifier.weight(1f))
                Dot()
            }

            Spacer(Modifier.weight(1f))

            Row {
                Dot()
                Spacer(Modifier.weight(1f))
                Dot()
            }

            Spacer(Modifier.weight(1f))

            Row {
                Dot()
                Spacer(Modifier.weight(1f))
                Dot()
            }
        }
    }
}

When displaying all the sides of the dice at the same time, we use the following code.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.jpmtech.dicechallengecompose.ui.theme.DiceChallengeComposeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DiceChallengeComposeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting()
                }
            }
        }
    }
}

@Composable
fun Greeting() {
    Row(modifier = Modifier.padding(all = 8.dp)) {
        LazyColumn {
            items(1) {
                Dice1()
                Dice3()
                Dice5()
            }
        }
        LazyColumn {
            items(1) {
                Dice2()
                Dice4()
                Dice6()
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    DiceChallengeComposeTheme {
        Greeting()
    }
}

Don’t forget to add your solution in the comments and share it with all your friends who code.

If you got value from this article, please consider following me, 👏 clapping for this article, or sharing it to help others more easily find it.

If you have any questions on the topic or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it. If you want to learn more about native mobile development, you can check out the other articles I have written here: https://medium.com/@jpmtech. If you want to see apps that have been built with native mobile development, you can check out my apps here: https://jpmtech.io/apps. Thank you for taking the time to check out my work!