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émon User clicks Charmander at bottom of 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 : UI 1.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 is dependent on the height of Section B. In other words, Section A will resize depending on the height of Section B. Make Section B’s height is large enough 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 than the 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 A should be center cropped.. Step 2: Design Consideration Section A Section B

Part 2: Add Logic and Event Handling 1.Inflate your UI into an Activity 2.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 in Section 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 in Section B, then the associated image in Section 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

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.