Custom Listview Example

Custome ListView Example output

Custom ListView Output

Project Structure

Project Structure

Step 1 :

Create a new package “model”

Under this package create a class “ListItem.class”

package com.pratik.customlistviewexample.model;

/**
 * Created by prats on 5/28/2015.
 */
public class ListItem {

    public String getCountryName() {
        return countryName;
    }

    public void setCountryName(String countryName) {
        this.countryName = countryName;
    }

    public String getCountryCurrancy() {
        return countryCurrancy;
    }

    public void setCountryCurrancy(String countryCurrancy) {
        this.countryCurrancy = countryCurrancy;
    }

    public int getCountryImage() {
        return countryImage;
    }

    public void setCountryImage(int countryImage) {
        this.countryImage = countryImage;
    }

    private String countryName;
    private String countryCurrancy;
    private int countryImage;
}

Step 2 :

Create a new package “adapter”

Under this package create a class “CustomAdapter.class”

package com.pratik.customlistviewexample.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.pratik.customlistviewexample.R;
import com.pratik.customlistviewexample.model.ListItem;

import java.util.ArrayList;

/**
 * Created by prats on 5/28/2015.
 */
public class CustomAdapter extends BaseAdapter {

    private Context context;
    private ArrayList<ListItem> arrayList;

    public CustomAdapter(Context context,ArrayList<ListItem> arrayList)
    {
        this.context = context;
        this.arrayList = arrayList;
    }

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

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

    @Override
    public long getItemId(int position) {
        return position;
    }

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

        if (convertView == null) {
            LayoutInflater vi =
                    (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = vi.inflate(R.layout.custom_row, null);
        }
        final ListItem listItem = arrayList.get(position);
        if (listItem != null)
            ((TextView) convertView.findViewById(R.id.txtCountryName)).setText(listItem.getCountryName());
            ((TextView) convertView.findViewById(R.id.txtCountryCurrancy)).setText(listItem.getCountryCurrancy());
            ((ImageView) convertView.findViewById(R.id.imgCountryFlag)).setImageResource(listItem.getCountryImage());

        return convertView;
    }
}

Step 3:

Create a new layout xml file “custom_row.xml” under directory ”layout”

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imgCountryFlag"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp" />

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

            <TextView
                android:id="@+id/txtCountryName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp" />

            <TextView
                android:id="@+id/txtCountryCurrancy"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Step 4:

activity_main

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">

    <ListView

        android:id="@+id/listView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:dividerHeight="1dp"
        android:divider="#ff305aff"/>

</LinearLayout> 

Step 4:

MainActivity.class

package com.pratik.customlistviewexample;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.widget.ListView;

import com.pratik.customlistviewexample.adapter.CustomAdapter;
import com.pratik.customlistviewexample.model.ListItem;

import java.util.ArrayList;

public class MainActivity extends ActionBarActivity {

    private ListView listView;
    private CustomAdapter customAdapter;
    private ArrayList<ListItem> arrayList;
    private String[] countryList =new String[] {"Australia",
                                    "Brazil",
                                    "Canada",
                                    "Denmark",
                                    "Egypt",
                                    "France",
                                    "Germany",
                                    "Hong Kong",
                                    "India",
                                    "Japan"};
    private String[] countryCurrancy =new String[] {"AUD Australian dollar",
                                        "BRL Brazilian real",
                                        "CAD Canadian dollar",
                                        "DKK Danish krone",
                                        "EGP Egyptian pound",
                                        "EUR Euro",
                                        "EUR Euro",
                                        "HKD Hong Kong dollar",
                                        "INR Indian rupee",
                                        "JPY Japanese yen"};
    private int[] flags =new int[] { R.drawable.ic_australia,
                            R.drawable.ic_brazil,
                            R.drawable.ic_canada,
                            R.drawable.ic_danmark,
                            R.drawable.ic_egypt,
                            R.drawable.ic_france,
                            R.drawable.ic_germany,
                            R.drawable.ic_hong_kong,
                            R.drawable.ic_india,
                            R.drawable.ic_japan};

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

        listView = (ListView) findViewById(R.id.listView);
        arrayList = new ArrayList<ListItem>();

        for (int i = 0;i <=9;i++){

            ListItem listItem = new ListItem();
            listItem.setCountryName(countryList[i]);
            listItem.setCountryCurrancy(countryCurrancy[i]);
            listItem.setCountryImage(flags[i]);

            arrayList.add(listItem);
        }
        customAdapter = new CustomAdapter(this,arrayList);
        listView.setAdapter(customAdapter);
    }
}

Step 4:

Copy and paste below flag images into "drawable" folder

ic_austrailia

ic_brazil

ic_canada

ic_denmark

ic_egypt

ic_france

ic_germany

ic_hong_kong

ic_india

ic_japan

You can download this project from below link : 

https://drive.google.com/file/d/0By1zg6cvLTQ9S1NaRHppYzZPVzQ/view?usp=sharing