cse 3345 spring 2014 android test
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: CSE 3345 Spring 2014 Android Test](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816779550346895ddc788f/html5/thumbnails/1.jpg)
CSE 3345 Spring 2014 Android Test
![Page 2: CSE 3345 Spring 2014 Android Test](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816779550346895ddc788f/html5/thumbnails/2.jpg)
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
![Page 3: CSE 3345 Spring 2014 Android Test](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816779550346895ddc788f/html5/thumbnails/3.jpg)
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.
![Page 4: CSE 3345 Spring 2014 Android Test](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816779550346895ddc788f/html5/thumbnails/4.jpg)
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.
![Page 5: CSE 3345 Spring 2014 Android Test](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816779550346895ddc788f/html5/thumbnails/5.jpg)
Section A
Section B
Design Consideration
![Page 6: CSE 3345 Spring 2014 Android Test](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816779550346895ddc788f/html5/thumbnails/6.jpg)
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.
![Page 7: CSE 3345 Spring 2014 Android Test](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816779550346895ddc788f/html5/thumbnails/7.jpg)
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
![Page 8: CSE 3345 Spring 2014 Android Test](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816779550346895ddc788f/html5/thumbnails/8.jpg)
Each of the images inside Section Ashould be center cropped.
.
Step 2: Design Consideration
Section A
Section B
![Page 9: CSE 3345 Spring 2014 Android Test](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816779550346895ddc788f/html5/thumbnails/9.jpg)
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
![Page 10: CSE 3345 Spring 2014 Android Test](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816779550346895ddc788f/html5/thumbnails/10.jpg)
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.
![Page 11: CSE 3345 Spring 2014 Android Test](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816779550346895ddc788f/html5/thumbnails/11.jpg)
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.
![Page 12: CSE 3345 Spring 2014 Android Test](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816779550346895ddc788f/html5/thumbnails/12.jpg)
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.
![Page 13: CSE 3345 Spring 2014 Android Test](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816779550346895ddc788f/html5/thumbnails/13.jpg)
Video Demo
• See a video demo @http://youtu.be/IrjkpWaFoec.
![Page 14: CSE 3345 Spring 2014 Android Test](https://reader035.vdocuments.net/reader035/viewer/2022062323/56816779550346895ddc788f/html5/thumbnails/14.jpg)
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.