Mobile (Android)

Application Development

Android Adapters
List View & Grid View

List View Grid View

Displays a scrolling Displays a scrolling

single column list. grid of columns and
rows.

2
List View & Grid View
 The content for “List View” & “Grid View” is dynamic.

 These are populated with views at runtime.

3
List View & Grid View
In order to implement functionality:
 Add each view item inside the List or Grid.

 Populate each view item with content.

 Since we can have many items inside List or Grid, we may

need to implement scrolling & pagination.

 We also have to write additional code to identify the click

event on a particular item.

4
List View & Grid View
Note that items in both the List & Grid:
 Are of same type. i.e., TextView, ImageView, etc.

 Need to be accessed and added at runtime from some data

source for example, array, database, etc.

5
What We Need?
We need Android Framework to provide us with:
 An object that can:
 Provide access to the data items.
 Be responsible for making a View for each item in the
data set.

 A ViewGroup:
 Whose children are determined by the above object.
 That provides mechanism to handle click event on
particular list items.
 That takes care of scrolling & pagination.

6
Good News!
Android Framework provides us with:
 Adapter Class:
 Provides access to the data items.
 Responsible for making a View for each item in the data
set.

 AdapterView Class:
 Whose children are determined by an Adapter.
 Provide mechanism to handle click event on particular
list items.
 Takes care of scrolling & pagination.
 ListView & GridView are subclasses of AdapterView.
7
Spinner
 Spinner and Gallery (Gallery has been deprecated since API
16) are also commonly used subclasses of AdapterView.

Spinners provide a quick way to

select one value from a set. In the
default state, a spinner shows its
currently selected value. Touching
the spinner displays a dropdown
menu with all other available values,
from which the user can select a
new one.

8
Adapter
 An Adapter object acts as a bridge between an
AdapterView and the underlying data for that
view.
 The Adapter provides access to the data items.
 The Adapter is also responsible for making a View
for each item in the data set.

9
Adapter (Conceptual
Diagram)

• List View • ArrayAdapter • Array

• Grid View • SimpleCursorAdapter • Database
• Spinner

10
Adapter (Conceptual
Diagram)

11
Using Adapter &
AdapterView
1. Add AdapterView to Activity (i.e., Add in XML Layout) – list,
grid, spinner

2. Define Date Source (e.g. Array in Code or in XML “string-

array”)

3. Create Adapter (e.g., ArrayAdapter)

 Specify context, layout to be used for each view, and the

string array

4. Get reference to AdapterView (use findViewById() method)

5. Set Adapter on Adapter View (use setAdapter() method)

6. Set Event Listener (if needed. e.g., onItemClick())

12
 ArrayAdapter
 Consider you have an array of strings you want to
display in a ListView, initialize a new ArrayAdapter
using a constructor to specify the layout for each
string and the string array −
ArrayAdapter adapter = new ArrayAdapter<String>(this, R.layout.ListView,
StringArray);

 Parameters of Array Adapter

 this is the application context.
 R.layout.ListView is defined in XML file and
having TextView for each string in the array.
 StringArray is an array of strings which will be
populated in the text view.
13
ArrayAdapter Examples
 List View
 Grid View
 Spinner

14
Example:
List View With Array
Adapter

15
1. Add AdapterView
<RelativeLayout
... >

<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</ListView>

</RelativeLayout>

16
2. Define Date Source
String[] months = {"January", "February", "March", "April",
"May", "June", "July", "August", "September", "October",
"November", "December"};

17
3. Create Adapter
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, months);

18
4. Get reference to
AdapterView
ListView listview = (ListView) findViewById(R.id.listView1);

19
5. Set Adapter on Adapter
View
listview.setAdapter(adapter);

20
6. Set Event Listener
listview.setOnItemClickListener(new OnItemClickListener()
{
public void onItemClick(AdapterView<?> parent, View v, int
position, long id) {

Toast.makeText(getApplicationContext(), months[position],
Toast.LENGTH_SHORT).show();

}
});

21
ListView with
ChoiceMode
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:divider="@color/colorAccent"
android:dividerHeight="1dp“
android:choiceMode="multipleChoice>
</ListView>

22
ListView with
ChoiceMode
ArrayAdapter<String> adapter = new
ArrayAdapter<String>(this,
android.R.layout.simple_list_item_multiple_choice, data);

23
Example:
Grid View With Array
Adapter

24
1. Add AdapterView
<RelativeLayout
... >

<GridView
android:id="@+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:numColumns="3" >
</GridView>

</RelativeLayout>

25
2. Define Date Source
In “strings.xml” File:
<string-array name="alphabets_array">
<item>A</item>
<item>B</item>
<item>C</item>
. . .
<item>Z</item>
</string-array>

26
2. Define Date Source
In Activity’s “.java” File:
// You can declare outside (onCreate) method, But don’t
initialize
String[] alphabets;

// Get values from XML resource file

alphabets =
getResources().getStringArray(R.array.alphabets_array);

27
3. Create Adapter
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, alphabets);

28
4. Get reference to
AdapterView
GridView gridview = (GridView) findViewById(R.id.gridView1);

29
5. Set Adapter on Adapter
View
gridview.setAdapter(adapter);

