Custom Listview in Android

Now we tend to produce a custom list view example with custom layout of list row and knowledge to bind custom list row in list view. 

So, we tend to begin with Activity.

* produce new android Application Project.

* Add list view in activity_main.xml

After adding list view activity_main seems like this.

<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" >

<ListView

       android:id="@+id/lv_items"

        android:layout_width="match_parent"

         android:layout_height="match_parent"

        android:divider="#000"

        android:dividerHeight="1dp" >

  </ListView>

</RelativeLayout>

* Now we will declare how each row in this ListView should be displayed by creating a new xml file – custom_row.xml

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

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:padding="10dp" >

    <TextView

        android:id="@+id/txt_1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_centerVertical="true"

        android:layout_marginRight="5dp"

        android:textColor="#000" />

    <TextView

        android:id="@+id/txt_2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_centerVertical="true"

        android:layout_toLeftOf="@id/txt_category_money"

        android:textColor="#000" />

</RelativeLayout>

Now create a Contact class. and add this code.

public class Contact {

private String name;

private String contact_no;

public Contact (String name, String contact_no){

this.name = name;

this.contact_no = contact_no;

}

public String getName(){

return this.name;

}

public String getContact(){

return this.contact_no;

}

}

So, now, how do I tie all of this together? The MainActivity class, the listview layout and the row layout. we need an Adpater object.

So create CustomAdapter class that extends from ArrayAdapter<Contact>

Add following code in CustomAdapter class.

public class CustomAdapter extends ArrayAdapter<Contact>{

private Context context;

public CustomAdapter(Context context, ArrayList<Contact> list) {

super(context, R.layout.custom_row, list);

this.context = context;

}

class Holder{

TextView name,contact_no;

}

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

Holder holder;

if(convertView == null){

convertView = LayoutInflater.from(context).inflate(R.layout.custom_row, null);

holder = new Holder();

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

holder.contact_no = (TextView)convertView.findViewById(R.id.txt_2);

convertView.setTag(holder);

} else {

holder = (Holder)convertView.getTag();

}

if(getItem(position) != null){

holder.name.setText(getItem(position).getName());

holder.contact_no.setText(getItem(position).getContact());

}

return convertView;

}

}

Now come to MainActivity.java file. Add following code in onCreate() method after setContentView(R.layout.activity_main);

ArrayList<Contact> list = new ArrayList<Contact>();

list.add(new Contact("Abc", "123"));

list.add(new Contact("Bcd", "234"));

list.add(new Contact("Cde", "345"));

list.add(new Contact("Def", "456"));

list.add(new Contact("Efg", "567"));

list.add(new Contact("Fgh", "678"));

list.add(new Contact("Ghi", "789"));

list.add(new Contact("Hij", "890"));

final CustomAdapter adapter = new CustomAdapter(this, list);

ListView lv = (ListView)findViewById(R.id.lv_items);

lv.setAdapter(adapter);

//set click listener of ListView

lv.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> list, View v, int position, long id) {

String name = adapter.getItem(position).getName();

String number = adapter.getItem(position). getContact();

Toast.makeToast(MainActivity.this , "Name: "+ name + "\nNumber: "+ number, Toast.LENGTH_SHORT).show();

}

});