WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

GridView Tutorial Android


Grid View is a view group that display items in 2D scrolling grid rows and columns.


Grid view can automatic insert to layout using a List Adapter.

In android app Grid View are very helpful and mostly used.

Grid View example in XML

<GridView
android:id="@+id/demoGridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="4"
android:numRow="2"/>

Grid view Attribute

ID:id is used to unique identify a Grid View.


Here the example of grid view
<GridView
android:id="@+id/demoGridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>


horizontalSpacing It can be used to default horizontal spacing between columns and set as pixel(px),density pixel(dp)

Below the example of horizontal spacing between grid items is 60 dp.

>
<GridView
android:id="@+id/demoGridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="2"
android:numRows="3"
android:horizontalSpacing="60dp"/>

numColumns It can be define as num of colums.It have Integer(Int such as 0,1 and more) value or set automatic fix auto_fit.

Below the example of 2 columne present on display.


<GridView
android:id="@+id/demoGridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="2"/> 



columnWidth It can used to fix width of each column.same it support px dp or sp value


<GridView
android:id="@+id/demoGridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="2"
android:columnWidth="65dp"
android:listSelector="#fff"/> 

Android GridView Adapters

We are understand Adapter is a bridge between user interface component

Adapter is data source that helps us to fill data in user interface component

Grid view and List View both are sub classes of Adapter View it can bind to an Adapter.

Adapter used to:
  • Array Adapter
  • Custom Array Adapter
  • Base Adapter

array adapter

it can list of single items which is backed by an array.Mainly we can use Array Adapter. Mainly used to countries or names.
ArrayAdapter adapter = new ArrayAdapter(this,R.layout.ListView,R.id.textView,StringArray);

Custom Array Adapter

Array Adapter is also an implementation of Base Adapter.
Create a new project and name it GridViewdemo
open app -> res -> layout -> activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="welookups.com.gridviewexample.MainActivity">

  <GridView
        android:id="@+id/demoGridView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="2"/>

</RelativeLayout>

Create a new layout Activity in app -> res-> layout-> new activity and name it grid_view_items.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/grid_view_items"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="welookups.com.gridviewexample.GridViewItems">

  <ImageView
        android:id="@+id/imageView"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:padding="6dp"
        android:scaleType="setXY"
        android:src="@drawable/ic_launcher"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="@dimen/activity_horizontal_margin"
        android:text="edit you want "
        android:textColor="#fff"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="13dp" />
</RelativeLayout>

open app -> java -> package -> MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.GridView;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    GridView simpleList;
    ArrayList birdList=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        simpleList = (GridView) findViewById(R.id.simpleGridView);
        birdList.add(new Item("Guava 1",R.drawable.b1));
        birdList.add(new Item("Kumquat 2",R.drawable.b2));
        birdList.add(new Item("Lemon 3",R.drawable.b3));
        birdList.add(new Item("Lychee 4",R.drawable.b4));
        birdList.add(new Item("Mango 5",R.drawable.b5));
        birdList.add(new Item("Orange 6",R.drawable.b6));

        MyAdapter myAdapter=new MyAdapter(this,R.layout.grid_view_items,birdList);
        simpleList.setAdapter(myAdapter);

    }
}
Create a new Class src -> package -> MyAdapter.java
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;

import java.util.ArrayList;

public class MyAdapter extends ArrayAdapter {

    ArrayList birdList = new ArrayList<>();

    public MyAdapter(Context context, int textViewResourceId, ArrayList objects) {
        super(context, textViewResourceId, objects);
        birdList = objects;
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        View v = convertView;
        LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = inflater.inflate(R.layout.grid_view_items, null);
        TextView textView = (TextView) v.findViewById(R.id.textView);
        ImageView imageView = (ImageView) v.findViewById(R.id.imageView);
        textView.setText(birdList.get(position).getbirdName());
        imageView.setImageResource(birdList.get(position).getbirdImage());
        return v;

    }

}

Create a new Class src -> package -> Item.java
public class Item {

    String fruitsListName;
    int fruitsListImage;

    public Item(String birdName,int birdImage)
    {
        this.fruitsListImage=birdImage;
        this.fruitsListName=birdName;
    }
    public String getbirdName()
    {
        return fruitsListName;
    }
    public int getfruitsImage()
    {
        return fruitsListImage;
    }
}