Endless Tutorial - Android - Grid View Function

Android GridView displays items in a two-dimensional scrolling grid (rows and columns), and the grid items are not necessarily scheduled, but they are automatically inserted into the layout using a ListAdapter

Grid View - Grid view

ListView and GridView are subclasses of AdapterView that can be populated by binding them to an Adapter that takes data from an external source and creates a view representing each data entry.

Grid View - Properties

Following are the important properties specific to GridView −

Sr.No	Attribute & Description
1	android:id This is the ID that uniquely identifies the layout.
2	android:columnWidth This specifies a fixed width for each column. Can be px, dp, sp, in or mm.
3	android:gravity Specifies the location within each cell. Possible values are top, bottom, left, right, center, center_vertical, center_horizontal, etc.
4	android:horizontalSpacing Defines the default horizontal spacing between columns. Can be px, dp, sp, in or mm.
5	android:numColumns Defines the number of columns to display. Can be an integer value like "100" or auto_fit, which says to display as many columns as possible to fill the available space.
6	android:stretchMode Defines how the column should stretch to fill the available empty space (if any). This must be one of the following two values: none - disable stretching. spacingWidth - Extends the space between each column. columnWidth - Each column is stretched equally. spacingWidthUniform - The spacing between each column is stretched uniformly. .
7	android:verticalSpacing Defines the default vertical spacing between lines. Can be px, dp, sp, in or mm.

Grid View - example

This example takes you through simple steps to show how to create your own Android application using GridView.

The following is the content of the modified main Activity file src/com.example.helloworld/MainActivity.java. This file can include every basic lifecycle method.

package com.example.helloworld;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.GridView;

public class MainActivity extends Activity {
   
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
   
   
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      
      GridView gridview = (GridView) findViewById(R.id.gridview);
      gridview.setAdapter(new ImageAdapter(this));
   }
}

Following is the content of res/layout/activity_main.xml file −

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

Following is the content of res/values/strings.xml to define two new constants −

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="app_name">HelloWorld</string>
   <string name="action_settings">Settings</string>
</resources>

Following are the contents of the src/com.example.helloworld/ImageAdapter.java file −

package com.example.helloworld;

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;
   
   //Constructor
   public ImageAdapter(Context c) {
   
   
      mContext = c;
   }
   
   public int getCount() {
   
   
      return mThumbIds.length;
   }

   publicgetItem(int position) {
   
   
      return null;
   }

   public long getItemId(int position) {
   
   
      return 0;
   }
   
   //为 Adapter 引用的每个项目创建一个新的 ImageView
   public View getView(int position, View convertView, ViewGroup parent) {
   
   
      ImageView imageView;
      
      if (convertView == null) {
   
   
         imageView = new ImageView(mContext);
         imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
         imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
         imageView.setPadding(8, 8, 8, 8);
      } 
      else 
      {
   
   
         imageView = (ImageView) convertView;
      }
      imageView.setImageResource(mThumbIds[position]);
      return imageView;
   }
   
   //Keep all Images in array
   public Integer[] mThumbIds = {
   
   
      R.drawable.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7,
      R.drawable.sample_0, R.drawable.sample_1,
      R.drawable.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7,
      R.drawable.sample_0, R.drawable.sample_1,
      R.drawable.sample_2, R.drawable.sample_3,
      R.drawable.sample_4, R.drawable.sample_5,
      R.drawable.sample_6, R.drawable.sample_7
   };
}

Run Eclipse Run Icon Toolbar. Android studio installs the app on your AVD and starts it, if everything is ok with the settings and the app, it will show up in the "Emulator" window -

Sub-Activity example

Below is the content of the modified main Activity file src/com.example.helloworld/MainActivity.java, which can include every basic lifecycle method.

package com.example.helloworld;

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

import android.view.Menu;
import android.view.View;

import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;

public class MainActivity extends Activity {
   
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
   
   
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      
      GridView gridview = (GridView) findViewById(R.id.gridview);
      gridview.setAdapter(new ImageAdapter(this));
      
      gridview.setOnItemClickListener(new OnItemClickListener() {
   
   
         public void onItemClick(AdapterView<?> parent, 
            View v, int position, long id){
   
   
            //Send intent to SingleViewActivity 
            Intent i = new Intent(getApplicationContext(), SingleViewActivity.class);
            //Pass image index
            i.putExtra("id", position);
            startActivity(i);
         }
      });
   }
}

Following is the content of the new Activity file src/com.example.helloworld/SingleViewActivity.java file −

package com.example.helloworld;

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

public class SingleViewActivity extends Activity {
   
   
   @Override
   public void onCreate(Bundle savedInstanceState) {
   
   
      super.onCreate(savedInstanceState);
      setContentView(R.layout.single_view);
      
      //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.SingleView);
      imageView.setImageResource(imageAdapter.mThumbIds[position]);
   }
}

Following is the content of res/layout/single_view.xml file −

<?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/SingleView"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"/>
 
</LinearLayout>

Following is the content of AndroidManifest.xml to define two new constants −

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.helloworld">
      
   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name="com.example.helloworld.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>
   
      <activity android:name=".SingleViewActivity"></activity>
   
   </application>
</manifest>

Then click on the Run Eclipse running icon toolbar. Android studio will install the application on your AVD and start it, if everything is fine with the settings and application, it will show in the "Emulator" window -

Now if you click on any of these images it will be displayed as a single image like -

Grid View function in Android - Wuya Tutorial Network Wuya Tutorial Network provides Android GridView to display items in a two-dimensional scrolling grid (rows and columns), and grid items are not necessarily scheduled, but... https: / /www.learnfk.com/android/android-grid-view.html