Android Revolution: Creating Custom ListView in android

Hi all,

Today I am going to explain the topic Custom ListView. This is the most frequent used topic in the Android Applications. I am explaining here each and every section to make a complete Custom List in android.

Steps to make custom listview:

* Design UI for List item (you can see above image for list item design).
* Make an Item class which can hold the values of all UI component you are using in list item.

for example: public class Item {

public String name;

public String rollno;

public String classname;

public String phone;

public String pic;

public Item(String name, String rno, String cname, String pno, String pic) {

// TODO Auto-generated constructor stub

this.name=name;

this.rollno=rno;

this.classname=cname;

this.phone=pno;

this.pic=pic;

}

* Make an Adapter which can inflate the List item UI into your listview.

   inflater = (LayoutInflater) con.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView=inflater.inflate(R.layout.list_item, parent,false);

* Add data to the array of object that will to fill adapter.

  list.add(newItem("George","12","12th","345567445","http://thespiritscience.net/wpcontent/uploads/2015/02/Sacred-G-Eye.jpg"));
list.add(new Item("John", "15", "10th", "4566676", "http://p1.pichost.me/i/42/1657715.jpg"));
list.add(new Item("Keron", "152", "10th", "9908875", "http://www.hdwallpapersinn.com/wp- content/uploads/2015/02/Free-Wallpaper-Nature-Scenes-660x330.jpg"));

* Now set adapter to the listview.

   lview=(ListView)findViewById(R.id.listView1);

adapter = new CustomAdapter(MainActivity.this, list);

lview.setAdapter(adapter);

# Complete sample code:

1. MainActivity.java

package com.example.customlistadapter;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;

public class MainActivity extends Activity{

ArrayList<Item> list= new ArrayList<Item>();
ListView lview;
CustomAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

list.add(new Item("George", "12", "12th", "345567445", "http://thespiritscience.net/wp-content/uploads/2015/02/Sacred-G-Eye.jpg"));
list.add(new Item("John", "15", "10th", "4566676", "http://p1.pichost.me/i/42/1657715.jpg"));
list.add(new Item("Keron", "152", "10th", "9908875", "http://www.hdwallpapersinn.com/wp-content/uploads/2015/02/Free-Wallpaper-Nature-Scenes-660x330.jpg"));
list.add(new Item("James", "127", "11th", "22435666", "http://www.bestinspired.com/wp-content/uploads/2015/04/nature-wallpaper-latest-190-825x510.jpg"));
list.add(new Item("Julie", "121", "9th", "96663457", "http://www.hdwallpapersinn.com/wp-content/uploads/2014/11/new_wallpaper_nature_hd_2015-1-660x330.jpg"));
list.add(new Item("Kattie", "18", "7th", "1211343", "http://www.nature-pictures.info/wp-content/uploads/2013/05/the-15-craziest-things-in-nature-you-wont-believe-actually-exist-2.jpg"));

lview=(ListView)findViewById(R.id.listView1);

adapter = new CustomAdapter(MainActivity.this, list);

lview.setAdapter(adapter);

}

}

2. activity_main.xml

<?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="vertical" >

<ListView

android:id="@+id/listView1"

android:layout_width="match_parent"

android:layout_height="wrap_content" >

</ListView>

</LinearLayout>

3. CustomAdapter.java

package com.example.customlistadapter;

import java.util.ArrayList;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.Toast;

import com.squareup.picasso.Picasso;

public class CustomAdapter extends BaseAdapter {

Context ctx;

ArrayList<Item> arr = new ArrayList<Item>();

LayoutInflater inflater;

ViewHolder holder;

public CustomAdapter(Context con, ArrayList<Item> list) {

// TODO Auto-generated constructor stub

this.ctx = con;

this.arr = list;

inflater = (LayoutInflater) con

.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return arr.size();

}

@Override

public Object getItem(int position) {

// TODO Auto-generated method stub

return arr.get(position);

}

@Override

public long getItemId(int position) {

// TODO Auto-generated method stub

return position;

}

@Override

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

// TODO Auto-generated method stub

if (convertView == null) {

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

holder = new ViewHolder();

holder.name=(TextView)convertView.findViewById(R.id.Name);

holder.cname=(TextView)convertView.findViewById(R.id.cname);

holder.rno=(TextView)convertView.findViewById(R.id.rno);

holder.mno=(TextView)convertView.findViewById(R.id.phone);

holder.pic=(ImageView)convertView.findViewById(R.id.pic);

convertView.setTag(holder);

} else {

holder = (ViewHolder) convertView.getTag();

}

Picasso.with(ctx).load(arr.get(position).pic).placeholder(R.drawable.ic_launcher).resize(200, 200).into(holder.pic);

holder.name.setText(arr.get(position).name);

holder.cname.setText(arr.get(position).classname);

holder.rno.setText(arr.get(position).rollno);

holder.mno.setText(arr.get(position).phone);

convertView.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

Toast.makeText(ctx,arr.get(position).name, 2345).show();

}

});

return convertView;

}

private class ViewHolder {

public ImageView pic;

public TextView name, cname, rno, mno;

}

4. Item.java

package com.example.customlistadapter;

public class Item {

public String name;

public String rollno;

public String classname;

public String phone;

public String pic;

public Item(String name, String rno, String cname, String pno, String pic) {

// TODO Auto-generated constructor stub

this.name=name;

this.rollno=rno;

this.classname=cname;

this.phone=pno;

this.pic=pic;

}

5. list_item.xml

<?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:background="#aad032"

android:layout_marginBottom="1dip"

android:orientation="horizontal" >

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight=".7"

android:paddingLeft="10dip"

android:gravity="center" >

<ImageView

android:id="@+id/pic"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:src="@drawable/ic_launcher" />

</LinearLayout>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight=".3"

android:gravity="center_vertical"

android:orientation="vertical"

android:paddingLeft="10dip" >

<TextView

android:id="@+id/Name"

android:layout_width="wrap_content"

android:textColor="#ffffff"

android:textStyle="bold"

android:layout_height="wrap_content"

android:text="Name" />

<TextView

android:id="@+id/cname"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#ffffff"

android:text="cname" />

<TextView

android:id="@+id/rno"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#ffffff"

android:text="rno" />

<TextView

android:id="@+id/phone"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#ffffff"

android:text="phone" />

</LinearLayout>

6. manifest.xml

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

package="com.example.customlistadapter"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="8"

android:targetSdkVersion="21" />

<uses-permission android:name="android.permission.INTERNET"/>

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name="com.example.customlistadapter.MainActivity"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

Here I am using Picasso library to download images from url.

You can download the code by using lenk below.

Downlod code

Anyone can ask if there is any problem. questions are welcome!

Thanks,

Android Revolution

Tuesday, May 5, 2015

Creating Custom ListView in android

1 comment:

Blog Archive