Android GridView Layout Example

Total Views : 736
Zoom In Zoom Out Read Later Print

In this tutorial we will learn about GridView layout. Gridview is mainly useful when we want show data in grid layout like displaying icons or images.

GridView elements are not predefined and the data can be inserted into the layout using Adapters . We can set the number of columns, their width, and relevant spacing.

1. Create a new Project .
2. Copy Images you want to show in GridLayout.
3. Copy the following code in activity_main.xml

activity_main.xml

<?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="match_parent"
android:layout_height="match_parent"
android:numColumns="auto_fit"
android:columnWidth="100dp"
android:horizontalSpacing="5dp"
android:verticalSpacing="5dp"
android:gravity="center"
android:stretchMode="columnWidth" >
</GridView>

Attributes

1. android:id : Id to identify GridView.
2. android:numColumns : Ddefines how many column to show in GridView
3. anbdroid:columWidth : Fixed width for each column.
4. android:horizontalSpacing : Default  horizontal spacing between columns.
5. android:verticalSpacing : Default  vertical spacing between columns.
6. android:gravity : Specifies gravity withing each cell of grid.
7. android:stretchMode : Defines how column should stretch to fill empty space.

GridAdapter.java

package com.prodevsblog.gridviewexample;

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 GridAdapter extends BaseAdapter {
private Context ctx;

public Integer[] mImages = {
R.drawable.img_1, R.drawable.img_2, R.drawable.img_3,
R.drawable.img_4, R.drawable.img_5, R.drawable.img_6,
R.drawable.img_7, R.drawable.img_8, R.drawable.img_9,
};

// Constructor
public GridAdapter(Context ctx){
this.ctx = ctx;
}

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

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

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {
//Setting Image View or you can create a xml then inflate
ImageView imageView = new ImageView(ctx);
imageView.setImageResource(mImages[position]);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setLayoutParams(new GridView.LayoutParams(200, 200));
return imageView;
}

}


MainActivity.java

package com.prodevsblog.gridviewexample;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;

public class MainActivity extends AppCompatActivity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
void init(){
GridView gridView = findViewById(R.id.grid_view);
// Instance of GridAdapter Class
gridView.setAdapter(new GridAdapter(this));

// On Click event for Single Item
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
Intent i = new Intent(getApplicationContext(), ViewImageActivity.class);
i.putExtra("id", position);
startActivity(i);
}
});
}
}

activity_view_image.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:orientation="vertical" >

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

</LinearLayout>

ViewImageActivity.java

package com.prodevsblog.gridviewexample;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

public class ViewImageActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_image);
init();
}
void init(){
// Intent data
Intent i = getIntent();

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

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

If you have any problem with above code you can comment or simply download our working code for this project.

See More

Latest Photos