Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 7: Reveal! Displaying Pictures in a GridView.

Slides:



Advertisements
Similar presentations
Android UserInterfaces Nasrullah Niazi. overView All user interface elements in an Android app are built using View and ViewGroup objects. A View is an.
Advertisements

CE881: Mobile and Social Application Programming Simon M. Lucas Menus and Dialogs.
Android Selection Widgets Yuliana Setiowati Rizky Yuniar Hakkun 1Politeknik Elektronika Negeri Surabaya.
Chapter 3: Engage! Android User Input, Variables, and Operations
Chapter 6 Jam! Implementing Audio in Android Apps.
Chapter 6: Jam! Implementing Audio in Android Apps.
Chapter 11: Discover! Incorporating Google Maps
 User Interface - Raeha Sandalwala.  Introduction to UI  Layouts  UI Controls  Menus and ‘Toasts’  Notifications  Other interesting UIs ◦ ListView.
By: Jeremy Smith.  Introduction  Droid Draw  Add XML file  Layouts  LinearLayout  RelativeLayout  Objects  Notifications  Toast  Status Bar.
Cosc 4730 Android TabActivity and ListView. TabActivity A TabActivity allows for multiple “tabs”. – Each Tab is it’s own activity and the “root” activity.
Android Development (Basics)
Android: Layouts David Meredith
Microsoft Visual Basic 2005 CHAPTER 8 Using Procedures and Exception Handling.
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 9: Customize! Navigating with a Master/Detail.
Android: versions Note that: Honeycomb (Android v3.0) A tablet-only release Jelly Bean (Android v4.1) Released on July 09, 2012.
Chapter 5: Investigate! Lists, Arrays, and Web Browsers.
Chapter 9: Customize! Navigating with Tabs on a Tablet App.
Microsoft Visual Basic 2012 Using Procedures and Exception Handling CHAPTER SEVEN.
Chapter 10: Move! Creating Animation
6-2 2D Graphics CSNB544 Mobile Application Development Thanks to Utexas Austin.
Favorite Twitter® Searches App Android How to Program © by Pearson Education, Inc. All Rights Reserved.
Chapter 2: Simplify! The Android User Interface
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 5: Investigate! Android Lists, Arrays,
Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout.
Mobile Computing Lecture#11 Adapters and Dialogs.
Chapter 2 The Android User Interface. Objectives  In this chapter, you learn to:  Develop a user interface using the TextView, ImageView, and Button.
INTRODUCTION TO ANDROID. Slide 2 Application Components An Android application is made of up one or more of the following components Activities We will.
Engage! Android User Input, Variables,
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
Microsoft Visual Basic 2012 CHAPTER THREE Program Design and Coding.
Android Boot Camp for Developers Using Java, 3E
User Interfaces: Part 1 (View Groups and Layouts).
Chapter 7: Reveal! Displaying Pictures in a Gallery.
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 2: Simplify! The Android User Interface.
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
ANDROID – DRAWING IMAGES – SIMPLE EXAMPLE IN INTERFACE AND EVENT HANDLING L. Grewe.
Chapter 2: Variables, Functions, Objects, and Events JavaScript - Introductory.
DKU-MUST Mobile ICT Education Center 11. AdapterView.
MOBILE COMPUTING D10K-7D02 MC05: Android UI Design Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran.
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
Building User Interfaces Basic Applications
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
Flag Quiz Game App Android How to Program © by Pearson Education, Inc. All Rights Reserved.
Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 10: Move! Creating Animation 1 Android.
Chapter 9 Introduction to Arrays Fundamentals of Java.
CHAPTER 4 Fragments ActionBar Menus. Explore how to build applications that use an ActionBar and Fragments Understand the Fragment lifecycle Learn to.
Mobile Programming Lecture 4 Resources, Selection, Activities, Intents.
CMPE419 Mobile Application Development Asst.Prof.Dr.Ahmet Ünveren SPRING Computer Engineering Department Asst.Prof.Dr.Ahmet Ünveren
Chapter 5: Investigate! Lists, Arrays, and Web Browsers.
Chapter 2: Simplify! The Android User Interface
Explore! Icons and Decision-Making Controls
Chapter 4: Explore! Decision-Making Controls
Further android gui programming
Android Boot Camp for Developers Using Java, 3E
Mobile Application Development BSCS-7 Lecture # 8
Creation of an Android App By Keith Lynn
Mobile Application Development Chapter 4 [Android Navigation and Interface Design] IT448-Fall 2017 IT448- Fall2017.
Using Procedures and Exception Handling
CS323 Android Getting Started
Android Lists and Fragments
Building User Interfaces Basic Applications
Android Topics Custom ArrayAdapters
Android Topics Custom ArrayAdapters Creating an Event Listener
Android Topics Limited Resources and why we need to consider them.
Android SDK & App Development
ListView ? BaseAdapter ?.
UI Elements 2.
Presentation transcript:

