Create an interactive Dice Roller app: Android Basics with Compose

[stevenbertolucci]

URL of codelab Link to Code Lab

In which task and step of the codelab can this issue be found? The mistake is happening in Task 3 of the "Create the layout infrastructure" and the section it is happening is in Step 3 of "Add a modifier section".

Describe the problem The mistake is that it started off in Step 3 with "chaining a fillMaxSize() method onto the Modifier object so that the layout fills the entire screen." This part works fine, but here is the problem. Right after that, in Step 4, I am supposed to "chain the wrapContentSize() method onto the Modifier object and then pass Alignment.Center as an argument to center the components". Then there is a screenshot of the code preview in the codelab:

 DiceWithButtonAndImage(modifier = Modifier
    .fillMaxSize()
    .wrapContentSize(Alignment.Center)
)

The codelab then says my preview is supposed to look like this:

But, my actual preview on my machine looks like this:

I found out that the chaining the wrapContentSize() method is supposed to be in the Column function.

Here is my chunk of code that fixed the layout of the app:

@Preview
@Composable
fun DiceRollerApp() {
    DiceWithButtonAndImage(modifier = Modifier
        .fillMaxSize()
        //.wrapContentSize(Alignment.Center)   <-- This is wrong. I commented it out
    )
}

@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
            .wrapContentSize(Alignment.Center),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(imageResource),
            contentDescription = result.toString()
        )

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

        Button(onClick = { result = (1..6).random() }) {
            Text(
                text = stringResource(R.string.roll),
                fontSize = 16.sp)
        }
    }
}

The wrapContentSize() method is supposed to go in the column function inside the DiceWithButtonAndImage function as you can see in my code above.

Steps to reproduce?

1. Clone the project - git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-dice-roller.git
2. Run the project using a Pixel 6 emulator
3. See the incorrect layout positioning of the dice image and button. Both the image and button is towards the top of the screen.

Versions Android Studio version: 2024.1.1 API version of the emulator: Pixel 6 API 34

Additional information Again, this is what the codelab expects me to have my preview look like after running the code:

What I got instead when I ran the exact same code:

After updating my code to move wrapContentSize() method to the column function inside the DiceWithButtonAndImage function, my preview now looks like this: