CSE 3345 Spring 2014 Android Test

Overview• Create a simple Android Application that allows a user to View all 3

starting Pokémon and choose their starting Pokémon.

UI when application starts UI after user chooses a PokémonUser clicks Charmander at bottomof screen

Part 0: Set up

1. Download the resources posted on the class webpage to complete this app.

2. Import the images from the /imgs folder to the drawable-xhdpi folder.

3. Import the colors.xml file into your res/values folder.

4. Copy and paste the text inside the strings.txt into your strings.xml file inside the res/values folder.

Part 1 : UI1. Create a XML Layout which looks like the image below.

2. Take a look at the Design Consideration slides before starting. There are several important details to consider.

Section A

Section B

Design Consideration

Section A’s height isdependent on the height of Section B. In other words, Section A will resizedepending on the height of Section B.

Make Section B’s height is largeenough to display the text and images for the 3 Pokémon in full (nothing should be clipped/cut off).

Step 1: Design Consideration

Section A

Section B

To complete this, you shouldn’t use a

ScrollView.

Section A’s height got smaller thanthe previous slide because Section B got taller.

Section B got taller.

For example (Your actual app shouldn’t look like this, this is an example only)

Section A

Section B

Each of the images inside Section Ashould be center cropped.

.

Step 2: Design Consideration

Section A

Section B

Part 2: Add Logic and Event Handling

1. Inflate your UI into an Activity2. Add click listeners to all Pokémon in Section B

so that when one is clicked, the associated image in Section A will expand to fill the parent width.

3. See the next slides for details

When the user clicks on a Pokémon inSection B. The associated Pokémon image in Section A will change to take up the entire width of Section A.

.

Step 1: Logic Consideration

Section A

Section B

In this example, the user clicked Squirtle in

Section B.

If the user clicks another Pokémon inSection B, then the associated image inSection A should appear.

.

Step 2: Logic Consideration

Section A

Section B

In this example, the user previously clicked on

Squirtle from Section B. Now, the user clicked

Charmander in Section B.

Extra (If you finish and have time do this)

1. When the user clicks on a Pokémon image in Section B, show a Toast message that says, “I choose you ________.” Replace the _______ with the name of the Pokémon clicked.

Video Demo

• See a video demo @http://youtu.be/IrjkpWaFoec.

Submission Instructions

1. Your Android Project should be in a folder titled AndroidTestLastname.

2. Zip up the Android Project folder (not the contents of the folder) into a file titled AndroidTestLastname.

3. Submit your zip file to the Bb assignment called Android Test Code Submission.