Android Custom ListView Tutorial with ImageView and TextViews

In this tutorial , we'll discuss about Custom ListView using Android Studio. We are going to show you how to implement Android Custom ListView with an image and text for each item list.

In the first tutorial, we use default image available in android studio. Then, we continue by an app which display flags (image) and country name (text).

Android Custom ListView with default image ic_launcher

1. Create new project

Give name "Aplikasi Bendera" on Aplication name. Then on Target Android Device, choose Phone and Table. Next step for set Minimun SDK, we choose API 10 : Android 2.3.3 (Gingerbread), you can choose higher . And for Activity, choose Blank Activity and default Activity Name : MainActivity.

2. Open file res/layout/content_main.xml

We create a layout by adding ListView in the content_main.xml to display the array with images and texts.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.ilmudetil_blogspot.aplikasibendera.MainActivity"
    android:orientation="horizontal"
    tools:showIn="@layout/activity_main">

    <ListView
        android:id="@+id/android:list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

3. Create file mylist.xml

In this file (mylist.xml), we create a layout which has ImageView and TextView. This layout display list item in ListView.
To create file mylist.xml, right click on folder res/layout then click New->XML->Layout XML File as shown by figure.1 below :

(Figure.1)

Name it as mylist.xml, after that copy paste the code below in file mylist.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="horizontal">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp"
        android:src="@mipmap/ic_launcher" />
    <TextView
        android:id="@+id/Itemname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:paddingTop="5dp"/>

</LinearLayout>

4. Open file java/MainActivity.java

In this file, we're going to define the data in array by using ArrayAdapter. The data contain texts and images which display in array. Text is country name which declare by variable itemname and we call image which located in file mylist.xml in code android:src="@mipmap/ic_launcher".

package com.ilmudetil_blogspot.aplikasibendera;

import android.os.Bundle;
import android.app.ListActivity;
import android.widget.ArrayAdapter;

public class MainActivity extends ListActivity {
    String[] itemname ={
            "Indonesia",
            "Malasyia",
            "Thailand",
            "Filipina",
            "Kamboja",
            "Vietnam",
            "Singapura",
            "Laos"
    };

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

        this.setListAdapter(new ArrayAdapter<String>(
                this, R.layout.mylist,
                R.id.Itemname,itemname));
    }
}

We will see the output as shown by figure.2 below :

(Fig.1)

Android Custom ListView with flag images

We have seen the Apps above (Fig.2) alwasy display same image although the country name is different. In the next tutorial we are going to display the different image, where the image is a flag of each country.

1. Create project like the step one above

Do it like as the step.1 above for Aplication name, Target Android Device, set Minimun SDK, Activity, and Activity Name.

2.  Open file res/layout/content_main.xml

In here we create a layout by adding own id listview ("@+id/list"). In the first experience (see above) we use  "@+id/android:list", it means we use predefined view and and id of android packages. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.ilmudetil_blogspot.aplikasibendera.MainActivity"
    android:orientation="horizontal"
    tools:showIn="@layout/activity_main">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />

</LinearLayout>

3. Create file mylist.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="horizontal">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:padding="5dp" />

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

        <TextView
            android:id="@+id/item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="5dp"
            android:padding="2dp"
            android:textColor="#33CC33" />

    </LinearLayout>
</LinearLayout>

4. Add flag images to folder res/minimap

The purpose of this step is to add images of the flag of each country. On the minimap, there is already a default folder ic_launcher (contained default image).. Because we use flag image, we add it outside of folder ic_laucher.

Please copy the image files and then paste in the folder res/minimap, then give name the image as shown by figure.3 below :

(Fig.3)

So that later there will be eight images that we have add as shown by figure.4 below :

(Fig.4)

5. Create file BenderaAdapter.java

To create file BenderaAdapter.java, right click on the package name that you have created as shown by figure.5 below :

(Fig.5)

Then choose New->Java Class and give name as BenderaAdapter. After that copy paste code below in file BenderaAdapter.java

package com.ilmudetil_blogspot.aplikasibendera;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.support.v7.app.AppCompatActivity;

public class BenderaAdapter extends  ArrayAdapter<String>{

    private final AppCompatActivity context;
    private final String[] NamaNegara;
    private final Integer[] GbrBendera;

    public BenderaAdapter(AppCompatActivity context, String[] NamaNegara, Integer[] GbrBendera) {
        super(context, R.layout.mylist, NamaNegara);

        this.context=context;
        this.NamaNegara=NamaNegara;
        this.GbrBendera=GbrBendera;
    }

    public View getView(int position,View view,ViewGroup parent) {
        LayoutInflater inflater=context.getLayoutInflater();
        View rowView=inflater.inflate(R.layout.mylist, null,true);

        TextView txtTitle = (TextView) rowView.findViewById(R.id.item);
        ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);

        txtTitle.setText(NamaNegara[position]);
        imageView.setImageResource(GbrBendera[position]);
        return rowView;
    };
}

6. Edit file MainActivity.java

Copy paste code below in file MainActivity.java :

package com.ilmudetil_blogspot.aplikasibendera;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    ListView list;
    String[] NamaNegara = {
            "Indonesia",
            "Malasyia",
            "Thailand",
            "Filipina",
            "Kamboja",
            "Vietnam",
            "Singapura",
            "Laos"
    };
    Integer[] GbrBendera={
            R.mipmap.indonesia,
            R.mipmap.malaysia,
            R.mipmap.thailand,
            R.mipmap.filipina,
            R.mipmap.kamboja,
            R.mipmap.vietnam,
            R.mipmap.singapura,
            R.mipmap.laos
    };

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

       BenderaAdapter adapter=new BenderaAdapter(this, NamaNegara, GbrBendera);
        list=(ListView)findViewById(R.id.list);
        list.setAdapter(adapter);

        list.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                String Pilihitem = NamaNegara[+position];
                Toast.makeText(getApplicationContext(), Pilihitem, Toast.LENGTH_SHORT).show();
            }
        });

    }
}

Output shown by figure.6 below :

(Fig.6)