Home > General > GridView with Image and TextView

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&#8221;
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&#8221;
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&#8221;
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.

Gried Image and TextView

Gried Image and TextView

Advertisements
Categories: General
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: