Wireframe to Wire-fame

In this project, you will fire up Android Studio, create a brand new project, and design the layout needed to make Unquote a reality. You will use Android Studio and the Layout Editor to create a layout that will serve as the main game screen for Unquote, the trivia game that punishes players for spending too much time on the Internet… or not enough time… We’re not exactly sure!

This is the wireframe you need to build:

Create a Brand New Android Studio project

We’re going to start Unquote with a clean slate. Begin by launching Android Studio.

1. Choose File > New > New Project…

2. Select the Empty Activity template

3. Name your project, “Unquote”

4. Set the minimum API level to 15

5. Click “Finish”

6. You’re ready to design!

Android Studio created all the files you’ll need for the remainder of this project.

Study the Wireframe

Given the final Unquote wireframe (pictured above) and everything you know of Android’s Views and ViewGroups, you can begin to deconstruct the drawing into its component parts.

1. Including the parent ViewGroup, how many components are required by the wireframe?

2. How many ImageView components does the wireframe require?

3. How many TextView components does the wireframe require?

4. How many Button components does the wireframe require?

5. What’s special about the Button components?

If you drew a box around each element to represent the width and height each requires, what stands out about the answer button?

6. How will you place the Button components side-by-side?

Begin to think about the layout implementation required to place elements side-by-side, horizontally in a single-file line.

7. Take your best guess!

Redraw the game screen wireframe on a sheet of paper, and add comments in the margins.

Label each element by its component name (Button, TextView, etc.). Label each ViewGroup by its component name (ConstraintLayout, LinearLayout).

Finally, for all components within your ConstraintLayout, draw constraints using little arrows.

You will recreate this diagram in Android Studio soon!

Analog to Digital

Now you will take your wireframe and begin recreating it in Android Studio’s layout editor.

1. Open activity_main.xml

2. Switch to Design Mode

In Design Mode, you will freely modify the design without writing the XML document by hand. If you prefer to build your layout in text, feel free to switch to Text Mode.

3. Remove the default TextView

We will start this layout with a clean slate, remove the “Hello World!” TextView in the middle of the layout.

4. Add an ImageView

Drag an ImageView from the Component Palette into the center of the layout, and choose backgrounds/scenic found under Sample Data as the default image content.

5. Apply constraints to the ImageView

Based on the wireframe and design thinking you performed, which layout constraints should you place on the ImageView for it to remain centered at the top of the game screen?

Click and drag the bubbles at the edges of the ImageView to apply constraints to the component.

6. Modify the ImageView attributes

Modify the ImageView attributes so that the component is only as tall as its content requires, as wide as its constraints demand, and grows (or shrinks) in height to maintain the original aspect ratio of the image.

This may require some poking around the Attributes Panel with your ImageView selected. Remember, you can hover over the name of any attribute to reveal its purpose.

To undo (or delete) an attribute, highlight the attribute under the Declared Attributes Panel, and press the Backspace or DEL key.

Bottom’s Up

With your ImageView prepared, you are ready to create the game controls. The controls exist at the bottom of the screen and should remain there regardless of the length of the question text or height of the image.

You will construct the remainder of the layout using a bottom-up approach, meaning, you establish the bottom-most components first, then anchor the remaining components above them one horizontal layer at a time.

Let’s begin!

1. Add a TextView

Drag a TextView from the Component Palette into your layout. This TextView will represent the number of questions remaining and will be the tallest component you anchor to the bottom of your ConstraintLayout.

2. Constrain the component

Bind this TextView to the left and bottom of the screen with constraints.

Use a margin to give 8dp of space between the TextView and the left edge of the screen.

3. Tweak the text

Use attributes to grow the text size to 48sp, make the text bold, and present 99 as the default number of questions remaining.

4. One good text deserves another

Drag a second TextView onto your layout. This TextView should read, "questions remaining".

Use constraints to place this new TextView immediately to the right of the first one. Center it vertically between the top and bottom of the first TextView.

5. Clean up

Use attributes to place 8dp of space between this new TextView and the first.

6. Button up

Drag a Button component onto your layout, change the text to read "Submit".

