Android Boot Camp for Developers Using Java 3
Android Boot Camp for Developers Using Java, 3 E Chapter 7: Reveal! Displaying Pictures in a Grid. View Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 1
Objectives In this chapter, you learn to: • Create an Android project using a Grid. View control • Add a Grid. View to display two-dimensional grid of images • Reference images through an array • Create an Image. Adapter class • Code an On. Item. Click. Listener • Display a custom toast message • Define a Context resource • Understand the use of constructors Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 2
Objectives • • (continued) Return a value from a method Determine the length of an array Assign an Image. View control using set. Image. Resource Change the scale and layout size of the Grid. View Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 3
Adding a Grid. View Control • A View container is a rectangular area of the screen that displays an image or text object • A Grid. View is a center-locked horizontally scrolling list – – Adds Visual Appeal Clean, Professional Effect Flip Photos with Fingers Tap for full-size Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 4
Adding a Grid. View Control Android Boot Camp for Developers Using Java, 3 rd Ed. (continued) © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 5
Adding a Grid. View Control (continued) • Steps to complete the App: 1. Add a Grid. View control and an Image. View control to the emulator. 2. Update the XML code for an Image. View control not linked to a particular image. 3. Place six images in a drawable folder. 4. Define an array to hold the image files. 5. Instantiate the Grid. View and Image. View controls. 6. Create an Image. Adapter class. 7. Display a custom toast message. 8. Display the selected image. 9. Customize the Image. Adapter class. 10. Define the layout using the get. View( ) method. Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 6
Adding a Grid. View Control (continued) • A View container is a rectangular area of the screen that displays an image or text object – Can include layouts such as Grid. View, Radio. Group, Scroll. View, Tab. Host, and List. View – Photos can be sized as thumbnail images or fullscreen images • The Grid. View container displays a horizontal list of objects with the center item displaying the current image – Photos can be stored in the drawable folders, in a phone’s storage, or on a Web site such as Picassa Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 7
Adding a Grid. View Control Android Boot Camp for Developers Using Java, 3 rd Ed. (continued) © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 8
Adding a Grid. View Control Android Boot Camp for Developers Using Java, 3 rd Ed. (continued) © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 9
Adding a Grid. View Control Android Boot Camp for Developers Using Java, 3 rd Ed. (continued) © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 10
Adding a Grid. View Control Android Boot Camp for Developers Using Java, 3 rd Ed. (continued) © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 11
Adding a Grid. View Control Android Boot Camp for Developers Using Java, 3 rd Ed. (continued) © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 12
Adding the Image. View Control and Image Files Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 13
Adding the Image. View Control and Image Files Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 14
Creating an Array for the Images Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 15
Creating an Array for the Images (continued) Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 16
Creating an Array for the Images (continued) • Images must be placed in the drawable folder – Must be referenced in the code – Must be assigned to an array Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 17
Instantiating the Grid. View and Image. View Controls Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 18
Instantiating the Grid. View and Image. View Controls (Continued) Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 19
Using a set. Adapter with an Image Adapter • A set. Adapter provides a data model for the Grid. View layout • Image. Adapter must be instantiated • Image. Adapter class must be added to extend the custom Base. Adapter class Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 20
Using a set. Adapter with an Image Adapter (Continued) Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 21
Using a set. Adapter with an Image Adapter (Continued) Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 22
Coding the On. Item. Click. Listener – Recall that the On. Item. Click. Listener awaits user interaction within the Grid. View Control – The on. Item. Click method is the event the listener responds to – List. View and Grid. View enable the Android device to monitor for click events Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 23
Coding the On. Item. Click. Listener Android Boot Camp for Developers Using Java, 3 rd Ed. (continued) © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 24
Coding the On. Item. Click. Listener Android Boot Camp for Developers Using Java, 3 rd Ed. (continued) © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 25
Coding the On. Item. Click. Listener Android Boot Camp for Developers Using Java, 3 rd Ed. (continued) © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 26
Coding a Custom Toast Notification – Recall that toast notifications provide feedback to the user • Previous toast notification code: – Since notification above would be in the on. Item. Click method, it is not used in Main Activity, so the reference to Main. Activity. this creates an error – In Android programs, you can place the get. Base. Context( ) method in another method (such as on. Item. Click) that is triggered only when the user touches the Grid. View control • If you do, the get. Base. Context( ) method obtains a Context instance Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 27
Coding a Custom Toast Notification (continued) • Notice that even though the panther is in position Animals[4] in Table 7 -2, the custom toast message states “Selected Species 5” • Array position 4 is really the fifth image because the array values begin with 0 Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 28
Coding a Custom Toast Notification (continued) Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 29
Displaying the Selected Image • When the user selects a picture, a toast message appears and the Image. View control displays the selected image Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 30
Customizing the Image. Adapter Class – The Image. Adapter class was called with this line of code: • gr. set. Adapter(new Image. Adapter (this)); – The Image. Adapter class determines the layout of the Grid. View • The context and images of the Grid. View need to be referenced within the Image. Adapter class – The tasks to complete inside the Image. Adapter class: • Manage the layout of the Grid. View • Connect the data sources from the array for display within the Grid. View control Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 31
Calculating the Length of an Array • The length of an array is determined by the number of elements in the array. Image. Adapter class includes methods called: – get. Count() which determines how many pictures to display – length() which returns the number of pictures in the array • A Java method is a series of statements that perform some repeated task Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 34
Calculating the Length of an Array Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. (Continued) 35
Coding the get. View Method • get. View method uses Context to create a new Image. View instance to temporarily hold each image displayed in the Grid. View • The returned pic is a scaled, resized image, ready to display in the Grid. View Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 36
Coding the get. View Method (continued) – Scaling keeps or changes the aspect ratio of the image to the bounds of the Image. View Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 37
Coding the get. View Method Android Boot Camp for Developers Using Java, 3 rd Ed. (continued) © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 38
Coding the get. View Method Android Boot Camp for Developers Using Java, 3 rd Ed. (continued) © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 39
Completed Code Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 40
Completed Code (continued) Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 41
Summary • A View container is a rectangular area of the screen that displays an image or text object • A Grid. View layout displays a horizontal list of objects • Users can scroll the Grid. View list and select an object • XML code needed in mail. xml to display an image in the Image. View control • Array variables can store multiple images and assign them to the Grid. View control Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 42
Summary (continued) • A set. Adapter provides a data model for the Grid. View layout • The On. Item. Click. Listener waits for user interaction in a Grid. View control • Including a toast notification displays a message indicating which image is selected in the Grid. View control • Must use get. Base. Context() method instead of main. this. Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 43
Summary (continued) • Use set. Image. Resource() method to insert an Image. View control • Use the Context class to load and access resources for the application • Use get. Count() to determine how many pictures to display in the Grid. View and length() to determine the number of elements in the Grid. View • get. Count() returns an integer • get. View() created a new Image. View instance to hold each images displayed in the Grid. View Android Boot Camp for Developers Using Java, 3 rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. 44
- Slides: 42