Sunday, 18 March 2012

Android Custom Listview Example

Listview is nothing but a A view that shows items in a vertically scrolling list.
Here we will see how to show android custom listview(with image and text)

UI layout(activity_main.xml)

activity_main.xml file contains listview object which is used to display listview

<RelativeLayout 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"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/banner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Select your Favorite Social Network"
        android:textSize="15sp" />

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/banner" >
    </ListView>

</RelativeLayout>

(listview_row.xml)

Here (listview_row.xml) layout for ListView rows in a XML file and keep it in res/layout folder.
provides data to each row in ListView.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/icon_id"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp" />

    <TextView
        android:id="@+id/title_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/icon_id"
        android:paddingBottom="10dp"
        android:text="Title"
        android:textColor="#3399FF"
        android:textSize="14dp" />

    <TextView
        android:id="@+id/description_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title_id"
        android:layout_toRightOf="@+id/icon_id"
        android:paddingLeft="10dp"
        android:text="Description"
        android:textColor="#CC0033"
        android:textSize="12dp" />

</RelativeLayout>

Row.java

This class is usefull to store the data for each row in ListView.

package com.androidsurya.androidcustomlistview;

public class Row {
private int imageId;
private String title;
private String desc;

public Row(int imageId, String title, String desc) {
this.imageId = imageId;
this.title = title;
this.desc = desc;
}

public int getImageId() {
return imageId;
}

public void setImageId(int imageId) {
this.imageId = imageId;
}

public String getDesc() {
return desc;
}

public void setDesc(String desc) {
this.desc = desc;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}

@Override
public String toString() {
return title + "\n" + desc;
}
}

Android Activity class(CustomListView.java)

package com.androidsurya.androidcustomlistview;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.view.Gravity;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.Toast;

public class CustomListView extends Activity implements OnItemClickListener {
public static final String[] titles = new String[] { "Facebook",
"Google +", "Orkut", "Twitter" };

public static final String[] descriptions = new String[] {
"Facebook is an online social networking service",
"Google + is an online social networking service",
"Orkut is an online social networking service",
"Twitter is an online social networking service" };

public static final Integer[] images = { R.drawable.facebook,
R.drawable.googleplus, R.drawable.orkut, R.drawable.twitter };

ListView listView;
List<Row> rowItems;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rowItems = new ArrayList<Row>();
for (int i = 0; i < titles.length; i++) {
Row item = new Row(images[i], titles[i], descriptions[i]);
rowItems.add(item);
}

listView = (ListView) findViewById(R.id.listView);
CustomBaseAdapter adapter = new CustomBaseAdapter(this, rowItems);
listView.setAdapter(adapter);
listView.setOnItemClickListener(this);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
// TODO Auto-generated method stub
Toast toast = Toast.makeText(getApplicationContext(), "Item Selected.."
+ (position + 1) + ": " + rowItems.get(position),
Toast.LENGTH_LONG);
toast.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, 0);
toast.show();
}

}

CustomBaseAdapter.java

CustomBaseAdapter is a Class which implements BaseAdapater 
BaseAdapater is job is display data to each row in ListView.

package com.androidsurya.androidcustomlistview;

import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

import java.util.List;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomBaseAdapter extends BaseAdapter {
Context context;
List<Row> rowItems;

public CustomBaseAdapter(Context context, List<Row> items) {
this.context = context;
this.rowItems = items;
}

/* private view holder class */
private class ViewHolder {
ImageView iconView;
TextView txtTitle;
TextView txtDesc;
}

public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;

LayoutInflater mInflater = (LayoutInflater) context
.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = mInflater.inflate(R.layout.listview_row, null);
holder = new ViewHolder();
holder.txtDesc = (TextView) convertView
.findViewById(R.id.description_id);
holder.txtTitle = (TextView) convertView
.findViewById(R.id.title_id);
holder.iconView = (ImageView) convertView
.findViewById(R.id.icon_id);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}

Row rowItem = (Row) getItem(position);
holder.txtDesc.setText(rowItem.getDesc());
holder.txtTitle.setText(rowItem.getTitle());
holder.iconView.setImageResource(rowItem.getImageId());

return convertView;
}

@Override
public int getCount() {
return rowItems.size();
}

@Override
public Object getItem(int position) {
return rowItems.get(position);
}

@Override
public long getItemId(int position) {
return rowItems.indexOf(getItem(position));
}
}

Register Android Activity in AndroidManifest.xml file

 <activity
            android:name="com.androidsurya.androidcustomlistview.CustomListView"
            android:label="@string/app_name" >

Output Screenshot





















No comments:

Post a Comment

Android SQLite Database Viewer or Debuging with Stetho

Every Android Developer uses SQLite Database to store data into the Android Application data. But to view the data in SQLite have a lot of...