Use constraints to bind this Button to the bottom-right of the screen and then put 8dp of margin between the Button and the right edge of the screen.

7. Center yourself

Use constraints to align this Button vertically with the first TextView (the one which currently reads 99).

8. And style it up

To give this Button a nicer look, change its style attribute to style/Widget.AppCompat.Button.Colored.

An Answer For Everything

In an earlier task, you thought about creating two side-by-side Button components that fill approximately half the width of the screen.

You may have considered constraints. By constraining the bottom of each Button to the same component and the left of one Button to the left edge of the parent and the right of the other Button to the right edge of the parent, you can level the Button components vertically.

Unfortunately, that approach forces you to hardcode the width of each Button to a fixed size. Without knowing the width of every device ahead of time, you cannot account for all possible screen sizes without incurring a series of crippling migraines.

Instead, you will use a LinearLayout feature to achieve this painlessly.

1. Drag a LinearLayout (horizontal) component onto your layout

This LinearLayout will contain the bottom row of answer Button components (answers 2 and 3).

2. Align your LinearLayout

Use constraints to make your LinearLayout fill the width of the parent container, then constrain the bottom of your LinearLayout to the top of your “Submit” Button.

Add 8dp of margin to the left, right, and bottom edge of your LinearLayout.

3. Add two answer Button components

Drag a Button component into your LinearLayout. Then, drag another Button component right on top of the first one. Change each Button’s style attribute to match the ‘Submit’ button created earlier (style/Widget.AppCompat.Button.Colored).

Verify that both Button components dropped directly into the LinearLayout by examining the Component Tree.

If you accidentally place the Button into the wrong ViewGroup (ConstraintLayout), undo your last action with Ctrl/CMD + Z and try again.

What happens after placing two Button components inside of your LinearLayout?

4. Wrap the Buttons

Change the layout_height attribute of your LinearLayout such that it grows only as tall as its content requires.

5. Repeat steps 1 through 4

Create another row of answer buttons that will represent answer0 and answer1. Constrain this row immediately above the previous row.

6. One more component

Add a third and final TextView to your layout (ConstraintLayout)—one to present the question text to the player.

7. Align the text

Use constraints to align the TextView to the left and right of its parent container, and constrain the bottom of the TextView to the top of the LinearLayout you created in step 5.

Surround the TextView with 8dp margins.

8. Style it up

Use attributes found in the Common Attributes Panel to change the size of the text to 18sp, the typeface to sans-serif-thin and the tools:text to a default question, something like, "Famous advice from an iconic mentor. Which fictional character really imparted this bit of sage wisdom?".

Minor Touch-Ups

With all of your elements in place, it’s time to make some small design tweaks to please the eye.

1. Change your theme colors

Open up the Resource Manager, and choose the tab labeled, Color. Double click either colorAccent, colorPrimary, or colorPrimaryDark.

2. Inside of colors.xml

colors.xml is a value XML file. Within a <resources> element, this file can store strings, colors, dimensions, and so much more.

• Change the value of colorPrimary to #EFD9CA
• Change the value of colorPrimaryDark to #C4B2A6
• Change the value of colorAccent to #FD4D3F

3. Return to activity_main.xml

Back in your main layout file, highlight the main ViewGroup, your ConstraintLayout.

In the Attributes Panel, click the search icon (magnifying glass symbol), and type “background” into the search bar.

4. Change the background color

If a value is present for the background attribute, white for example (#FFFFFF), click the color square to reveal a color-picker window. Switch to the Resources tab within the color-picker, then choose colorPrimary, this will change the background color of your ConstraintLayout.

Neat, huh?

5. Identify yourself

Lastly, you will need to fix the resource identifier for each component you plan to use in your code.

Namely, you need to customize the ID for the ImageView, the TextView which displays the question, the four answer buttons, the TextView that displays the number of questions remaining, and the “Submit” button.

Follow Android’s naming convention to modify the ID of each of these components.

6. It’s ready

Your layout is set for success. Once your Activity displays this layout, you’re ready to populate the components with the data necessary for your player to enjoy Unquote!

Great job! 👍