Android GridView




Android GridView



  1.  Static GridView Creation in Android
  2.  Dynamic GridView Creation in Android
  3.  GridView Creation by More Ways in Android
  4.  Run Time Add Item to GridView in Android
  5.  Add Images to GridView in Android




 Static GridView Creation in Android

Step 1 : Select File -> New -> Project -> Android Application Project (or) Android Project. Fill the forms and click "Finish" button. If you have any doubt regarding create a new project Click Here.

Step 2 : Open res -> layout -> activity_main.xml (or) main.xml and add following code :

<?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:background="#7CFFFF"
    android:columnWidth="100dp"
    android:gravity="center"
    android:numColumns="auto_fit"
    android:stretchMode="columnWidth" >

</GridView>


Step 3 : Open src -> package -> MainActivity.java and add following code :

package com.gudivada.hemanthsomaraju;

import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.Toast;

public class MainActivity extends Activity {

List<String> list;
GridView grid;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
   
        list=new ArrayList<String>();
        grid=(GridView) findViewById(R.id.gridView1);
   
        list.add("Grid 1");
        list.add("Grid 2");
        list.add("Grid 3");
        list.add("Grid 4");
        list.add("Grid 5");
        list.add("Grid 6");
        list.add("Grid 7");
        list.add("Grid 8");
        list.add("Grid 9");
   
        ArrayAdapter<String> adp=new ArrayAdapter<String> (this,
         android.R.layout.simple_dropdown_item_1line,list);
        grid.setAdapter(adp);
   
        grid.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
// TODO Auto-generated method stub

Toast.makeText(getBaseContext(), list.get(arg2),
Toast.LENGTH_SHORT).show();
}
});
    }

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

Step 4 : Open AndroidManifest.xml and add following code :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.gudivada.hemanthsomaraju"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.gudivada.hemanthsomaraju.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 5 : Our output will be like this :





 Dynamic GridView Creation in Android

Step 1 : Select File -> New -> Project -> Android Application Project (or) Android Project. Fill the forms and click "Finish" button. If you have any doubt regarding create a new project Click Here.

Step 2 : Open res -> layout -> activity_main.xml (or) main.xml and add following code :

<RelativeLayout 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/rl">
</RelativeLayout>

Step 3 : Open src -> package -> MainActivity.java and add following code :

package com.gudivada.hemanthsomaraju;

import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.RelativeLayout;
import android.widget.Toast;

public class MainActivity extends Activity {

RelativeLayout rl;
GridView grid;
List<String> list;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
   
        rl=(RelativeLayout) findViewById(R.id.rl);
        grid =new GridView(MainActivity.this);
        list=new ArrayList<String> ();
   
        list.add("Dynamic 1");
        list.add("Dynamic 2");
        list.add("Dynamic 3");
        list.add("Dynamic 4");
        list.add("Dynamic 5");
        list.add("Dynamic 6");
        list.add("Dynamic 7");
        list.add("Dynamic 8");
        list.add("Dynamic 9");
   
        ArrayAdapter<String> adp=new ArrayAdapter<String> (this,
         android.R.layout.simple_dropdown_item_1line,list);
        grid.setNumColumns(3);
        grid.setBackgroundColor(Color.BLUE);    
        grid.setAdapter(adp);
        rl.addView(grid);
   
        grid.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
// TODO Auto-generated method stub

Toast.makeText(getBaseContext(), list.get(arg2),
Toast.LENGTH_SHORT).show();
}
});
    }

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


Step 4 : Open AndroidManifest.xml and add following code :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.gudivada.hemanthsomaraju"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.gudivada.hemanthsomaraju.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 5 : Our output will be like this :



 GridView Creation by More Ways in Android

Step 1 : Select File -> New -> Project -> Android Application Project (or) Android Project. Fill the forms and click "Finish" button. If you have any doubt regarding create a new project Click Here.

Step 2 : Open res -> layout -> activity_main.xml (or) main.xml and add following code :

<RelativeLayout 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" >

    <GridView
        android:id="@+id/gridView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="#7CFC00"
        android:numColumns="3" >
    </GridView>

    <GridView
        android:id="@+id/gridView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/gridView1"
        android:layout_marginTop="10dp"
        android:background="#8B008B"
        android:numColumns="3" >
    </GridView>

    <GridView
        android:id="@+id/gridView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/gridView2"
        android:layout_marginTop="10dp"
        android:background="#000000"
        android:numColumns="3" >
    </GridView>

</RelativeLayout>

Step 3 : Open src -> package -> MainActivity.java and add following code :

package com.gudivada.hemanthsomaraju;

import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemLongClickListener;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.Toast;

public class MainActivity extends Activity {

GridView grid1,grid2,grid3;
List<String> list;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
   
        grid1=(GridView) findViewById(R.id.gridView1);
        grid2=(GridView) findViewById(R.id.gridView2);
        grid3=(GridView) findViewById(R.id.gridView3);
   
        list=new ArrayList<String> ();
        list.add("Grid 7");
        list.add("Grid 8");
        list.add("Grid 9");
        list.add("Grid 10");
        list.add("Grid 11");
        list.add("Grid 12");
   
        final String[] str2=
         {
         "Grid 13",
         "Grid 14",
         "Grid 15",
         "Grid 16",
         "Grid 17",
         "Grid 18"
         };
   
        final ArrayAdapter<CharSequence> adp1=ArrayAdapter.createFromResource(this,
         R.array.str1, android.R.layout.simple_dropdown_item_1line);
        grid1.setAdapter(adp1);
   
        ArrayAdapter<String> adp2=new ArrayAdapter<String> (this,
         android.R.layout.simple_dropdown_item_1line,list);
        grid2.setAdapter(adp2);
   
        ArrayAdapter<String> adp=new ArrayAdapter<String> (this,
         android.R.layout.simple_dropdown_item_1line,str2);
        grid3.setAdapter(adp);
   
        grid1.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3)
{
// TODO Auto-generated method stub

Toast.makeText(getBaseContext(), adp1.getItem(arg2),
Toast.LENGTH_SHORT).show();
}
});
   
        grid2.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3)
{
// TODO Auto-generated method stub

Toast.makeText(getBaseContext(), list.get(arg2),
Toast.LENGTH_SHORT).show();
}
});
   
        grid2.setOnItemLongClickListener(new OnItemLongClickListener() {

@Override
public boolean onItemLongClick(AdapterView<?> arg0, View arg1,int arg2, long arg3)
{
// TODO Auto-generated method stub

Toast.makeText(getBaseContext(), list.get(arg2),
Toast.LENGTH_SHORT).show();

// If You return false it will obey the both
//setOnItemClickListener and setOnItemLongClickListener
//Otherwise it only for setOnItemLongClickListener..

return true;
}
});
   
        grid3.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3)
{
// TODO Auto-generated method stub

Toast.makeText(getBaseContext(), str2[arg2],
Toast.LENGTH_SHORT).show();
}
});
    }

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

Step 4 : Open AndroidManifest.xml and add following code :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.gudivada.hemanthsomaraju"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.gudivada.hemanthsomaraju.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 5 : Open res ->values ->strings.xml and add following code :

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">HemanthSomaraju</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>


    <string-array name="str1">
        <item>Grid 1</item>
        <item>Grid 2</item>
        <item>Grid 3</item>
        <item>Grid 4</item>
        <item>Grid 5</item>
        <item>Grid 6</item>
  </string-array>

</resources>

Step 6 : Our output will be like this :


 Run Time Add Item to GridView in Android

Step 1 : Select File -> New -> Project -> Android Application Project (or) Android Project. Fill the forms and click "Finish" button. If you have any doubt regarding create a new project Click Here.

Step 2 : Open res -> layout -> activity_main.xml (or) main.xml and add following code :


<RelativeLayout 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" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:padding="11dp"
        android:layout_marginTop="22dp"
        android:ems="10"
        android:inputType="textPersonName" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="26dp"
        android:padding="11dp"
        android:text="Add" />

    <GridView
        android:id="@+id/gridView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:layout_marginTop="26dp"
        android:background="#00FF00"
        android:numColumns="2" >
    </GridView>

</RelativeLayout>

Step 3 : Open src -> package -> MainActivity.java and add following code :

package com.gudivada.hemanthsomaraju;

import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.GridView;
import android.widget.Toast;

public class MainActivity extends Activity {

GridView grid;
Button add;
EditText et;
List<String> list;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
   
        list=new ArrayList<String> ();
        list.add("Item 1");
        list.add("Item 2");
        list.add("Item 3");
        list.add("Item 4");
   
        grid = (GridView) findViewById(R.id.gridView1);
        et = (EditText) findViewById(R.id.editText1);
        add= (Button) findViewById(R.id.button1);
        add();
   
        add.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub

list.add(et.getText().toString());
add();
}
});    
    }

    public void add()
    {
     ArrayAdapter<String> adp=new ArrayAdapter<String> (getBaseContext(),
     android.R.layout.simple_dropdown_item_1line,list);
     grid.setAdapter(adp);
     grid.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
// TODO Auto-generated method stub

Toast.makeText(getBaseContext(), list.get(arg2),
Toast.LENGTH_SHORT).show();
}
});
    }

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

Step 4 : Open AndroidManifest.xml and add following code :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.gudivada.hemanthsomaraju"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.gudivada.hemanthsomaraju.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 5 : Our output will be like this :


 

 Add Images to GridView in Android

Step 1 : Select File -> New -> Project -> Android Application Project (or) Android Project. Fill the forms and click "Finish" button. If you have any doubt regarding create a new project Click Here.

Step 2 : Open res -> layout -> activity_main.xml (or) main.xml and add following code :

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/grid_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:columnWidth="150dp"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="40dp"
    android:numColumns="3"
    android:gravity="center"
    android:stretchMode="columnWidth" >
</GridView>

Step 3 : Open res -> layout -> full.xml and add following code :

<?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" >

    <ImageView android:id="@+id/full_image_view"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>

</LinearLayout>

Step 4 : Open src -> package -> MainActivity.java and add following code :

package com.gudivada.hemanthsomaraju;

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

public class MainActivity extends Activity {

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

        GridView gridView = (GridView) findViewById(R.id.grid_view);

        // Instance of ImageAdapter Class
        gridView.setAdapter(new ImageAdapter(this));
   
         // On Click event for Single Gridview Item
     
        gridView.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View v,
                    int position, long id) {

                // Sending image id to FullScreenActivity
                Intent i = new Intent(getApplicationContext(), FullImage.class);
                // passing array index
                i.putExtra("id", position);
                startActivity(i);
            }
        });
    }
}

Step 5 : Open src -> package -> ImageAdapter.java and add following code :

package com.gudivada.hemanthsomaraju;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    // Keep all Images in array
    public Integer[] mThumbIds = {
            R.drawable.amazon, R.drawable.android,
            R.drawable.apple, R.drawable.ask,
            R.drawable.dropbox, R.drawable.google,
            R.drawable.twitter, R.drawable.linkedin,
    };

    // Constructor
    public ImageAdapter(Context c){
        mContext = c;
    }

    @Override
    public int getCount() {
        return mThumbIds.length;
    }

    @Override
    public Object getItem(int position) {
        return mThumbIds[position];
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(mContext);
        imageView.setImageResource(mThumbIds[position]);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setLayoutParams(new GridView.LayoutParams(70, 70));
        return imageView;
    }
}

Step 6 : Open src -> package -> FullImage.java and add following code :

package com.gudivada.hemanthsomaraju;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.ImageView;

public class FullImage extends Activity {

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

        // get intent data
        Intent i = getIntent();

        // Selected image id
        int position = i.getExtras().getInt("id");
        ImageAdapter imageAdapter = new ImageAdapter(this);

        ImageView imageView = (ImageView) findViewById(R.id.full_image_view);
        imageView.setImageResource(imageAdapter.mThumbIds[position]);
    }
}

Step 7 : Open AndroidManifest.xml and add following code :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.gudivada.hemanthsomaraju"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.gudivada.hemanthsomaraju.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 8 : Our output will be like this :