1 / 14

CSE 3345 Spring 2014 Android Test

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 after user chooses a Pokémon. User clicks C harmander at bottom o f screen. UI when application starts. Part 0: Set up.

nancy
Download Presentation

CSE 3345 Spring 2014 Android Test

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSE 3345 Spring 2014 Android Test

  2. Overview • Create a simple Android Application that allows a user to View all 3 starting Pokémon and choose their starting Pokémon. UI after user chooses a Pokémon User clicks Charmander at bottom of screen UI when application starts

  3. Part 0: Set up • Download the resources posted on the class webpage to complete this app. • Import the images from the /imgsfolder to the drawable-xhdpi folder. • Import the colors.xml file into your res/values folder. • Copy and paste the text inside the strings.txt into your strings.xml file inside the res/values folder.

  4. Part 1 : UI • Create a XML Layout which looks like the image below. • Take a look at the Design Consideration slides before starting. There are several important details to consider.

  5. Design Consideration Section A Section B

  6. Step 1: Design Consideration To complete this, you shouldn’t use a ScrollView. 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. Section A 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). Section B

  7. For example (Your actual app shouldn’t look like this, this is an example only) Section A’s height got smaller than the previous slide because Section B got taller. Section A Section B got taller. Section B

  8. Step 2: Design Consideration Each of the images inside Section A should be center cropped. Section A . Section B

  9. Part 2: Add Logic and Event Handling • Inflate your UI into an Activity • 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. • See the next slides for details

  10. Step 1: Logic Consideration In this example, the user clicked Squirtle in Section B. 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. Section A . Section B

  11. Step 2: Logic Consideration In this example, the user previously clicked on Squirtle from Section B. Now, the user clicked Charmander in Section B. If the user clicks another Pokémon in Section B, then the associated image in Section A should appear. Section A . Section B

  12. Extra (If you finish and have time do this) • 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.

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

  14. Submission Instructions • Your Android Project should be in a folder titled AndroidTestLastname. • Zip up the Android Project folder(not the contents of the folder) into a file titled AndroidTestLastname. • Submit your zip file to the Bb assignment called Android Test Code Submission.

More Related