Android Boot Camp for Developers Using Java, Comprehensive: A Guide to Creating Your First Android Apps Chapter 7: Reveal! Displaying Pictures in a GridView 1 Android Boot Camp for Developers Using Java, 2nd Ed.

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 2 Android Boot Camp for Developers Using Java, 2nd Ed.

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 3 Android Boot Camp for Developers Using Java, 2nd Ed.

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 4 Android Boot Camp for Developers Using Java, 2nd Ed.

Adding a GridView Control (continued) Steps to complete the App: 1. Add a GridView control to the emulator. 2. Add 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. 5 Android Boot Camp for Developers Using Java, 2nd Ed.

Adding a GridView Control (continued) 6 Android Boot Camp for Developers Using Java, 2nd Ed. –The Adding a GridView Control container displays a horizontal list of objects with the center item displaying the current image –Photos can be sized as thumbnail images or full- screen images –Photos can be stored in the drawable folders, in a phone’s storage, or on a Web site such as Picassa

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

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

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

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

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

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

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

Creating a GridView 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 }; 14 Android Boot Camp for Developers Using Java, 2nd Ed.

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

Instantiating the GridView and ImageView Controls 16 Android Boot Camp for Developers Using Java, 2nd Ed.

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

Using a setAdapter with an Image Adapter –A setAdapter provides a data model for the GridView layout –Code Syntax: ga.setAdapter(new ImageAdapter(this)); –ImageAdapter must be instantiated –ImageAdapter class must be added to extend the custom BaseAdapter class 18 Android Boot Camp for Developers Using Java, 2nd Ed.

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

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

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 –Code Syntax: ga.setOnItemClickListener(new OnItemClickListener() public void onItemClick(AdapterView arg0, View arg1, int arg2, long arg3) { } } 21 Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the OnItemClickListener (continued) 22 Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the OnItemClickListener (continued) 23 Android Boot Camp for Developers Using Java, 2nd Ed.

Coding the OnItemClickListener (continued) 24 Android Boot Camp for Developers Using Java, 2nd Ed.

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

Coding a Custom Toast Notification (continued) 26 Android Boot Camp for Developers Using Java, 2nd Ed. New toast notification code: Toast.makeText(getBaseCo ntext(), “Selected Species" + (arg2 + 1), Toast.LENGTH_SHORT).show ();

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

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

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

–A Java method is a series of statements that perform some repeated task –ImageAdapter class includes methods called: getCount() which determines how many pictures to display length() which returns the number of pictures in the array public int getCount() { // TODO Auto-generated constructor stub return Animals.length; } 30 Android Boot Camp for Developers Using Java, 2nd Ed. Calculating the Length of an Array

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

32 Android Boot Camp for Developers Using Java, 2nd Ed. Coding the getView Method getView method uses Context to create a new ImageView instance to temporarily hold each image displayed in the GridView public View getView(int arg0, View arg1, ViewGroup arg2){ // TODO Auto-generated method stub ImageView pic = new ImageView(context); pic.setImageResource(Animals[arg0]); pic.setScaleType(ImageView.ScaleType.FIT_XY); pic.setLayoutParams(new GridView.LayoutParams(188,200)); return pic; } The returned pic is a scaled, resized image, ready to display in the GridView

Coding the getView Method (continued) –Scaling keeps or changes the aspect ratio of the image to the bounds of the ImageView 33 Android Boot Camp for Developers Using Java, 2nd Ed.

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

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

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

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

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 38 Android Boot Camp for Developers Using Java, 2nd Ed.

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. 39 Android Boot Camp for Developers Using Java, 2nd Ed.

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 40 Android Boot Camp for Developers Using Java, 2nd Ed.