2

Presenting Data for Views


   
   
 
 
   
Activity
 
 

 

  
 !"


#  

$% 

& 

 
   

"
!!  
  

 
' 
 
(
  


Most Android data-centric classes are built on top of Adapter objects, and thus extend the
AdapterView class. An Adapter
 


,

Adapter object is used to create View objects for data

 



  
 


!
" #!

 View for each of the data

 
 
$ 
%!!
&

!

 
!%
!

%%


" 





"
   

 !

robust of structures).
The most common AdapterView classes you'll encounter are: ListView, Spinner, and
GridView(  $
 ListView class and GridView, and explore
 %
 
 

) 
* +

Listing and selecting data

The ListView
 !

!!


($"
by a ListAdapter
&  


 
  
data objects in a View. A ListView#
&
 $


in a ScrollView.

ListView choice modes

The ListView

 !

!*
&+
constants: CHOICE_MODE_NONE, CHOICE_MODE_SINGLE, and CHOICE_MODE_MULTIPLE.
The mode for a ListView can be set by using the android:choiceMode


/0+&
  ListView.setChoiceMode method in Java.
 

 
The choice mode of a ListView   ListView
 %&
 

" 

"
ListView
+!
 ListAdapter&  
%View objects
for each of the items that should appear in the ListView.

No selection mode CHOICE_MODE_NONE

1"
!& 
!"
2 
$
 



 34
%&$  !


ListView. The reason is it makes
 
%*
   !

ListView
 




 !&*

  %
& $


5675
&
 !
  !

ListView is to
"! 


 ListView object displaying a list of
8 
!String array Java object, taken from one of the default ApiDemos
7!
9;

[ 38 ]

Chapter 2

Single selection mode CHOICE_MODE_SINGLE

In this mode, the ListView acts more like a desktop List(  
*


 *
&
!

 !
 *
  %

 "
+*

<&  7 
*

!! 
 *

 *


!   
 *%
 4
%&
 



! 
!*
Activity. It's quite common for a
ListView

!
*
#
*
=(
$  
!
 

" 

!+* 
ListAdapter object.



&
%&
%
*

  !

In the android"
+R($
!!*
 
!$ 
( 

#
ListView 
<string-array>


&

 


=
list.setAdapter(new ArrayAdapter(
this,
android.R.layout.simple_list_item_single_choice,
getResources().getStringArray(R.array.colors)));

(  

%ArrayAdapter class from the android.widget package.
( 
!  


!simple_list_
item_single_choice 
+ 
! 

display items in a ListView CHOICE_MODE_SINGLE. Most typically t  
a RadioButton for each object in the ListAdapter.

[ 39 ]

) 
* +

Multiple selection mode CHOICE_MODE_MULTIPLE

In!*#*
!
& ListView 


#*
!

 
! "
7 

"
#
!> "
7
?&!"

"

*

8( 
 
ListAdapter, Android provides you
  android.R.layout.simple_list_item_multiple_choice resource
  = CheckBox for each object in the ListAdapter.

Adding header and footer widgets

Headers and footers in a ListView


*
 



!
 List  

 

  
!
  
! 
!
ListAdapter ! 

be able to select them as though they are data elements in the List structure. A very simple
example of a header item could be:
TextView header = new TextView(this);
header.setText("Header View");
list.addHeaderView(header);

1

$
 


! ListView, but instead a



* 
 ListView&

%
 
!*
(
this case you need to tell the ListView 
 


%

! 
 7!!*

addHeaderView or
addFooterView:
TextView footer = new TextView(this);
footer.setText("Footer View");
list.addFooterView(footer, null, false);

The ListView 


* 
 
that you can also provide an Object  
! AdapterView.
getItemAtPosition(index)!
(
%
7! %
%null.
@  !
8 7
B%

 

!
 ListView). The third parameter tells the ListView    





!
%
7!
$
[ 40 ]

Chapter 2

( 

"
&  



ListView
 %


 
  
 !&
$
 
 


!
 ListView object.

Creating a simple ListView

To introduce the ListView&$7!   
%
B*

   +Activity
simple ListView populated from a <string-array> resource.

Time for action creating a fast food menu

To 
*  

* !&$!*

 



%

 

&%C +  



 
!&  %


8  



1.

>android project using the Android command-line tool:

android create project -n DeliveryDroid -p DeliveryDroid -k com.
packtpub.deliverydroid -a SelectRestaurantActivity -t 3

2.
3.

Open the /res/values/strings.xml+

 %


(9@
>#* %
 #



order from:
<string-array name="restaurants">
<item>The Burger Place</item>
<item>Mick's Pizza</item>
<item>Four Buckets \'o Fruit</item>
<item>Sam\'s Sushi</item>
</string-array>

4.

Open the /res/layout/main.xml+

 %


(9@

5.

D!
%   LinearLayout.

6.

<ListView> element.

7.

Assign the <ListView> element an ID of restaurant:

<ListView android:id="@+id/restaurant"/>

8.

    

 ListView to fill_parent:
android:layout_width="fill_parent"
android:layout_height="fill_parent"

[ 41 ]

) 
* +

9.

 %#


 


 
ListView & 

/0+=
android:entries="@array/restaurants"

10.

F 
$%
! +&

 %main.xml
+
 

"" 

=
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView android:id="@+id/restaurant"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:entries="@array/restaurants"/>
</LinearLayout>

What just happened

If 

*

 !
&&
$ 
 
 
! 
+
#

6
*  choiceMode on the ListViewCHOICE_MODE_NONE, making this

!
!   

to its menu.

( 7!& android:entries 

/0+
 
 
#
 
!6
!&
AdapterView requires you to create an Adapter object to create View objects for each of
the data objects.

[ 42 ]

Chapter 2

Using the android:entries



  

 
ListView 
!


&
B

 
!G%


 AdapterView(&
%&
 %
%

=

The View objects created by the generated ListAdapter 

!#+ &

 !

K

+
  ListView. Since
#
?&
*

 7
*


!
!  

You !
*  

 
& Where should we order
from?
 *
  
Activity+ 
AndroidManifest.xml+

=
<activity
android:name=".SelectRestaurantActivity"
android:label="Where should we order from?">

Styling the standard ListAdapters

The standard ListAdapter!!*
B !
TextView!  #
!*#
!
CheckedTextView&  

 TextView!!*


&
!

*
4
%& ListAdapter
!!*
%
%
%
!!*

 !


!!
*B!
Since a ListView CHOICE_MODE_NONE
"!&
$

change the items into Button objects instead of normal TextView!3 &
ListView
 7TextView4
%&
!!!*

!
 
 
7!&ToggleButtonView
$! 
+7#%  
 


  
In t 7!$*%
!
 *
(

!



" &
+
!
  
 


+ + ?
8

 $
 !
 *
 

*!
$?  
>
+

 !
 +
!res/
values/dimens.xml>
 



 /0+=
[ 43 ]

) 
* +

<?xml version="1.0" encoding="UTF-8"?>

<resources>
<dimen name="item_outer_height">48sp</dimen>
<dimen name="menu_item_height">52sp</dimen>
<dimen name="item_inner_height">45sp</dimen>
<dimen name="item_text_size">24sp</dimen>
<dimen name="padding">15dp</dimen>
</resources>

We d
  !

 !=item_outer_height and item_
inner_height. The item_outer_height   
 !&  
item_inner_height is the height of any View object contained inside the list item.
The padding!
 
 +
+!


 
%! +dp
!


 9L(
 


 
? 

the user).
   
In t &
$
*  item_outer_height and menu_item_
height are 48sp and 52sp&  !" ! ListView rather
 ?
%!
48sp. The height of a list
!*( 
 %+& 

 
target list item if you make them too small.
 5

*5

 (  
needs to touch it, make it big.

Time for action improving the restaurant list

The 

 &$!(

  
! ? !& 7

!
(

ListView 
standard ListAdapter!!*
&

  ListAdapter object
in your Java code.

1.

>+ res/layout directory named menu_item.xml.

2.

Create the root XML element as a TextView:

<?xml version="1.0" encoding="UTF-8"?>
<TextView />

3.

Import the Android resource XML namespace:

xmlns:android="http://schemas.android.com/apk/res/android"

[ 44 ]

Chapter 2

4.

Center the text in the TextView<%=

android:gravity="center|center_vertical"

5.

We assign the textSize of the TextView to our standard item_text_size:

android:textSize="@dimen/item_text_size"

6.

The default color of the text of TextView&

 =
android:textColor="#ffffff"

7.

F  
 TextView to be the same as the ListView that contains
it. Since this is for our main menu, its height is menu_item_height:
android:layout_width="fill_parent"
android:layout_height="@dimen/menu_item_height"

8.
9.

6
  %TextView
&




menu. Open the SelectRestaurantActivity.java+
In the onCreate!
&
setContentView& 

the ListViewmain.xml:
ListView restaurants = (ListView)findViewById(R.id.restaurant);

10.

Set the restaurants ListAdapter

ArrayAdapter containing the string

values.xml+=
restaurants.setAdapter(new ArrayAdapter<String>(
this,
R.layout.menu_item,
getResources().getStringArray(R.array.restaurants)));

What just happened

F+
/0

 TextView 
to be used for each list item in our restaurant's ListView. The menu_item.xml+




 


=
<?xml version="1.0" encoding="UTF-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center|center_vertical"
android:textSize="@dimen/item_text_size"
android:textColor="#ffffff"
android:layout_width="fill_parent"
android:layout_height="@dimen/menu_item_height" />

[ 45 ]

) 
* +

Unlike our previous layout resources, menu_item.xml contained no ViewGroup 

LinearLayout). This is due to the fact that the ArrayAdapter!
 
root View of the menu_item.xml+
TextView
&  TextView in a
ViewGroup

!
&$ClassCastException.
We also created an ArrayAdapter instance to reference both our menu_item XML

& #
 *
!
the use of the android:entries
 ListView in the main.xml layout
/0
( 
&
!
% K
onCreate method in
SelectRestaurantActivity



"

=
public void onCreate(final Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
final ListView restaurants = (ListView)
findViewById(R.id.restaurant);
restaurants.setAdapter(new ArrayAdapter<String>(
this,
R.layout.menu_item,
getResources().getStringArray(R.array.restaurants)));
}

Try # *


 !
  &
$

greeted by a screen that looks a lot more like a menu:

Have a go hero developing a multiple-choice question application

Try g
"
 !*#
B*
*

Chapter 1, Developing a
Simple '. It uses LinearLayout and Button

 


 B*
&
#
 !
  *

=

Use a ListView instead of a LinearLayout

Style the ListView Button

&
! 
TextView objects

[ 46 ]

Chapter 2

"
 %
!! Button list items so that they're not
too close to each other

Creating custom adapters

F 



&


!
 

 !! 
ListView!!*
& ListAdapter!!*



us to select a Cheese  item, but not for us to request  Cheese . In order to
!
8

  

!*B**&

!?ListAdapter!!*


Creating a menu for The Burger Place

Q
 
!!&

Activity class. In
& 
&

%*8

?
 !1+
The  Place&
   
 
& ! 
 
 @ *! 
!& 

 F !
 



 
 $!67
  $
&
 

! 
 
  

quick glance).

The Burger class

(

 !&!Burger data object. The Burger class

!
 !& !
Burger the user
is ordering. Create a Burger.java+ 

"


  



=
class Burger {
final String name;
int count = 0;
public Burger(String name) {
this.name = name;
}
}

K
$
*  
 
& 
  
name and count+"#
(%





RR&!
 %7 
!
 +

" 

!
 
7* 
!

&
!"7


[ 47 ]

) 
* +

Time for action creating a Burger item layout

 + 





"!
The  Place is to design
 !! 
!  ! 
 
 
/0
4
%& ListAdapter ourselves
 *!&


TextView, but can instead build a more
complex layout.

1.
2.

>/0+ res/layout directory named burger_item.xml.

 +
  ListView.
Declare the root of the layout as a horizontal LinearLayout
   &
     
 ! ListView):
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="@dimen/item_outer_height">

3.

Next, declare a TextView&  counter for the number of


F  
 (9=
<TextView android:id="@+id/counter" />

4.

The counter7?7 !

 
 ! 
*
4
%&
bold&
*+=
android:textSize="@dimen/item_text_size"
android:textStyle="bold"

5.

F
 counter
B&
    7
the same:
android:layout_width="@dimen/item_inner_height"
android:layout_height="@dimen/item_inner_height"

6.

F

 7 counter:
android:gravity="center|center_vertical"

7.

We'll also need a text space to display the name of the burger:
<TextView android:id="@+id/text" />

8.

 7?=
android:textSize="@dimen/item_text_size"

[ 48 ]

Chapter 2

9.

F
 counter and the text label:
android:layout_marginLeft="@dimen/padding"

10.

 $ 
+ ListView& ?

 TextView
objects to be the same:
android:layout_width="fill_parent"
android:layout_height="@dimen/item_inner_height"

11.

 7
 
%*&
!  
*

 
counter4
%& 
#=
android:gravity="left|center_vertical"

What just happened?

You've just built a very nice LinearLayout ViewGroup  
 

  
!The  Place. Since the counter TextView is a separate
object from the label, it can be independently styled and managed. This makes things much
!
Z7

 
*

 !
Your complete burger_item.xml+



=
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="@dimen/item_outer_height">
<TextView android:id="@+id/counter"
android:textSize="@dimen/item_text_size"
android:textStyle="bold"
android:layout_width="@dimen/item_inner_height"
android:layout_height="@dimen/item_inner_height"
android:gravity="center|center_vertical" />
<TextView android:id="@+id/text"
android:textSize="@dimen/item_text_size"
android:layout_marginLeft="@dimen/padding"
android:layout_width="fill_parent"
android:layout_height="@dimen/item_inner_height"
android:gravity="left|center_vertical" />
</LinearLayout>

[ 49 ]

) 
* +

Time for action presenting Burger objects

The standard ListAdapter
" 

 

represented as strings. In order to display our Burger

 &


!ListAdapterQ
&

% "

class for ListAdapter!!*
! BaseAdapter.

1.

>!BurgerAdapter, and have it extend from the android.

widget.BaseAdapter class:
class BurgerAdapter extends BaseAdapter {

2.

An Adapter
 *
&
 !

 
ListView. In the BurgerAdapter

Burger
  
assign in the constructor:
private final Burger[] burgers;
BurgerAdapter(Burger... burgers) {
this.burgers = burders;
}

3.

Implement the Adapter.getCount() and Adapter.getItem(int) methods

directly on top of the array of Burger objects:
public int getCount() {
return burgers.length;
}
public Object getItem(int index) {
return burgers[index];
}

4.

An Adapter
7

%*+
 %
!&
return their index:
public long getItemId(int index) {
return index;
}

5.

When an Adapter is asked for a View

!&!%7*
View
 
F!!!!

 
 & B&Z burger_item.xml+

the LayoutInflator class from the android.view package:
private ViewGroup getViewGroup(View reuse, ViewGroup parent) {
if(reuse instanceof ViewGroup) {
return (ViewGroup)reuse;
}
[ 50 ]

Chapter 2
Context context = parent.getContext();
LayoutInflater inflater = LayoutInflater.from(context);
ViewGroup item = (ViewGroup)inflater.inflate(
R.layout.burger_item, null);
return item;
}

6.

The most important method for us in the BurgerAdapter is the getView method.
   ListView"
View object to represent each list item
it needs to display:
public View getView(int index, View reuse, ViewGroup parent) {

7.

In order to fetch the correct View

%!&
$+
 
getViewGroup method to ensure you have the burger_item.xml ViewGroup to
display the Burger item in:
ViewGroup item = getViewGroup(reuse, parent);
TextView counter = (TextView)item.findViewById(R.id.counter);
TextView label = (TextView)item.findViewById(R.id.text);

8.

F$
* 
TextView
   
! Burger
object at the requested index. The counter
  
! 
user if the current count?
=
Burger burger = burgers[index];
counter.setVisibility(
burger.count == 0
? View.INVISIBLE
: View.VISIBLE);
counter.setText(Integer.toString(burger.count));
label.setText(burger.name);
return item;

What just happened?

F

!Adapter class to present an array of Burger objects to the user in
a ListView. When a ListView invokes the Adapter.getView!
&!

pass in the View
  
!%

Adapter.getView. A View


 ! ListView4
%&  
the ListView changes, the ListView" ListAdapter to reuse each of the View

 +*!

($!



  %
&
 !
 
%

*
(
7!&
implemented the getViewGroup!

 
" B!


[ 51 ]

) 
* +

The getViewGroup!


Z burger_item.xml+

We do this using a LayoutInflator
&  7
 Activity.
setContentView(int) method loads XML layout resources. The Context
  
   
!
parent ViewGroup   ListView+
 
 

 
!(   $Burger& 
the counter TextView using the View.setVisibility!
(F& 
setVisible method takes a Boolean!& 
&setVisibility
takes an int value. The reason for this is that Android treats visibility as part of the layout

(
 counter
&*" 

&  " text#  
 (  


% "
&
=
counter.setVisibility(burger.count == 0
? View.GONE
: View.VISIBLE);

ListView

!*     *
! 
  
 +
 !&  "#
*



% ListView. When an item is highlighted, its background generally
 

&

[(
%*


4
%&ListView 
!
 &Button or EditText ListView


 *

  *
 ( &
 ListView from registering OnItemClick
events completely.
  
If you override the isEnabled(int index) method of ListAdapter,

+! ListView. A common
use of this is to turn certain items into logical separators. For example, a
*

 *
&
 +

! 75*
5

Creating TheBurgerPlaceActivity class

In order to put the Burger!
 &

 

!&
ActivityF
"
  
  ! 
&
  
!! OnItemClickListener interface. When a
+%
  
 +! ListView), objects
 %!
%
"  
 % 
occurred. Android provides a simple ListActivity class to provide some default layout
*!

 


[ 52 ]

Chapter 2

Time for action implementing TheBurgerPlaceActivity

In order to present a ListView of Burger
  BurgerAdapter&
need to create an Activity!!*

The  Place Activity




5
 5
5"5%
 ! ListView.
F  
 

 !&
 !
ListView to
Z   

 Burger.

1.

> 

"


!
TheBurgerPlaceActivity, and make sure it extends ListActivity:
public class TheBurgerPlaceActivity extends ListActivity {

2.

Override the Activity.onCreate method.

3.

Invoke the super.onCreate



!


4.

Create an instance of BurgerAdapter 

!Burger objects, and set it as the
ListAdapter for the ListActivity code to use:
setListAdapter(new BurgerAdapter(
new Burger("Plain old Burger"),
new Burger("Cheese Burger"),
new Burger("Chicken Burger"),
new Burger("Breakfast Burger"),
new Burger("Hawaiian Burger"),
new Burger("Fish Burger"),
new Burger("Vegatarian Burger"),
new Burger("Lamb Burger"),
new Burger("Rare Tuna Steak Burger")));

5.

Finally, implement the onListItemClicked!

  


=
protected void onListItemClick(
ListView parent,
View item,
int index,
long id) {
BurgerAdapter burgers = (BurgerAdapter)
parent.getAdapter();
Burger burger = (Burger)burgers.getItem(index);
burger.count++;
burgers.notifyDataSetInvalidated();
}

[ 53 ]

) 
* +

What just happened?

 !!*

TheBurgerPlaceActivity has a simple hard-coded list of Burger
objects to display to the user and creates a BurgerAdapter to turn these objects into the
burger_item View
  
F  !&! count of the related Burger object
in the onItemClick method. We then call notifyDataSetInvalidated() on the
BurgerAdapter !

! ListView that the underlying data has
changed. When the data changes, the ListView#%
" Adapter.getView
method for each item in the ListView.
The items in a ListView8*%*View objects. This means
that the Adapter!


 View  !


!!
*%
   View*
&
update it directly.

Registering and starting TheBurgerPlaceActivity

(

 Activity 
!
!&


register it in the AndroidManifest.xml+Q&
 AndroidManifest.xml
+

(9@&
 

<activity> code into the
<application>...</application> block:
<activity android:name=".TheBurgerPlaceActivity"
android:label="The Burger Place\'s Menu">
<intent-filter>
<action android:name=
"com.packtpub.deliverydroid.TheBurgerPlaceActivity"/>
</intent-filter>
</activity>

To start the Activity, you'll need to go back to SelectRestaurantActivity

and implement the OnItemClickListener < 
Adapter on the restaurants ListView, set SelectRestaurantActivity
as the OnItemClickListener of the restaurants ListView. You can start
TheBurgerPlaceActivity using an Intent object in the onItemClick method. Your
SelectRestaurantActivity



"" 


=
public class SelectRestaurantActivity extends Activity
implements OnItemClickListener {
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
[ 54 ]

Chapter 2
ListView restaurants = (ListView)
findViewById(R.id.restaurant);
restaurants.setAdapter(new ArrayAdapter<String>(
this,
R.layout.menu_item,
getResources().getStringArray(R.array.restaurants)));
restaurants.setOnItemClickListener(this);
}
public void onItemClick(
AdapterView<?> parent,
View item,
int index,
long id) {
switch(index) {
case 0:
startActivity(new Intent(
this,
TheBurgerPlaceActivity.class));
break;
}
}
}

F 
 *
 !
&
$
%
to 

L  5]"5

!"
"
 !

[ 55 ]

) 
* +

Pop quiz
^ < 
!

ListView object to CHOICE_MODE_SINGLE=
a. Add a RadioButton to each item.
 9

    
c.

Make the ListView"55!

2. A ListAdapter+
ListView!F "
to reuse a View
!
3
a. When the data model is invalidated or changed.
b. On every item, for rubber-stamping.
c.

When the ListView 

3. When a ListView
& 



*
=
 
%
 
!
 4
?

 
 &
%
 
!
 
  
 !

 


The ListView class is great for displaying small to medium amounts of data, but there
*! Z


  

! 
!*
 "
!
*
( 
 %!&

 !& 
! %% !
@%
  !




 + & 
 "
 7?
$ %




8


I"
!&


 !*!=
&&
 "& !
 &
%

! !
 
ExpandableListView for this type of grouping. Each item is nested inside a group, and a


  ($"%&

7
%
$!


!"
#
 *! %ExpandableListView

 
to keep the amount of data to a reasonable length. In these cases, consider
%
 + ! 

More! *%&ListView for the groups, and a
separate Activity for the nested items.

[ 56 ]

Chapter 2

 


 


Since the ExpandableList
%
&$
"
a normal ListAdapter  
 %(& 
ExpandableListAdapter  

!
=

 
%

 
 !%F !!*
!ExpandableListAdapter,
it's generally easiest to have your ExpandableListAdapter!!*
  
!
the BaseExpandableListAdapter&
%!!*

%*

and triggering.
The ExpandableListAdapter


 

 
!
   



! "
#

z
!

7 



 
$View object as
returned by the ExpandableListAdapter. To stop your group label from being

 
&
$


!View
structures. The default padding for a list item is available as the theme parameter
expandableListPreferredItemPaddingLeft&  
!"
=
android:paddingLeft=
"?android:attr/expandableListPreferredItemPaddingLeft"

In order to keep your ExpandableListView looking consistent, it's a good idea to add the
!!


 
! !
 ExpandableListView
"
 7  
 
&
<!
 
# & 

 "
7

Have a go hero - ordering customized pizzas

For the Mick's Pizza7!&$

!

???

@ 


!&  $$
$
$
8$ ??&
$7$
7!&
7 [
TextView

?

 !  
TextView
 !
 
 TextView! 
toppings are not included, On 
&Extra for toppings that the
!
  !

>
!
 ToppingCatagory objects, containing a name and an array of
PizzaTopping
K
$


!   

&
 B*
K
$

!!PizzaToppingAdapter class, extending the
BaseExpandableListAdapter class. Make use of the default Android simple_
expandable_list_item_1


 
&
!?
layout resource for the item labels.

[ 57 ]

) 
* +

F  
??
&   %=$%,
On, and !".
Using the ListView.getAdapter()!



ExpandableListAdapter!!*
&
To fetch the original ExpandableListAdapter&


the getExpandableListAdapter()!
K



make use of the ExpandableListView. OnChildClickListener
interface to receive click events.

F 
Activity
!&

 %  

"
! 
" 

=

Using the GridView class

A GridView is a ListView +7!

!&#
# &

#
#

! # !
*
!"
GridView. The GridView class makes use of a ListAdapter in the exact same format
as ListView4
%&
+7
!
&GridView%
for lists of icons.
& '
%(
A GridView+!

!*


than a ListView& 7



! 7

!*
Q
!

%&



"
  7(

?!
B" 7& "
 


F 
 %
!*
 
&$



 4
%&!! 


B    **


[ 58 ]

Chapter 2

F

77!&$

 )*+) menu, using GridView.
The GridView %

 !
 !& !
 !

 

& 
!&

"! " 

*
!
 77!

 !!*

 ListAdapter, since it's
largely the same as the ListAdapter
.
,   

It's important to think about icons on a touchscreen device. They need to be
even more self-explanatory than usual, or be accompanied by some text. With
a touchscreen, it's very hard to provide any sort of contextual help, such as a


#*(  
  
&$

 +
z
 &!" 


#*%

Time for action creating the fruit icon

I

 %

 
&

/0
+@ 
 GridView
 
&7
 !!ListView. We create each item as an
ImageView
 
& TextView

 

1.

>+ res/layout directory named fruit_item.xml.

2.

9 

!
 
%*LinearLayout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

3.

Create the ImageView! %


=
<ImageView android:id="@+id/icon"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>

4.

Next, create the TextView! % =

<TextView android:id="@+id/text"
android:textSize="@dimen/item_description_size"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center|center_vertical" />

[ 59 ]

) 
* +

What just happened?

The fruit_item.xml+%!


!
&


many other types of icons represented as a grid. ImageView
& &!

 

 ?(
%
7!& 

LinearLayout has the

   +fill_parent. When placed in a GridView as a single item,
using fill_parent? LinearLayout
+ 
%

 !
 *GridView).

Displaying icons in a GridView

We need an object model and ListAdapter in order to display the fruits to the user in a
GridView   {
 
($
!ListAdapter
!!*



! 
/0+
 

Q
 !
 &


   $!
>
a FruitItem 

"  


=
class FruitItem {
final String name;
final int image;
FruitItem(String name, int image) {
this.name = name;
this.image = image;
}
}

( 
&  
!
  F 
 *

(9
&$ Q
 
7!$! 
 8
   %

*


 
*



 
Bitmap object
in each FruitItem4
%& 
 %!
  !!!

  FruitItem
*

 
(

 
L"



?
 
&

to put them in the res/drawable directory.
-

, .
|&$


*


!!
L6|+
 + 
!

&!"
  %G%# +! L6|
!"GL|

& %%
8

 &
 
 !"!
!
 


[ 60 ]

Chapter 2

Time for action building the fruit menu

For the )*+)!&$

ListAdapter!!*


render the FruitItem objects into the fruit_item.xml layout resources. We'll also need
a layout resource for the GridView  

Activity class.

1.
2.
3.

>!FruitAdapter extending BaseAdapter in the root

package of the project.
FruitAdapter needs to hold and represent an array of FruitItem
objects. Implement the class using the same structure as the BurgerAdapter.

In the ListAdapter.getView!
& 
+ 
fruit_item.xml layout resource:
FruitItem item = items[index];
TextView text = ((TextView)view.findViewById(R.id.text));
ImageView image = ((ImageView)view.findViewById(R.id.icon));
text.setText(item.name);
image.setImageResource(item.image);

4.
5.

>



 GridView 
 )
*+) menu, and name it res/layout/four_buckets.xml.
L
 

  
!GridView:
<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:numColumns="3"
android:horizontalSpacing="5dip"
android:verticalSpacing="5dip"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>

What just happened?

 four_buckets.xml layout resource has nothing but a GridView. This is unlike
 
 

$%
 & GridView has no ID.
For this example, the fruit menu Activity

  GridView, so
 $

(9 

F
+
?

%*
5dip. A GridView
$ 
 %
&
  !"
 B 
(

 
&"

!
  
 

[ 61 ]

) 
* +

Time for action creating the FourBucketsActivity

S
" 

 
GridView, and no ID reference,
$

" 
  *

 Activity step-by-step. Unlike previous
Activity!!*
& 
 GridView+
four_buckets.xml, and this means loading it manually.

1.

*

$

"=
public class FourBucketsActivity extends Activity {

2.

Override the onCreate!

&%
" !!*
=
protected void onCreate(final Bundle istate) {
super.onCreate(istate);

3.

Get the LayoutInflator instance for your Activity object:

LayoutInflater inflater = getLayoutInflater();

4.

(Z four_buckets.xml resource and cast its contents directly to a

GridView object:
GridView view = (GridView)inflater.inflate(
R.layout.four_buckets,
null);

5.

Set the ListAdapter of the view



 FruitAdapter
&
 FruitAdapter 
!FruitItem objects:
view.setAdapter(new FruitAdapter(
new FruitItem("Apple", R.drawable.apple),
new FruitItem("Banana", R.drawable.banana),
new FruitItem("Black Berries", R.drawable.blackberry),
// and so on

6.

Use setContentView to make the GridView your root View object:

setContentView(view);

7.
8.

Register your FourBucketsActivity class in your AndroidManifest.xml.

Add a case to the SelectRestaurantActivity
 
FourBucketsActivity  

What just happened?

You just completed the ) * + )!( 
# *



!
&
$



  
 % ^
 
 %"

[ 62 ]

Chapter 2

If you look through the Activity

!*
&
$
*   $
setContentView method, there's no corresponding getContentView method. Take a



"

* addContentView method. An Activity object may
have any number of View
 
5
5  
!!*

getContentView method.
I


 !*
&Z 

% 
getLayoutInflator() method used is simply a shortcut for LayoutInflator.
from(this). Instead of using an ID and findViewById&! View returned
directly to a GridView, since that's all that our four_buckets.xml+
!  
! ArrayAdapter
" TextView
( 
!"
 !
&
 %
AdapterView<ListAdapter>, in
  
 %!!*
 + ListView4
%&

 
$ %% 
 7!
( 

# *
&
FourBucketsActivity

 !
 


=

Have a go hero Sam's Sushi

The last restaurant on the menu is Sam's Sushi. Try using the Spinner
 
a GridView to create a composite sushi menu. Place the spinner at the top of the screen,
 
*

8
 =

Sashimi

Maki Roll

Nigiri

Oshi
[ 63 ]

) 
* +

California Roll

Q 


Hand Roll

]
 Spinner, use a GridView


 8
+   

4
!*
=

Tuna

K


Snapper

Salmon

Eel

Sea Urchin

Squid

Shrimp

The Spinner class makes use of the SpinnerAdapter instead of a ListAdapter.

The SpinnerAdapter*
View
   

#
! !
 
 android.R.layout.simple_
dropdown_item_1line
4
%&
 7!&
%&


make use of the android:entries
 Spinner XML element.

Summary
9

 !

!!
B!
!
*
&

!8
*
% ListView is probably one of the most commonly
 
&



%!

& 
!
!!
!*#
#


The GridView8*%%

ListView&
*
  
%(
 %
!
%
%7& 

?! !
B" (

"+&
in a GridView&

+

7


!" 
 
!


" 
 

for other items to be displayed.

[ 64 ]

Chapter 2

Building custom Adapter





"
!


% 
styling of the ListView&
!  
! 
!&
$

K

&
7!&
  
!%
Adapter  !!View
* %
 
data. Take a good look at the default Adapter!!*
& %

B!& 
 
!


( 7 &"

"
!&!
?View classes
 

% !
% 
&  !+&
 
!?!

+
!%


[ 65 ]