30
6. Set Event Listener
gridview.setOnItemClickListener(new OnItemClickListener()
{
public void onItemClick(AdapterView<?> parent, View v, int
position, long id)
{
Toast.makeText(getApplicationContext(), "You Clicked: "
+ alphabets[position], Toast.LENGTH_SHORT).show();
}
});

31
Example:
Spinner With Array
Adapter

32
1. Add AdapterView
<RelativeLayout
... >

<Spinner
android:id="@+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />

. . .
</RelativeLayout>

33
2. Define Date Source
In “strings.xml” File:
<string-array name="sports_array">
<item>Badminton</item>
<item>Rugby</item>
<item>Squash</item>
<item>Tennis</item>
<item>Soccer</item>
<item>Field Hockey</item>
<item>Cricket</item>
<item>Basketball</item>
<item>Ice Hockey</item>
<item>Baseball</item>
<item>Cycling</item>
<item>Football</item>
</string-array>

34
2. Define Date Source
In Activity’s “.java” File:
// You can declare outside (onCreate) method, But don’t
initialize
String[] sports;

// Get values from XML resource file

sports = getResources().getStringArray(R.array. sports_array);

35
3. Create Adapter
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_dropdown_item, sports);

36
4. Get reference to
AdapterView
Spinner spinner = (Spinner) findViewById(R.id.spinner1);

37
5. Set Adapter on Adapter
View
spinner.setAdapter(adapter);

38
6. Set Event Listener
spinner.setOnItemSelectedListener(new
AdapterView.OnItemSelectedListener()
{
public void onItemSelected(AdapterView<?> parent, View view,
int pos, long id)
{
Toast.makeText(getApplicationContext(), "You Clicked: "
+ sports[pos], Toast.LENGTH_SHORT).show();
}

@Override
public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub

}
});

39
How to Access Spinner
Value?
Spinner spinner = (Spinner) findViewById(R.id.spinner1);

int selected_sport = spinner.getSelectedItemPosition();

40
 Custom Listview with Image
and Text
 The standard ListView only displays
a list of items.
 while it may suffice when you
simply need to show a list of text,
it’s not enough for more refined
applications. in this example, you’ll
see how you’ll be able to customize
the ListView so that you’ll be able
to show pictures, multiple lines of
text, and more.

41
 Custom ListView
 Most useful widget is the ListView.
 By default android renders only a single TextView in each of
the ListView's row and binds string data through an
adapter.
 You can customize the ListView's row and place your own
widget items in it and then
bind data through your own
custom adapter.

42
 1. Create Layout with a
ListView
 Create a simple layout and declare a ListView in it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.android.customviewapplication.MainActivity">

<ListView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</ListView>
</RelativeLayout>
43
2. Create the layout for
listview row
 This will be the layout in which you can
customize your list row.
 This will be re-inflated every time a new entry is
made to the listview.
 The widgets in this layout will depend on your
requirement, like
 For example,
 If you are developing a contact list then you will only
need a ImageView and TextView
 If you are developing an animals app then you might
consider adding another TextView for the animal
description apart from animal icon and animal name.

44
 2. Create the layout for
listview row
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >

<ImageView
android:id="@+id/icon"
android:layout_width="60dp"
android:layout_height="60dp"
android:padding="5dp" />

<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">

<TextView
android:id="@+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:padding="2dp"
android:textColor="#33CC33" />
<TextView
android:id="@+id/itemDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Item Description"
android:layout_marginLeft="10dp"/>
</LinearLayout>
</LinearLayout> 45
 3. Create Custom Adapter
public class CustomListAdapter extends ArrayAdapter<String> {

private final String[] itemName;

private final int[] imageId;
private final String[] itemDescription;

public CustomListAdapter(Activity context, int[] imgId, String[] itemNam, String[] itemDesc) {

super(context, R.layout.list_item, itemNam);

this.imageId = imgId;
this.itemName = itemNam;
this.itemDescription = itemDesc;
}

public View getView(int position, View convertView, ViewGroup parent) {

View listItemView = convertView;

LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

listItemView = inflater.inflate(R.layout.list_item, parent, false);

ImageView imageView = (ImageView) listItemView.findViewById(R.id.icon);

TextView itemTitle = (TextView) listItemView.findViewById(R.id.item);
TextView descTextView = (TextView) listItemView.findViewById(R.id.itemDesc);

imageView.setImageResource(imageId[position]);
itemTitle.setText(itemName[position]);
descTextView.setText(itemDescription[position]);

return listItemView;
};
} 46
 4. Fill data into the ListView
public class MainActivity extends AppCompatActivity {
int [] imagId = { R.drawable.bird, R.drawable.cat,R.drawable.cow, R.drawable.dog,
R.drawable.fish, R.drawable.penguin, R.drawable.sparrow, };

String[] itemName = {"Bird", "Cat", "Cow", "Dog", "Donkey", "Duck", "Elephant", "Fish",
"Horse", "Mouse", "Owl", "Penguin", "Rabbit", "Sparrow"};

String [] itemDesc = {"Bird description", "Cow description", "Fish description", "Penguin

description","Sparrow description“};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

CustomListAdapter adapter = new CustomListAdapter(this, imagId, itemName, itemDesc);

ListView list = (ListView)findViewById(R.id.list);

list.setAdapter(adapter);

list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
String SelectedItem= itemName[+position];
Toast.makeText(getApplicationContext(), SelectedItem,
Toast.LENGTH_SHORT).show();
}
});
}
} 47
Q&A
48