How to Design a Simple Android Dice Roller App — Iteration 1

Designing a Android dice roller app for the greatest board game ever: Mansions of Madness!

In this tutorial I describe the steps to build:

This is a non technical summary of steps to build a dice roller app. Checkout the complete tutorial and code on Github

Proposal — The Idea

A little while ago, I got into this board game Mansions of Madness. The game is a bit like the classic Clue where players roam around a house trying to solve a mystery. It’s an awesome game — highly recommended. Anyway, the game uses dice rolls to resolve actions, and game events. Oddly, players sometimes have to roll more dice than the game includes (6)! I decided that this was a perfect opportunity to build a custom dice roller app. In this tutorial, I will use basic Android components to build a Mansions of Madness dice roller.

This dice app is specifically designed for Mansions of Madness game play so first I’ll outline how the game uses dice.

  • Dice Count: Players roll between 1 and 10 dice to resolve game events. The number of dice depends on factors like the player’s character and the specific event.
  • Probability: The dice is 8 sided. 3 Blank, 3 Star, 2 Magnifying
  • Reroll: Sometimes a player can reroll dice results.
  • Hold: A player may keep and hold a dice from the previous roll. For example, if a player rolls 3 stars and 1 blank. The player may re-roll that blank.
  • Change: A player may sometimes change a dice roll from one result to another. For example, if a player rolls 2 blanks and one magnify. That player may change that magnify result into a star result.

The Design

To keep things simple, the first version will be a vertical, scroll-able dice list. The app will have 3 buttons to trigger functions “Roll Dice”, “Add Dice” and “Remove Dice”. Each Dice will have a corresponding ‘Hold’ and ‘Change’ button.

Step 1: Assets

To start, I use a simple online SVG editor Clker to draw out the dice faces as SVG’s and import them into Android Studio.

Step 2 : Application Layout

I’ve divided the application layout into two areas: Dice area and Controller area. The dice area will be a scrollable dice list and the controller will contain a row of 3 buttons "Add" "Remove" "Roll".

activity_main.xml

Row Layout

Each dice row includes 2 buttons and a dice image.

Step 3: Virtual Dice

The app will represent the dice state with dice objects. The dice object has two properties: dice face [Blank, Magnify, Star], and hold state. The dice functions are roll, toggleHold, and nextValue.

Step 4: Rendering Dice onto the Interface

At this point, I’ve initialized the Android Project with an Empty MainActivity, mocked the layouts, and defined the dice object. Next, I bind the data to the Android user interface constructs. The Android framework employs the Adapter Pattern to separate the visual components (ListView) and data components (List<Dice>). In our case, the adapter maps the (Dice) to rows (dice_row.xml).

Step 5: Button Clicks

In this step, I map button clicks to logic. The Android platform offers a couple ways to do this. One way is to specify an attribute from the layout file. Another is to programmatically set the onClickListener. In this app, i use the attribute approach for the three top level buttons and programmatic for the row buttons.

Attribute Approach

....
<Button
...
android:onClick="addDice"/>
....

MainActivity.java


....
public void addDice(View view) {
if(diceList.size()< MAX_DICE_COUNT) {
diceAdapter.add(new Dice());
}
}
....

Programmatic Approach

....
holdButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Dice dice = diceList.get(position);
dice.toggleHold();
}
});
....

Conclusion

Putting together an initial app that is pretty straightforward. In the next part, I add animation and visual effects to improve usability. Stay tuned!

Source on GitHub (Long Version)

Android Engineer @Classpass xGoogle xNook