Listing Images in GridView using Simple Adapter in Android

August 20, 2012
By

In this article, we will create an Android application which will display a set of images in GridView using Simple Adapter in Android.

In our previous article titled “ListView with Images and Text using Simple Adapter in Android“, we have seen how to show images and text in a listview.

The application discussed in this article is developed using Eclipse IDE ( 4.2.0 ) with ADT plugin ( 20.0.3 ) and Android SDK ( R20.0.3 ) .


1. Create a new Android application project titled “GridViewDemo”

New Andriod Application Project

Figure 1 : New Andriod Application Project


2. Design application launcher icon

Design Application Launcher Icon

Figure 2 : Design Application Launcher Icon


3. Create a blank activity

Create a blank Activity

Figure 3 : Create a blank Activity


4. Enter MainActivity Details

Enter MainActivity Details

Figure 4: Enter MainActivity Details


5. Create a new folder namely drawable under the folder res


6. Download and extract the given below zip file to the drawable folder


7. Update the file res/values/strings.xml


<resources>
    <string name="app_name">GridViewDemo</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">GridView Demo</string>
</resources>


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


<GridView 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"
    android:id="@+id/gridview"
    android:numColumns="auto_fit"
/>


9. Create a new layout file res/layout/gridview_layout.xml and add the given below given code to the file


<?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"
    android:padding="10dp"
    android:layout_gravity="center"
>

    <ImageView
        android:id="@+id/flag"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
    />

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

</LinearLayout>

Note : This file is used to provide a layout for the images and text in the gridview


10. Update the file res/values/styles.xml


<resources>
    <style name="AppTheme" parent="android:Theme" />
</resources>

Note : Setting a black theme for this application


11. Update the file res/values-v11/styles.xml


<resources>
    <style name="AppTheme" parent="android:Theme.Holo" />
</resources>

Note : Setting a black theme for this application


12. Update the file res/values-v14/styles.xml


<resources>
    <style name="AppTheme" parent="android:Theme.Holo" />
</resources>

Note : Setting a black theme for this application


13. Update the class MainActivity in the file src/in/wptrafficanalayzer/gridviewdemo/MainActivity.java


package in.wptrafficanalyzer.gridviewdemo;

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

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.SimpleAdapter;

public class MainActivity extends Activity {

    // 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-ldpi/
    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
    };

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

        // 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", countries[i]);
            hm.put("flag", Integer.toString(flags[i]) );
            aList.add(hm);
        }

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

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

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

        // Getting a reference to gridview of MainActivity
        GridView gridView = (GridView) findViewById(R.id.gridview);

        // Setting an adapter containing images to the gridview
        gridView.setAdapter(adapter);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
}


14. Screenshot of the application in execution

Images in GridView

Figure 5 : Images in GridView


15. Download


16. Reference

http://developer.android.com/guide/index.html


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: , , ,

7 Responses to Listing Images in GridView using Simple Adapter in Android

  1. ALOK NEEKHRA on October 14, 2012 at 1:51 am

    now how to create intent in this program and on clicking one image new window/activity come.please reply as soon as possible.

  2. vaishali on November 17, 2012 at 1:54 pm

    how to apply onItemClick() on each item in this code?

  3. Mega on February 5, 2013 at 10:15 pm

    Nice post :) thanks..

  4. hanuman on February 22, 2013 at 12:32 pm

    Hi

    I want to change text color of country names
    please post that code

    • george on February 22, 2013 at 4:05 pm

      Step1 : Define a new color in res/values/strings.xml as given below :

      <color name=”green”>#00ff00</color>

      Step2 : Specify this color for the TextView in res/layout/gridview_layout.xml as given below :

      android:textColor=”@color/green”

  5. Raju on July 29, 2013 at 7:39 pm

    how to apply onItemClick() on each item in this code?

  6. agonzalezc on November 21, 2014 at 4:47 am

    i have a big problem when i try to load a lot images 1000++ into the gridLayout

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