8/12/2019 Ejercicio3 Android
1/29
2Presenting Data for Views
Activity
Most Android data-centric classes are built on top ofAdapterobjects, and thus extend the
AdapterViewclass. AnAdapter , Adapterobject is used to create Viewobjects for data
Viewfor each of the data
robust of structures).
The most commonAdapterViewclasses you'll encounter are: ListView, Spinner, and
GridView ListViewclass and GridView, and explore
8/12/2019 Ejercicio3 Android
2/29
[38 ]
Listing and selecting data
TheListView
by a ListAdapter
data objects in a View. A ListView
in a ScrollView.
ListView choice modesThe ListView
constants: CHOICE_MODE_NONE, CHOICE_MODE_SINGLE, and CHOICE_MODE_MULTIPLE.
The mode for a ListViewcan be set by using the android:choiceMode
ListView.setChoiceModemethod in Java.
The choice mode of a ListView ListView ListView ListAdapter Viewobjectsfor each of the items that should appear in the ListView.
No selection mode CHOICE_MODE_NONE
ListView. The reason is it makes
ListView
ListViewis to
ListViewobject displaying a list of
Stringarray Java object, taken from one of the defaultApiDemos
8/12/2019 Ejercicio3 Android
3/29
Chapter 2
[39 ]
Single selection mode CHOICE_MODE_SINGLE
In this mode, the ListViewacts more like a desktop List
Activity. It's quite common for a
ListView
ListAdapterobject.
In the android R ListView
list.setAdapter(new ArrayAdapter(
this,
android.R.layout.simple_list_item_single_choice,
getResources().getStringArray(R.array.colors)));
ArrayAdapterclass from the android.widgetpackage.
simple_list_
item_single_choice
display items in a ListView CHOICE_MODE_SINGLE. Most typically t
a RadioButtonfor each object in the ListAdapter.
8/12/2019 Ejercicio3 Android
4/29
[40 ]
Multiple selection mode CHOICE_MODE_MULTIPLE
In ListView
ListAdapter, Android provides you
android.R.layout.simple_list_item_multiple_choiceresource
CheckBoxfor each object in the ListAdapter.
Adding header and footer widgetsHeaders and footers in a ListView
List
ListAdapter
be able to select them as though they are data elements in the Liststructure. A very simple
example of a header item could be:
TextView header = new TextView(this);
header.setText("Header View");
list.addHeaderView(header);
ListView, but instead a ListView
this case you need to tell the ListView
addHeaderViewor
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) null.
ListView). The third parameter tells the ListView
8/12/2019 Ejercicio3 Android
5/29
Chapter 2
[41 ]
ListView
ListViewobject.
Creating a simple ListViewTo introduce the ListView
Activity
simple ListViewpopulated from a resource.
Time for action creating a fast food menu
To
1. androidproject using the Android command-line tool:
android create project -n DeliveryDroid -p DeliveryDroid -k com.packtpub.deliverydroid -a SelectRestaurantActivity -t 3
2. Open the /res/values/strings.xml
3.
order from:
The Burger PlaceMick's Pizza
Four Buckets \'o FruitSam\'s Sushi
4. Open the /res/layout/main.xml
5. LinearLayout.
6. element.
7. Assign the element an ID of restaurant:
8. ListViewto fill_parent:
android:layout_width="fill_parent"android:layout_height="fill_parent"
8/12/2019 Ejercicio3 Android
6/29
[42 ]
9.
ListView
android:entries="@array/restaurants"
10. main.xml
What just happenedIf
choiceModeon the ListView CHOICE_MODE_NONE, making this
to its menu.
android:entries
AdapterViewrequires you to create anAdapterobject to create Viewobjects for each ofthe data objects.
8/12/2019 Ejercicio3 Android
7/29
Chapter 2
[43 ]
Using the android:entries
ListView
AdapterView
The Viewobjects created by the generated ListAdapter
ListView. Since
You Whereshouldweorder
from? Activity
AndroidManifest.xml
Styling the standard ListAdaptersThe standard ListAdapter
TextView
CheckedTextView TextView
ListAdapter
Since a ListView CHOICE_MODE_NONE change the items into Buttonobjects instead of normal TextView
ListView TextView
ToggleButtonView
In t
res/
values/dimens.xml
8/12/2019 Ejercicio3 Android
8/29
[44 ]
48sp 52sp
45sp
24sp
15dp
We d item_outer_heightand item_
inner_height. The item_outer_height
item_inner_heightis the height of any Viewobject contained inside the list item.
The padding
dp
the user).
In t item_outer_heightand menu_item_heightare 48spand 52sp ListViewrather 48sp. The height of a list
target list item if you make them too small.
needs to touch it, make it big.
Time for action improving the restaurant listThe
ListView
standard ListAdapter ListAdapterobject
in your Java code.
1. res/layoutdirectory named menu_item.xml.
2. Create the root XML element as a TextView:
3. Import the Android resource XML namespace:
xmlns:android="http://schemas.android.com/apk/res/android"
8/12/2019 Ejercicio3 Android
9/29
Chapter 2
[45 ]
4. Center the text in the TextView
android:gravity="center|center_vertical"
5. We assign the textSizeof the TextViewto our standard item_text_size:
android:textSize="@dimen/item_text_size"
6. The default color of the text of TextView
android:textColor="#ffffff"
7. TextViewto be the same as the ListViewthat 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. TextView menu. Open the SelectRestaurantActivity.java
9. In the onCreate setContentView
the ListView main.xml:
ListView restaurants = (ListView)findViewById(R.id.restaurant);
10. Set the restaurants ListAdapter ArrayAdaptercontaining the string-
values.xml
restaurants.setAdapter(new ArrayAdapter(this,R.layout.menu_item,
getResources().getStringArray(R.array.restaurants)));
What just happened TextView
to be used for each list item in our restaurant's ListView. The menu_item.xml
8/12/2019 Ejercicio3 Android
10/29
[46 ]
Unlike our previous layout resources, menu_item.xmlcontained no ViewGroup
LinearLayout). This is due to the fact that theArrayAdapter
root Viewof the menu_item.xml TextView TextViewin a
ViewGroup ClassCastException.
We also created anArrayAdapterinstance to reference both our menu_itemXML
the use of the android:entries ListViewin the main.xmllayout
onCreatemethod 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( 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 Chapter1, Developinga
Simple. It uses LinearLayoutand Button
Use a ListViewinstead of a LinearLayout
Style the ListView Button
TextViewobjects
8/12/2019 Ejercicio3 Android
11/29
Chapter 2
[47 ]
Buttonlist items so that they're not
too close to each other
Creating custom adapters
ListView ListAdapter
us to select a Cheeseitem, but not for us to request Cheese. In order to
ListAdapter
Creating a menu for The Burger Place
Activityclass. In
ThePlace
quick glance).
The Burger class
Burgerdata object. The Burgerclass
Burgerthe user
is ordering. Create a Burger.java
class Burger {
final String name;
int count = 0;
public Burger(String name) {
this.name = name;
}
}
nameand count
8/12/2019 Ejercicio3 Android
12/29
[48 ]
Time for action creating a Burger item layout
ThePlaceis to design
ListAdapterourselves
TextView, but can instead build a more
complex layout.
1. res/layoutdirectory named burger_item.xml.
ListView.
2. Declare the root of the layout as a horizontalLinearLayout
ListView):
3. Next, declare a TextView counterfor the number of
4. The counter
bold
android:textSize="@dimen/item_text_size"android:textStyle="bold"
5. counter
the same:
android:layout_width="@dimen/item_inner_height"android:layout_height="@dimen/item_inner_height"
6. counter:
android:gravity="center|center_vertical"
7. We'll also need a text space to display the name of the burger:
8.
android:textSize="@dimen/item_text_size"
8/12/2019 Ejercicio3 Android
13/29
Chapter 2
[49 ]
9. counterand the textlabel:
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.
counter
android:gravity="left|center_vertical"
What just happened?
You've just built a very nice LinearLayoutViewGroup ThePlace. Since the counterTextViewis a separate
object from the label, it can be independently styled and managed. This makes things much
Your complete burger_item.xml
8/12/2019 Ejercicio3 Android
14/29
8/12/2019 Ejercicio3 Android
15/29
8/12/2019 Ejercicio3 Android
16/29
[52 ]
The getViewGroup burger_item.xml
We do this using a LayoutInflator Activity.
setContentView(int)method loads XML layout resources. The Context
parentViewGroup ListView
Burger
the counter TextViewusing the View.setVisibility
setVisiblemethod takes a Boolean setVisibility
takes an intvalue. 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
ListView
Buttonor EditText ListView
ListViewfrom registering OnItemClick
events completely.
If you override the isEnabled(intindex)method of ListAdapter, ListView. A commonuse of this is to turn certain items into logical separators. For example, a
Creating TheBurgerPlaceActivity classIn order to put the Burger
Activity
OnItemClickListenerinterface. When a
ListView), objects
occurred. Android provides a simple ListActivityclass to provide some default layout
8/12/2019 Ejercicio3 Android
17/29
Chapter 2
[53 ]
Time for action implementing TheBurgerPlaceActivity
In order to present a ListViewof Burger BurgerAdapter need to create anActivity ThePlace Activity
ListView.
ListViewto
Burger.
1.
TheBurgerPlaceActivity, and make sure it extends ListActivity:
public class TheBurgerPlaceActivity extends ListActivity {
2. Override theActivity.onCreatemethod.
3. Invoke the super.onCreate
4. Create an instance of BurgerAdapter Burgerobjects, and set it as the
ListAdapterfor the ListActivitycode 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();
}
8/12/2019 Ejercicio3 Android
18/29
[54 ]
What just happened? TheBurgerPlaceActivityhas a simple hard-coded list of Burger
objects to display to the user and creates a BurgerAdapterto turn these objects into theburger_itemView
countof the related Burgerobject
in the onItemClickmethod. We then call notifyDataSetInvalidated()on the
BurgerAdapter ListViewthat the underlying data has
changed. When the data changes, the ListView Adapter.getView
method for each item in the ListView.
The items in a ListView Viewobjects. This means
that theAdapter View
View
update it directly.
Registering and starting TheBurgerPlaceActivity Activity
register it in theAndroidManifest.xml AndroidManifest.xml
code into the
...block:
To start theActivity, you'll need to go back to SelectRestaurantActivity
and implement the OnItemClickListener
Adapteron the restaurantsListView, set SelectRestaurantActivity
as the OnItemClickListenerof the restaurantsListView. You can start
TheBurgerPlaceActivityusing an Intentobject in the onItemClickmethod. Your
SelectRestaurantActivity
public class SelectRestaurantActivity extends Activity
implements OnItemClickListener {
@Override public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
8/12/2019 Ejercicio3 Android
19/29
Chapter 2
[55 ]
ListView restaurants = (ListView)
findViewById(R.id.restaurant);
restaurants.setAdapter(new ArrayAdapter(
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;
} }
}
to
8/12/2019 Ejercicio3 Android
20/29
[56 ]
Pop quiz
ListViewobject to CHOICE_MODE_SINGLEa. Add a RadioButtonto each item.
c. Make the ListView
2. A ListAdapter ListView
to reuse a View
a. When the data model is invalidated or changed.
b. On every item, for rubber-stamping.
c. When the ListView
3. When a ListView
The ListViewclass is great for displaying small to medium amounts of data, but there
I
ExpandableListViewfor this type of grouping. Each item is nested inside a group, and a
ExpandableListView to keep the amount of data to a reasonable length. In these cases, consider
More ListViewfor the groups, and aseparateActivityfor the nested items.
8/12/2019 Ejercicio3 Android
21/29
Chapter 2
[57 ]
Since the ExpandableList
a normal ListAdapter ExpandableListAdapter
ExpandableListAdapter,
it's generally easiest to have your ExpandableListAdapter
the BaseExpandableListAdapter
and triggering.
The ExpandableListAdapter
Viewobject 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 parameterexpandableListPreferredItemPaddingLeft
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
In order to keep your ExpandableListViewlooking consistent, it's a good idea to add the
ExpandableListView
Have a go hero - ordering customized pizzas
For the Mick'sPizza
TextView
TextView TextView
toppings are not included, On Extrafor toppings that the
ToppingCatagoryobjects, containing a name and an array of
PizzaTopping
PizzaToppingAdapterclass, extending the
BaseExpandableListAdapterclass. Make use of the default Android simple_
expandable_list_item_1 layout resource for the item labels.
8/12/2019 Ejercicio3 Android
22/29
[58 ]
,
On, and .
Using the ListView.getAdapter() ExpandableListAdapter To fetch the original ExpandableListAdapter the getExpandableListAdapter() make use of the ExpandableListView.OnChildClickListenerinterface to receive click events.
Activity
Using the GridView class
A GridViewis a ListView
GridView. The GridViewclass makes use of a ListAdapterin the exact same format
as ListView GridView
for lists of icons.
A GridView than a ListView
8/12/2019 Ejercicio3 Android
23/29
8/12/2019 Ejercicio3 Android
24/29
[60 ]
What just happened?The fruit_item.xml
many other types of icons represented as a grid. ImageView LinearLayouthas the
fill_parent. When placed in a GridViewas a single item,
using fill_parent LinearLayout
GridView).
Displaying icons in a GridViewWe need an object model and ListAdapterin order to display the fruits to the user in a
GridView ListAdapter
a FruitItem
class FruitItem {
final String name;
final int image;
FruitItem(String name, int image) {
this.name = name;
this.image = image;
}
}
Bitmapobject
in each FruitItem
FruitItem
to put them in the res/drawabledirectory.
8/12/2019 Ejercicio3 Android
25/29
Chapter 2
[61 ]
Time for action building the fruit menu
For the ListAdapter render the FruitItemobjects into the fruit_item.xmllayout resources. We'll also need
a layout resource for the GridView Activityclass.
1. FruitAdapterextending BaseAdapterin the root
package of the project.
2. FruitAdapterneeds to hold and represent an array of FruitItem
objects. Implement the class using the same structure as the BurgerAdapter.
3. In the ListAdapter.getView
fruit_item.xmllayout 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. GridView
menu, and name it res/layout/four_buckets.xml.
5. GridView:
What just happened? four_buckets.xmllayout resource has nothing but a GridView. This is unlike
GridViewhas no ID.
For this example, the fruit menuActivity GridView, so
5dip. A GridView
8/12/2019 Ejercicio3 Android
26/29
[62 ]
Time for action creating the FourBucketsActivity
S GridView, and no ID reference, Activitystep-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 LayoutInflatorinstance for yourActivityobject:
LayoutInflater inflater = getLayoutInflater();
4. four_buckets.xmlresource and cast its contents directly to a
GridViewobject:
GridView view = (GridView)inflater.inflate(R.layout.four_buckets,null);
5. Set the ListAdapterof the view FruitAdapter
FruitAdapter FruitItemobjects:
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 setContentViewto make the GridViewyour root Viewobject:
setContentView(view);
7. Register your FourBucketsActivityclass in yourAndroidManifest.xml.
8. Add a case to the SelectRestaurantActivity
FourBucketsActivity
What just happened?You just completed the
8/12/2019 Ejercicio3 Android
27/29
Chapter 2
[63 ]
If you look through theActivity
setContentViewmethod, there's no correspondinggetContentViewmethod. Take a
addContentViewmethod. AnActivityobject may
have any number of View
getContentViewmethod.
I
getLayoutInflator()method used is simply a shortcut for LayoutInflator.
from(this). Instead of using an ID and findViewById Viewreturned
directly to a GridView, since that's all that our four_buckets.xml
ArrayAdapter TextView
AdapterView, in
ListView
FourBucketsActivity
Have a go hero Sam's Sushi
The last restaurant on the menu is Sam'sSushi. Try using the Spinner
a GridViewto create a composite sushi menu. Place the spinner at the top of the screen,
Sashimi
Maki Roll Nigiri
Oshi
8/12/2019 Ejercicio3 Android
28/29
[64 ]
California Roll
Hand Roll
Spinner, use a GridView
Tuna
Snapper
Salmon
Eel
Sea Urchin
Squid
Shrimp
The Spinnerclass makes use of the SpinnerAdapterinstead of a ListAdapter.
The SpinnerAdapter View
android.R.layout.simple_
dropdown_item_1line
make use of the android:entries SpinnerXML element.
Summary
ListViewis probably one of the most commonly
The GridView ListView
in a GridView
for other items to be displayed.
8/12/2019 Ejercicio3 Android
29/29
Chapter 2
[65 ]
Building customAdapter
styling of the ListView
Adapter View
data. Take a good look at the defaultAdapter
Viewclasses