Top Menu

Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Thursday 15 January 2015

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
A. Static GridView Creation in Android
Step 1 : Create a new project "GridView_Static"
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:numColumns="auto_fit"
    android:background="#7CFC00"
    android:gravity="center"
    android:columnWidth="100dp"
    android:stretchMode="columnWidth" >
 
</GridView>
Step 3 : Open src -> package -> MainActivity.java and add following code :
package com.example.gridview_static1;
 
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.activity_main, menu);
        return true;
    }    
}
Step 4 : Open AndroidManifest.xml and add following code :
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.gridview_static1"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk
        android:minSdkVersion="3"
        android:targetSdkVersion="15" />
 
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" >
            <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 :
<resources>
 
    <string name="app_name">GridView_Static1</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
 
</resources>
Step 6 : Our output will be like this :



Output




B. Dynamic GridView Creation in Android
Step 1 : Create a new project "GridView_Dynamic"
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.example.gridview_dynamic;
 
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.BLACK);        
        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.activity_main, menu);
        return true;
    }
}
Step 4 : Open AndroidManifest.xml and add following code :
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.gridview_dynamic"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk
        android:minSdkVersion="3"
        android:targetSdkVersion="15" />
 
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" >
            <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 :
<resources>
 
    <string name="app_name">GridView_Dynamic</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
 
</resources>
Step 6 : Our output will be like this :



Output






C. GridView Creation by More Ways in Android

Step 1 : Create a New Project -> GridView_More
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.example.gridview_more;
 
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.activity_main, menu);
        return true;
    }    
}
Step 4 : Open AndroidManifest.xml and add following code :
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.gridview_more"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk
        android:minSdkVersion="3"
        android:targetSdkVersion="15" />
 
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" >
            <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 :
<resources>
    <string name="app_name">GridView_More</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</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 :



Output







D. Run Time Add Item to GridView in Android
Step 1 : Create a New Project -> GridView_Run
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.example.gridview_run;
 
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.activity_main, menu);
        return true;
    }
}
Step 4 : Open AndroidManifest.xml and add following code :
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.gridview_run"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk
        android:minSdkVersion="3"
        android:targetSdkVersion="15" />
 
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" >
            <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 :
<resources>
 
    <string name="app_name">GridView_Run</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
 
</resources>
Step 6 : Our output will be like this :



Output






E. Add Images to GridView in Android

Step 1 : Create a New Project -> GridView_Img
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.example.gridview_img;
 
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.example.gridview_img;
 
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.cup, R.drawable.donut,
            R.drawable.eclair, R.drawable.froyo,
            R.drawable.ginger, R.drawable.honey,
            R.drawable.ics, R.drawable.jellybean,
    };
 
    // 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 balaji.gridview_img;
 
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 :

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.gridview_img"
    android:versionCode="1"
    android:versionName="1.0" >
 
    <uses-sdk
        android:minSdkVersion="3"
        android:targetSdkVersion="15" />
 
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".FullImage"></activity>
    </application>
 
</manifest>
Step 8 : Open res ->values ->strings.xml and add following code :
<resources>
 
    <string name="app_name">GridView_Img</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
 
</resources>
Step 9 : Our output will be like this :



Output





Output
Posted by at
Labels:

3 comments:

  1. Heart Free4 January 2016 at 02:26

    Thank you sooo much for this example - it was very clear and effective!

    ReplyDelete
  2. Heart Free4 January 2016 at 02:27

    Thank you sooo much for this example - it was very clear and effective!

    ReplyDelete

Subscribe to: Post Comments (Atom)