Monday, February 20, 2012

GridView with Image and TextView

How to use GridView with Images and TextView ?
How to Organize TextView and Image in Horizontal & Vertical combination ?
How to Create Advanced GridView with Image and TextView ?

We will solve here all the above question.
In this tutorial we are going to see how to create an advanced Gridview screen, that will have text + image



Step 1 :-

Create .xml file, which contains all the items like Image, TextView1, TextView2 like - 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/GridItem"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#cccfff"
    android:gravity="center_horizontal"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/grid_item_image"
        android:layout_width="55sp"
        android:layout_height="55sp" >
    </ImageView>

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#cccfff"
        android:gravity="center_horizontal"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/grid_item_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="TextView"
            android:textColor="#000000"
            android:textSize="12px" >
        </TextView>

        <TextView
            android:id="@+id/grid_item_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="TextView"
            android:textColor="#000000"
            android:textSize="12px" >
        </TextView>
    </LinearLayout>

</LinearLayout>




 Step 2 :-


In main.xml file, we will create GridView, so that after having the grid item, we need the actual grid to put the item inside:

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/MyGrid"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:columnWidth="65dp"
    android:gravity="center_horizontal"
    android:horizontalSpacing="20dp"
    android:numColumns="auto_fit"
    android:padding="5dp"
    android:stretchMode="columnWidth"
    android:verticalSpacing="5dp" >

</GridView>


Step 3 :-

In .java file (Model) we need to incorporate all the code, and Adapter, After all this is ready, we only need some code to glue it together


package com.sst.aia;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;

public class AiAGridActivity extends Activity {
    GridView MyGrid;

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

        /*
         * Here we setContentView() to main.xml, get the GridView and then fill
         * it with the ImageAdapter class that extend from BaseAdapter
         */

        MyGrid = (GridView) findViewById(R.id.MyGrid);
        MyGrid.setAdapter(new ImageAdapter(this));
    }

    public class ImageAdapter extends BaseAdapter {
        Context MyContext;

        public ImageAdapter(Context _MyContext) {
            MyContext = _MyContext;
        }

        @Override
        public int getCount() {
            /* Set the number of element we want on the grid */
            return 9;
        }

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

            if (convertView == null) {
                /* we define the view that will display on the grid */

                // Inflate the layout
                LayoutInflater li = getLayoutInflater();
                MyView = li.inflate(R.layout.grid_item, null);

                // Add The Text!!!
                TextView tv1 = (TextView) MyView
                        .findViewById(R.id.grid_item_title);
                tv1.setText("Title " + position);

                TextView tv2 = (TextView) MyView
                        .findViewById(R.id.grid_item_label);
                tv2.setText("Lable " + position);

                // Add The Image!!!
                ImageView iv = (ImageView) MyView
                        .findViewById(R.id.grid_item_image);
                iv.setImageResource(R.drawable.icon);
            }

            return MyView;
        }

        @Override
        public Object getItem(int arg0) {
            // TODO Auto-generated method stub
            return null;
        }

        @Override
        public long getItemId(int arg0) {
            // TODO Auto-generated method stub
            return 0;
        }
    }
}



Step 4 :- 

Run application,  result will looks like, let me know if you are facing any issues.
Welcome for comments.