grid view android image

GridView example in android with Custom layout

GridView example in android with Custom layout

A two-dimensional and scrollable ViewGroup that display item in grid, is call GridView. We already learn how show listview in android, here we are going to learn how make a custom GridView in android with text and image. Here we have taken an activity class GridViewActivity, one collection class GridCollection and AndroidGridAdapter.

 

Source Code:-

GridViewActivity.java


package com.androidfromhome.gridview;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.Toast;

public class GridViewActivity extends Activity implements OnItemClickListener {

    private GridView gv_android;
    private AndroidGridAdapter grid_adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid_view);
        
        GridCollection.gridCollectionArr=new ArrayList<GridCollection>();
        
        GridCollection.gridCollectionArr.add(new GridCollection("Butterfly", "Butterflies are " +
                "part of the class of Insects in the order Lepidoptera", R.drawable.butterfly));
        GridCollection.gridCollectionArr.add(new GridCollection("Green Scenery", "Green Scenery " +
                "is good for health", R.drawable.green_scenery));
        GridCollection.gridCollectionArr.add(new GridCollection("Leaf", "A leaf is an organ " +
                "of a vascular plant and is the principal lateral appendage of the stem.", R.drawable.leaf));
        GridCollection.gridCollectionArr.add(new GridCollection("One Rose", "A rose is a woody perennial " +
                "of the genus Rosa, within the family Rosaceae", R.drawable.one_rose));
        GridCollection.gridCollectionArr.add(new GridCollection("Open Sky", "The sky (or celestial dome) is everything that lies above the surface of " +
                "the Earth, including the atmosphere and outer space.", R.drawable.sky));
        
    
        getWidget();
    }

    
    
    public void getWidget(){
        
        gv_android = (GridView) findViewById(R.id.gv_android);
        gv_android.setOnItemClickListener(this);
        grid_adapter=new AndroidGridAdapter(GridViewActivity.this,R.layout.grid_item, GridCollection.gridCollectionArr);
        gv_android.setAdapter(grid_adapter);
        
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position,
            long id) {
        // TODO Auto-generated method stub
        GridCollection item = (GridCollection)parent.getItemAtPosition(position);    
        Toast.makeText(GridViewActivity.this, item.message, Toast.LENGTH_LONG).show();
        }
    
    
}


 

 

GridCollection.java


 

package com.androidfromhome.gridview;

import java.util.ArrayList;

public class GridCollection {

    public static ArrayList<GridCollection> gridCollectionArr=null;

    public String title="";
    public String message="";
    public int image=0;
    
    public GridCollection(String title,String message,int image){
        this.title=title;
        this.message=message;
        this.image=image;
        
    }
    
}


 

 

AndroidGridAdapter.java


 

package com.androidfromhome.gridview;

import java.util.ArrayList;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class AndroidGridAdapter extends ArrayAdapter<GridCollection>{
    
    private final Context context;
    private final ArrayList<GridCollection> values;
    private ViewHolder viewHolder;
    private final int resourceId;

    public AndroidGridAdapter(Context context, int resourceId,ArrayList<GridCollection> values) {
        super(context, resourceId, values);
        // TODO Auto-generated constructor stub
        
        this.context = context;
        this.values = values;
        this.resourceId = resourceId;
    }
    
    
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        
        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater) context
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(resourceId, parent, false);
            
                
            viewHolder = new ViewHolder();
            viewHolder.tv_title = (TextView) convertView.findViewById(R.id.tv_title);
            viewHolder.iv_image = (ImageView) convertView.findViewById(R.id.iv_image);
            
            
                convertView.setTag(viewHolder);
            
            
        }else
        {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        GridCollection list_obj=values.get(position);
        viewHolder.tv_title.setText(list_obj.title);
        viewHolder.iv_image.setImageResource(list_obj.image);
            
        return convertView;
    }
    
    public class ViewHolder {

         ImageView iv_image;
         TextView tv_title;

    }

}

 


 

 

Now look at the source code of xml layout.

activity_grid_view.xml


 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.androidfromhome.gridview.GridViewActivity" >
<LinearLayout
        android:id="@+id/LinearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#A758AB"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="15dp" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="2dp"
            android:text="Android From Home"
            android:textColor="#ffffff"
            android:textSize="22dp"
            android:textStyle="bold" />

    </LinearLayout>

    <GridView
        android:id="@+id/gv_android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:horizontalSpacing="2dp"
        android:numColumns="3"
        android:verticalSpacing="2dp" >

    </GridView>

</LinearLayout>


 

 

 

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="wrap_content"
    android:background="#ffffff"
    android:gravity="center"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="62dp"
        android:layout_height="62dp"
        android:layout_margin="2dp" >

        <ImageView
            android:id="@+id/iv_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="3dp" />
    </FrameLayout>

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

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="1dp"
            android:text="TextView"
            android:textColor="#000000"
            android:textSize="12dp"
            android:textStyle="bold" />

    </LinearLayout>

</LinearLayout>

 


 

 

Download Full Source Code

 

Related Post:-

How Get Device Details in android

Expandable ListView in android example

how to get the call log details in android

How Retrieve contact list in android

 

 

Leave a Reply

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

Get Widget