Android ListFragment with Images and Text using Android Support Library

April 5, 2013
By

In this article, we will develop an Android application which lists a set of countries with their names, currencies and flags. For listing the countries, we are using the ListFragment class.

The screenshot of this application is shown in Figure 6.



This application is developed in Eclipse (4.2.1) with ADT plugin (21.1.0) and Android SDK (21.1.0) .


1. Create new Android application project namely “ListFragmentImagesText”

Create new Android application project

Figure 1 : Create new Android application project


2. Configure the application project

Configure the application project

Figure 2 : Configure the application project


3. Design application launcher icon

Design application launcher icon

Figure 3 : Design application launcher icon


4. Create a blank activity

Create a blank activity

Figure 4 : Create a blank activity


5. Enter MainActivity Details

Enter MainActivity Details

Figure 5 : Enter MainActivity Details


6. Add Android Support library to this project

By default, Android support library (android-support-v4.jar ) is added to this project by Eclipse IDE to the directory libs. If it is not added, we can do it manually by doing the following steps :

  • Open Project Explorer by Clicking “Window -> Show View -> Project Explorer”
  • Right click this project
  • Then from popup menu, Click “Android Tools -> Add Support Library “

7. Download and extract the zip file containing flag’s images to the directory /res/drawable


8. Update the layout file res/layout/activity_main.xml


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

    <fragment
        android:id="@+id/country_fragment"
        android:name="in.wptrafficanalyzer.listfragmentimagestext.CountryList"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>


9. Create a layout file listview_layout.xml in the folder res/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="horizontal" >

    <ImageView
        android:id="@+id/flag"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/hello_world"
        android:paddingTop="10dp"
        android:paddingRight="10dp"
        android:paddingBottom="10dp" />

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

        <TextView
            android:id="@+id/txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="15dp" />

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

    </LinearLayout>

</LinearLayout>


10. Create a ListFragment class in the file src/in/wptrafficanalyzer/listfragmentimagestext/CountryList.java


package in.wptrafficanalyzer.listfragmentimagestext;

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

import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.SimpleAdapter;

public class CountryList extends ListFragment {

    // Array of strings storing country names
    String[] countries = new String[] {
        "India",
        "Pakistan",
        "Sri Lanka",
        "China",
        "Bangladesh",
        "Nepal",
        "Afghanistan",
        "North Korea",
        "South Korea",
        "Japan"
    };

    // Array of integers points to images stored in /res/drawable/
    int[] flags = new int[]{
        R.drawable.india,
        R.drawable.pakistan,
        R.drawable.srilanka,
        R.drawable.china,
        R.drawable.bangladesh,
        R.drawable.nepal,
        R.drawable.afghanistan,
        R.drawable.nkorea,
        R.drawable.skorea,
        R.drawable.japan
    };

    // Array of strings to store currencies
    String[] currency = new String[]{
        "Indian Rupee",
        "Pakistani Rupee",
        "Sri Lankan Rupee",
        "Renminbi",
        "Bangladeshi Taka",
        "Nepalese Rupee",
        "Afghani",
        "North Korean Won",
        "South Korean Won",
        "Japanese Yen"
    };

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {

        // Each row in the list stores country name, currency and flag
        List<HashMap<String,String>> aList = new ArrayList<HashMap<String,String>>();

        for(int i=0;i<10;i++){
            HashMap<String, String> hm = new HashMap<String,String>();
            hm.put("txt", "Country : " + countries[i]);
            hm.put("cur","Currency : " + currency[i]);
            hm.put("flag", Integer.toString(flags[i]) );
            aList.add(hm);
        }

        // Keys used in Hashmap
        String[] from = { "flag","txt","cur" };

        // Ids of views in listview_layout
        int[] to = { R.id.flag,R.id.txt,R.id.cur};

        // Instantiating an adapter to store each items
        // R.layout.listview_layout defines the layout of each item
        SimpleAdapter adapter = new SimpleAdapter(getActivity().getBaseContext(), aList, R.layout.listview_layout, from, to);

        setListAdapter(adapter);

        return super.onCreateView(inflater, container, savedInstanceState);
    }
}


11. Update the file src/in/wptrafficanalyzer/listfragmentimagestext/MainActivity.java


package in.wptrafficanalyzer.listfragmentimagestext;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.Menu;

public class MainActivity extends FragmentActivity {

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

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



12. Screenshot of the application

Screenshot of the application in execution

Figure 6 : Screenshot of the application in execution


13. Download source code


How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: , , , , , , ,

10 Responses to Android ListFragment with Images and Text using Android Support Library

  1. Ron on April 10, 2013 at 1:43 am

    Great Tutorial thanks so much!

  2. пгд on June 14, 2013 at 4:14 pm

    error.. java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.new_taxi/com.example.new_taxi.TaxiListActivity}: android.view.InflateException: Binary XML file line #7: Error inflating class fragment

  3. Dave on September 27, 2013 at 5:03 am

    George, thanks so much for the tutorial. I was having trouble customizing a ListFragment and your tutorial gave insight on using the SimpleAdapter instead of ArrayAdapter to get the desired effect. Works great !

  4. Miguel on October 11, 2013 at 8:19 am

    I redefined the variables, having four images and four descriptions only, I get an arror ArrayIndexOutOfBoundsException.

    Here is my logcat error.

    http://shrib.com/ERROR

  5. swarup gosavi on December 16, 2013 at 6:20 pm

    I want display toast message on click of listview,how it is possible

  6. srikanth on December 2, 2014 at 4:52 pm

    How to set list item height…please help…

  7. bdh on January 24, 2015 at 1:50 am

    Please help.How do I know which item is clicked in the fragment ????aurgently needed!!

  8. densan on June 5, 2015 at 11:18 am

    very very usefull code… thanks so much!

  9. varsha on June 24, 2015 at 1:43 am

    Can you do same without using map. using custom adapter I tried to do that but i could not.

  10. Santhosh Kanna on October 20, 2015 at 4:26 pm

    Thanks For This Tutorial Sir. As I am Beginner I Had Some Doubt on List Fragment with Images and Text using Android Support Library and I want The Same Usage of code where If I click An item in the list fragment it should move on to next activity..Please Help Me Sir..

Leave a Reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner