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.xmlRow 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)
