4.2.
1 List View
Android ListView is a view which
groups several items and display
them in vertical scrollable list. The
list items are automatically
inserted to the list using an
Adapter that pulls content from a
source such as an array or
database.
An adapter actually bridges between UI components and the data
source that fill data into UI Component.
Adapter holds the data and send the data to adapter view, the view
can takes the data from adapter view and shows the data on different
views like as spinner, list view, grid view etc.
The ListView and GridView are subclasses of AdapterView.
Android provides several subclasses of Adapter that are useful for
retrieving different kinds of data and building views for an AdapterView
( i.e. ListView or GridView).
The common adapters are ArrayAdapter, Base Adapter, CursorAdapter,
SimpleCursorAdapter, SpinnerAdapter and WrapperListAdapter.
ListView Attributes
Following are the important attributes specific to GridView
1. android:id
This is the ID which uniquely identifies the layout.
2 android:divider
This is drawable or color to draw between list items.
3 android:dividerHeight
This specifies height of the divider. This could be in px, dp, sp, in, or mm.
4 android:entries
Specifies the reference to an array resource that will populate the
ListView.
5 android:footerDividersEnabled
When set to false, the ListView will not draw the divider before each
footer view. The default value is true.
6 android:headerDividersEnabled
When set to false, the ListView will not draw the divider after each
header view. The default value is true.
ArrayAdapter
You can use this adapter when your data source is an array.
By default, ArrayAdapter creates a view for each array item by calling toString() on eac
item and placing the contents in a TextView.
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 arra
ArrayAdapter adapter = new ArrayAdapter<String>(this,R.layout.ListView,StringArray);
Here are arguments for this constructor −
First argument this is the application context. Most of the case, keep it
this.
Second argument will be layout defined in XML file and having
TextView for each string in the array.
Final argument is an array of strings which will be populated in the text
view.
Once you have array adapter created, then simply call setAdapter() on
your ListView object as follows −
ListView listView = (ListView) findViewById(R.id.listview);
listView.setAdapter(adapter);
Following is the content of the modified main activity file
src/com.example.ListDisplay/ListDisplay.java. This file can include each of the
fundamental life cycle methods.
package com.example.ListDisplay;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class ListDisplay extends Activity {
// Array of strings...
String[] mobileArray =
{"Android","IPhone","WindowsMobile","Blackberry",
"WebOS","Ubuntu","Windows7","Max OS X"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ArrayAdapter adapter = new ArrayAdapter<String>(this,
R.layout.activity_listview, mobileArray);
ListView listView = (ListView) findViewById(R.id.mobile_list);
listView.setAdapter(adapter);
}
Following will be the content of
res/layout/activity_main.xml file −
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".ListActivity" >
<ListView
android:id="@+id/mobile_list"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
Following will be the content
of res/layout/activity_listview.xml file −
<?xml version="1.0" encoding="utf-8"?> <!-- Single List Item Design -->
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/label“
android:layout_width="fill_parent"
android:layout_height="fill_parent“
android:padding="10dip"
android:textSize="16dip“
android:textStyle="bold" >
</TextView>
Following will be the content
of res/values/strings.xml to define two new constants
−
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">ListDisplay</string>
<string name="action_settings">Settings</string>
</resources>
Let's try to run our modified Hello World! application we just modified.
I assume you had created your AVD while doing environment set-up. To
run the app from Android studio, open one of your project's activity
files and click Run Eclipse Run Icon icon from the tool bar. Android
studio installs the app on your AVD and starts it and if everything is fine
with your set-up and application, it will display following Emulator
window −
Android Grid View
Android GridView shows items in
two-dimensional scrolling grid
(rows & columns) and the grid
items are not necessarily
predetermined but they
automatically inserted to the
layout using a ListAdapter
An adapter actually bridges between UI components and the data
source that fill data into UI Component. Adapter can be used to supply
the data to like spinner, list view, grid view etc
The ListView and GridView are subclasses of AdapterView and they
can be populated by binding them to an Adapter, which retrieves data
from an external source and creates a View that represents each data
entry.
GridView Attributes
Following are the important attributes specific to GridView −
1. android:id
This is the ID which uniquely identifies the layout.
2. android:columnWidth
This specifies the fixed width for each column. This could be in px, dp,
sp, in, or mm.
3 android:gravity
Specifies the gravity within each cell. Possible values are top, bottom,
left, right, center, center_vertical, center_horizontal etc.
4 android:horizontalSpacing
Defines the default horizontal spacing between columns. This could be
in px, dp, sp, in, or mm.
5 android:numColumns
Defines how many columns to show. May be an integer value, such as
"100" or auto_fit which means display as many columns as possible to
fill the available space.
6 android:stretchMode
Defines how columns should stretch to fill the available empty space, if
any. This must be either of the values −
none − Stretching is disabled.
spacingWidth − The spacing between each column is stretched.
columnWidth − Each column is stretched equally.
spacingWidthUniform − The spacing between each column is
uniformly stretched..
7 android:verticalSpacing
Defines the default vertical spacing between rows. This could be in px,
dp, sp, in, or mm.
Example
This example will take you through simple steps to show how to create
your own Android application using GridView. Follow the following
steps to modify the Android application we created in Hello World
Example chapter −
Following is the content of the modified main activity file
src/com.example.helloworld/MainActivity.java. This file can include
each of the fundamental lifecycle methods.
package com.example.helloworld;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.GridView;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
}
}
Following will be the content of res/layout/activity_main.xml file −
<?xml version="1.0" encoding="utf-8"?>
<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
Following will be the content of
src/com.example.helloworld/ImageAdapter.java file −
package com.example.helloworld;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class ImageAdapter extends BaseAdapter {
private Context mContext;
// Constructor
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return mThumbIds.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup
parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
}
else
{
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
// Keep all Images in array
public Integer[] mThumbIds = {
R.drawable.sample_2, R.drawable.sample_3,
R.drawable.sample_4, R.drawable.sample_5,
R.drawable.sample_6, R.drawable.sample_7,
R.drawable.sample_0, R.drawable.sample_1,
R.drawable.sample_2, R.drawable.sample_3,
R.drawable.sample_4, R.drawable.sample_5,
R.drawable.sample_6, R.drawable.sample_7,
R.drawable.sample_0, R.drawable.sample_1,
R.drawable.sample_2, R.drawable.sample_3,
R.drawable.sample_4, R.drawable.sample_5,
R.drawable.sample_6, R.drawable.sample_7
};
}
Let's try to run our modified Hello World! application we just modified.
I assume you had created your AVD while doing environment setup. To
run the app from Android Studio, open one of your project's activity
files and click Run Eclipse Run Icon icon from the toolbar. Android studio
installs the app on your AVD and starts it and if everything is fine with
your setup and application, it will display following Emulator window −
