Android Boot Camp for Developers

Using Java, 3E

Chapter 7: Reveal!
Displaying Pictures in a GridView

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 1
or posted to a publicly accessible website, in whole or in part.
Objectives

In this chapter, you learn to:

• Create an Android project using a GridView control
• Add a GridView to display two-dimensional grid of
images
• Reference images through an array
• Create an ImageAdapter class
• Code an OnItemClickListener
• Display a custom toast message
• Define a Context resource
• Understand the use of constructors
Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 2
or posted to a publicly accessible website, in whole or in part.
Objectives (continued)

• Return a value from a method

• Determine the length of an array
• Assign an ImageView control using setImageResource
• Change the scale and layout size of the GridView

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 3
or posted to a publicly accessible website, in whole or in part.
Adding a GridView Control
• A View container is a rectangular
area of the screen that displays
an image or text
object
• A GridView 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, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 4
or posted to a publicly accessible website, in whole or in part.
Adding a GridView Control (continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 5
or posted to a publicly accessible website, in whole or in part.
Adding a GridView Control (continued)

• Steps to complete the App:

1. Add a GridView control and an ImageView control to the
emulator.
2. Update the XML code for an ImageView 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 GridView and ImageView controls.
6. Create an ImageAdapter class.
7. Display a custom toast message.
8. Display the selected image.
9. Customize the ImageAdapter class.
10. Define the layout using the getView( ) method.

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 6
or posted to a publicly accessible website, in whole or in part.
Adding a GridView Control (continued)

• A View container is a rectangular area of the

screen that displays an image or text object
– Can include layouts such as GridView, RadioGroup,
ScrollView, TabHost, and ListView
– Photos can be sized as thumbnail images or full-
screen images
• The GridView 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, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 7
or posted to a publicly accessible website, in whole or in part.
Adding a GridView Control (continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 8
or posted to a publicly accessible website, in whole or in part.
Adding a GridView Control (continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 9
or posted to a publicly accessible website, in whole or in part.
Adding a GridView Control (continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 10
or posted to a publicly accessible website, in whole or in part.
Adding a GridView Control (continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 11
or posted to a publicly accessible website, in whole or in part.
Adding the ImageView Control and
Image Files

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 12
or posted to a publicly accessible website, in whole or in part.
Creating an Array for the Images

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 13
or posted to a publicly accessible website, in whole or in part.
Creating an Array for the Images
(continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 14
or posted to a publicly accessible website, in whole or in part.
Instantiating the GridView and
ImageView Controls

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 15
or posted to a publicly accessible website, in whole or in part.
Instantiating the GridView and
ImageView Controls (Continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 16
or posted to a publicly accessible website, in whole or in part.
Using a setAdapter with an Image Adapter

• A setAdapter provides a data model for the

GridView layout

• ImageAdapter must be instantiated

• ImageAdapter class must be added to extend the
custom BaseAdapter class

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 17
or posted to a publicly accessible website, in whole or in part.
Using a setAdapter with an Image Adapter
(Continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 18
or posted to a publicly accessible website, in whole or in part.
Using a setAdapter with an Image Adapter
(Continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 19
or posted to a publicly accessible website, in whole or in part.
Coding the OnItemClickListener

– Recall that the OnItemClickListener awaits user

interaction within the GridView Control
– The onItemClick method is the event the listener
responds to
– ListView and GridView enable the Android device to
monitor for click events

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 20
or posted to a publicly accessible website, in whole or in part.
Coding the OnItemClickListener (continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 21
or posted to a publicly accessible website, in whole or in part.
Coding the OnItemClickListener (continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 22
or posted to a publicly accessible website, in whole or in part.
Coding the OnItemClickListener (continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 23
or posted to a publicly accessible website, in whole or in part.
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 onItemClick

method, it is not used in Main Activity, so the reference to
MainActivity.this creates an error
– In Android programs, you can place the getBaseContext( )
method in another method (such as onItemClick) that is
triggered only when the user touches the GridView
control
• If you do, the getBaseContext( ) method obtains a Context
instance

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 24
or posted to a publicly accessible website, in whole or in part.
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, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 25
or posted to a publicly accessible website, in whole or in part.
Coding a Custom Toast Notification
(continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 26
or posted to a publicly accessible website, in whole or in part.
Displaying the Selected Image
• When the user selects a picture, a toast message
appears and the ImageView control displays the
selected image

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 27
or posted to a publicly accessible website, in whole or in part.
Customizing the ImageAdapter Class
– The ImageAdapter class was called with this line of
code:
• gr.setAdapter(new ImageAdapter (this));
– The ImageAdapter class determines the layout of
the GridView
• The context and images of the GridView need to be
referenced within the ImageAdapter class
– The tasks to complete inside the ImageAdapter
class:
• Manage the layout of the GridView
• Connect the data sources from the array for display
within the GridView control

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 28
or posted to a publicly accessible website, in whole or in part.
Calculating the Length of an Array

• The length of an array is determined by the number

of elements in the arrayImageAdapter class
includes methods called:
– getCount() 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, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 31
or posted to a publicly accessible website, in whole or in part.
Calculating the Length of an Array (Continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 32
or posted to a publicly accessible website, in whole or in part.
Coding the getView Method
• getView method uses Context to create a new
ImageView instance to temporarily hold each image
displayed in the GridView

• The returned pic is a scaled, resized image, ready to

display in the GridView
Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 33
or posted to a publicly accessible website, in whole or in part.
Coding the getView Method (continued)

– Scaling keeps or changes the aspect ratio of the

image to the bounds of the ImageView

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 34
or posted to a publicly accessible website, in whole or in part.
Coding the getView Method (continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 35
or posted to a publicly accessible website, in whole or in part.
Coding the getView Method (continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 36
or posted to a publicly accessible website, in whole or in part.
Completed Code

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 37
or posted to a publicly accessible website, in whole or in part.
Completed Code (continued)

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 38
or posted to a publicly accessible website, in whole or in part.
Summary

• A View container is a rectangular area of the

screen that displays an image or text object
• A GridView layout displays a horizontal list of
objects
• Users can scroll the GridView list and select an
object
• XML code needed in mail.xml to display an image
in the ImageView control
• Array variables can store multiple images and
assign them to the GridView control
Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 39
or posted to a publicly accessible website, in whole or in part.
Summary (continued)

• A setAdapter provides a data model for the

GridView layout
• The OnItemClickListener waits for user interaction
in a GridView control
• Including a toast notification displays a message
indicating which image is selected in the GridView
control
• Must use getBaseContext() method instead of
main.this.

Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 40
or posted to a publicly accessible website, in whole or in part.
Summary (continued)

• Use setImageResource() method to insert an

ImageView control
• Use the Context class to load and access
resources for the application
• Use getCount() to determine how many pictures to
display in the GridView and length() to determine
the number of elements in the GridView
• getCount() returns an integer
• getView() created a new ImageView instance to
hold each images displayed in the GridView
Android Boot Camp for Developers Using Java, 3rd Ed. © 2016 Cengage Learning®. May not be scanned, copied or duplicated, 41
or posted to a publicly accessible website, in whole or in part.