Add images to the Dice Roller app

Add images to the Dice Roller app

1. Before you begin

In this codelab, you will add dice images to your existing Dice Roller Android app. Be sure to complete the earlier codelab on building the foundation of the Dice Roller app first.

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. It will be a much more visual and enhanced user experience for your app.

You will be provided with a link to download the dice images, and you will add them as resources in your app. To write code for which dice image to use, you will be using a when statement in Kotlin.

Prerequisites

• Completed the Create an interactive Dice Roller app codelab.
• Able to write control flow statements (if / else, when statements).
• Able to update the UI of the app based on user input (modifying the MainActivity.kt file).
• Able to add a click listener to a Button.
• Able to add image resources to an Android app.

What you'll learn

• How to update an ImageView while the app is running.
• How to customize your app behavior based on different conditions (using a when statement).

What you'll build

• Dice Roller Android app that has a Button to roll a dice and update the image on the screen.

2. Update the layout for the app

In this task, you'll replace the TextView in your layout with an ImageView that displays an image of the dice roll result.

Open Dice Roller app

1. Open and run the Dice Roller app from the previous codelab in Android Studio. You can use the solution code or the code you created.

The app should look like this.

2. Open activity_main.xml (app > res > layout > activity_main.xml). This opens the Layout Editor.

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 back. In that case, you can select a View by selecting it in the Component Tree instead.