Android Customized GridView

In the Previous tutorial we have seen an example of Simple GridView , in this post we will see about how to customized the grid items in gridview .



Lets See An Example
Project Detail
Project Name CustomGrid
Package com.pavan.customgrid
Minimum SDK API 8
Target SDK API 17
Theme Holo Light with Dark Action Bar

1. XML Layout


file:-grid_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<GridView 
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/gridView1"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:columnWidth="150dp"
     android:gravity="center"
     android:numColumns="auto_fit"
     android:padding="5dp"
     android:stretchMode="columnWidth" >
</GridView>

file:-grid_item.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:padding="15dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_gravity="center"
        android:textSize="20dp"
        />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

2. Activity


file:-Grid_activity.java
package com.pavan.customgrid;

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
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 Grid_activity extends Activity {
    GridView gv;
    String[] data = new String[] { "samsung", "lg", "htc", "moto" };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.grid_activity);
        gv = (GridView) findViewById(R.id.gridView1);
        gv.setAdapter(new Custom_view(this));
    }
    public class Custom_view extends BaseAdapter {
        Context ctx;
        Custom_view(Context ctx) {
            this.ctx = ctx;
        }
        public int getCount() {
         return data.length;
       }
     public Object getItem(int position) {
              return null;
        }
      public long getItemId(int position) {
            return 0;
       }
        public View getView(int position, View convertView, ViewGroup parent) {

         View myview = convertView;
           if (myview == null) {
                LayoutInflater li = getLayoutInflater();
                myview = li.inflate(R.layout.grid_item, null);
                TextView tv = (TextView) myview.findViewById(R.id.textView1);
                ImageView iv = (ImageView) myview.findViewById(R.id.imageView1);
              if (data[position].equals("samsung")) {
                 tv.setText(data[position]);
                   iv.setImageResource(R.drawable.samsung);
                } else if (data[position].equals("lg")) {
                    tv.setText(data[position]);
                    iv.setImageResource(R.drawable.lg);
                } else if (data[position].equals("htc")) {
                    tv.setText(data[position]);
                    iv.setImageResource(R.drawable.htc);
                } else if (data[position].equals("moto")) {
                    tv.setText(data[position]);
                    iv.setImageResource(R.drawable.moto);
                }
            }
            return myview;
        }
    }
}

3. RUN






3 comments:

ThemeBowl said...

Nice tutorial.can you tell me how to load bunch of images from server to grid layout and the most recent image must be loaded at top automatically whenever new images are added to server.

elicohen38 said...

How do I include buttons in the gridview that open up another activity with a larger version of the same image when clicked?

Anonymous said...

hello,I have done all d way same as u did.but i am getting an error repeatedly.unfotunately,CustomGrid has stopped.I am using an AVD with API 14.kindly revert back asap

Post a comment