You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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?
Clone the project - git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-dice-roller.git
Run the project using a Pixel 6 emulator
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:
The text was updated successfully, but these errors were encountered:
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:
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:
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?
git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-dice-roller.git
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:
The text was updated successfully, but these errors were encountered: