Android Boot Camp for Developers Using Java Comprehensive

Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 7: Reveal! Displaying Pictures in a Grid. View Android Boot Camp for Developers Using Java, 2 nd Ed. 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, 2 nd Ed. 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, 2 nd Ed. 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, 2 nd Ed. 4

Adding a Grid. View Control (continued) • Steps to complete the App: 1. Add a Grid. View control to the emulator. 2. Add 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, 2 nd Ed. 5

Adding a Grid. View Control (continued) – The Adding a Grid. View Control container displays a horizontal list of objects with the center item displaying the current image – Photos can be sized as thumbnail images or fullscreen images – 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, 2 nd Ed. 6

Adding a Grid. View Control (continued) • Images can be dragged onto the emulator. • Select from the list of images in the drawable folders Android Boot Camp for Developers Using Java, 2 nd Ed. 7

Adding a Grid. View Control Android Boot Camp for Developers Using Java, 2 nd Ed. (continued) 8

Adding a Grid. View Control Android Boot Camp for Developers Using Java, 2 nd Ed. (continued) 9

Adding a Grid. View Control (continued) • Adding the Image. View Control and Image Files Android Boot Camp for Developers Using Java, 2 nd Ed. 10

Adding a Grid. View Control (continued) • Adding the Image. View Control and Image Files (Continued) Android Boot Camp for Developers Using Java, 2 nd Ed. 11

Adding a Grid. View Control (continued) • Adding the Image. View Control and Image Files (Continued) Android Boot Camp for Developers Using Java, 2 nd Ed. 12

Adding a Grid. View Control (continued) • Creating an Array for the Images Android Boot Camp for Developers Using Java, 2 nd Ed. 13

Creating a Grid. View Control (continued) • 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 Integer[] Animals = { R. drawable. elephant, R. drawable. gorilla, R. drawable. leopard, R. drawable. monkey, R. drawable. panda, R. drawable. redpanda }; Android Boot Camp for Developers Using Java, 2 nd Ed. 14

Creating a Grid. View Control Android Boot Camp for Developers Using Java, 2 nd Ed. (continued) 15

Instantiating the Grid. View and Image. View Controls Android Boot Camp for Developers Using Java, 2 nd Ed. 16

Instantiating the Grid. View and Image. View Controls (Continued) Android Boot Camp for Developers Using Java, 2 nd Ed. 17

Using a set. Adapter with an Image Adapter – A set. Adapter provides a data model for the Grid. View layout – Code Syntax: ga. set. Adapter(new Image. Adapter(this)); – 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, 2 nd Ed. 18

Using a set. Adapter with an Image Adapter (Continued) Android Boot Camp for Developers Using Java, 2 nd Ed. 19

Using a set. Adapter with an Image Adapter (Continued) Android Boot Camp for Developers Using Java, 2 nd Ed. 20

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 – Code Syntax: ga. set. On. Item. Click. Listener(new On. Item. Click. Listener() { @Override public void on. Item. Click(Adapter. View<? > arg 0, View arg 1, int arg 2, long arg 3) { } } Android Boot Camp for Developers Using Java, 2 nd Ed. 21

Coding the On. Item. Click. Listener Android Boot Camp for Developers Using Java, 2 nd Ed. (continued) 22

Coding the On. Item. Click. Listener Android Boot Camp for Developers Using Java, 2 nd Ed. (continued) 23

Coding the On. Item. Click. Listener Android Boot Camp for Developers Using Java, 2 nd Ed. (continued) 24

Coding a Custom Toast Notification – Recall that toast notifications provide feedback to the user – Previous toast notification code: Toast. make. Text(Main. Activity. this, “Typical Toast message", Toast. LENGTH_SHORT). show(); – 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 Android Boot Camp for Developers Using Java, 2 nd Ed. 25

Coding a Custom Toast Notification (continued) • New toast notification code: Toast. make. Text(get. Base. Context(), “Selected Species" + (arg 2 + 1), Toast. LENGTH_SHORT). show(); Android Boot Camp for Developers Using Java, 2 nd Ed. 26

Coding a Custom Toast Notification (continued) Android Boot Camp for Developers Using Java, 2 nd Ed. 27

Displaying the Selected Image – When the user selects a picture, a toast message appears and the Image. View control displays the selected image. View. set. Image. Resource(Animals[arg 2]); Android Boot Camp for Developers Using Java, 2 nd Ed. 28

Customizing the Image. Adapter Class – Data sources from the array must be connected to the Grid. View control • Defining the Context of the Image. Adapter Class – Constructors are used to initialize the instance variables of an object Android Boot Camp for Developers Using Java, 2 nd Ed. 29

Calculating the Length of an Array – A Java method is a series of statements that perform some repeated task – 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 public int get. Count() { // TODO Auto-generated constructor stub return Animals. length; } Android Boot Camp for Developers Using Java, 2 nd Ed. 30

Calculating the Length of an Array Android Boot Camp for Developers Using Java, 2 nd Ed. (Continued) 31

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 public View get. View(int arg 0, View arg 1, View. Group arg 2){ // TODO Auto-generated method stub Image. View pic = new Image. View(context); pic. set. Image. Resource(Animals[arg 0]); pic. set. Scale. Type(Image. View. Scale. Type. FIT_XY); pic. set. Layout. Params(new Grid. View. Layout. Params(188, 200)); return pic; } • The returned pic is a scaled, resized image, ready to display in the Grid. View Android Boot Camp for Developers Using Java, 2 nd Ed. 32

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, 2 nd Ed. 33

Coding the get. View Method Android Boot Camp for Developers Using Java, 2 nd Ed. (continued) 34

Coding the get. View Method Android Boot Camp for Developers Using Java, 2 nd Ed. (continued) 35

Completed Code Android Boot Camp for Developers Using Java, 2 nd Ed. 36

Completed Code (continued) Android Boot Camp for Developers Using Java, 2 nd Ed. 37

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, 2 nd Ed. 38

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, 2 nd Ed. 39

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, 2 nd Ed. 40