![]() ![]() This creates a new dice_images folder that contains 6 dice image files, displaying the dice values from 1 to 6. Double-click the zip file to unpack it.Locate the file on your computer (likely in the Downloads folder).Open this URL to download a zip file of dice images to your computer.In this task, you'll download some dice images and add them to your app. This change will be made in the Kotlin code. Don't worry about this warning for now because later in the codelab, you will be setting the content description of the ImageView based on what dice image you're displaying. You may notice a warning on the ImageView in the Component Tree that says to add a content description to your ImageView. This centers the ImageView vertically in the ConstraintLayout.Īll the warnings about constraints should now be gone.Īfter all that, the Design view should look like this, with the ImageView in the center and the Button just below it. Now select the ImageView again and add a vertical constraint connecting the bottom of the ImageView to the bottom of the parent.The Button will slide up beneath the ImageView. Add a vertical constraint to the Button, connecting the top of the Button to the bottom of the ImageView.The ImageView will slide up to the top of the ConstraintLayout. Add a vertical constraint to the ImageView, connecting the top of the ImageView to the top of the parent.This will horizontally center the ImageView within the parent. Connect the right side of the ImageView to the right edge of the parent.Connect the left side of the ImageView to the left edge of the parent ConstraintLayout. Add horizontal constraints to the ImageView.You need to vertically center the ImageView in the screen, regardless of where the Button is located. Now you need to position the ImageView and the Button below it. ![]() The Button is not vertically constrained because you removed the TextView below which it was originally positioned. The Button is not vertically constrained, and the ImageView is neither vertically nor horizontally constrained. In the Component Tree, you will notice two errors.The Design view of your app should look like this. This is the temporary image you will use until you add the dice images in the next task. In the Pick a Resource dialog, select avatars under Sample data.Drag an ImageView from the Palette onto the Design view, positioning it above the Button.Ignore the warning on the Button for now.Right-click and choose Delete or press the Delete key.In that case, you can select a View by selecting it in the Component Tree instead. Tip: As you add more UI components and are adding and removing constraints, you may temporarily find one View overlapping another, making it hard to select the one in the back. In the Layout Editor, select the TextView in the Component Tree.Open activity_main.xml ( app > res > layout > activity_main.xml).You can use the solution code or the code you created. Open and run the Dice Roller app from the previous codelab in Android Studio.In this task, you'll replace the TextView in your layout with an ImageView that displays an image of the dice roll result. Internet connection to download the dice images.A computer with Android Studio installed.Dice Roller Android app that has a Button to roll a dice and update the image on the screen.How to customize your app behavior based on different conditions (using a when statement).How to update an ImageView while the app is running.Able to add image resources to an Android app.Able to add a click listener to a Button.Able to update the UI of the app based on user input (modifying the MainActivity.kt file).Able to write control flow statements ( if / else, when statements).Completed the Create an interactive Dice Roller app codelab.To write code for which dice image to use, you will be using a when statement in Kotlin. You will be provided with a link to download the dice images, and you will add them as resources in your app. It will be a much more visual and enhanced user experience for your app. Instead of displaying the value of the dice roll in a TextView, your app will display the appropriate dice image for the number of sides that was rolled. Be sure to complete the earlier codelab on building the foundation of the Dice Roller app first. In this codelab, you will add dice images to your existing Dice Roller Android app.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |