In this tutorial you will learn about the Android Grid View and its application with practical example.
Android Grid View
It displays items in a two-dimensional , scrollable grid. The ListView and GridView are subclass of AdapterView . As we discussed in ListView that Adapter is a bridge between UI and Data source and it retrieves data from data source.
Lets understand it by an example , Create GridView in Xml Layout like below code
|
1 2 3 4 5 6 7 8 9 10 11 |
<GridView android:id="@+id/gv_test" android:layout_width="fill_parent" android:layout_height="fill_parent" android:columnWidth="90dp" android:numColumns="2" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:stretchMode="columnWidth" android:gravity="center" /> |
GridView Attributes
android:id : it used to identify GridView Uniquely.
android:numColumns : It used to define that how many columns will be shown on display. It may be integer value like “2” or auto_fit. auto_fit means as many as column possible to fit on display.
android:verticalSpacing : It defines vertical spacing between rows, It can be dp,px,sp,in or mm.
android:horizontalSpacing : It defines horizontal spacing between columns.
android:strechMode : It defines how columns should stretched to fill display.
Now lets see how your gridview will look in xml files.
Now it’s time to do some coding part, You have to create Activity, Bean and an Adapter for display your GridView. Do not you worry about that all things are ready, you can try below code and run your code, you will get your gridview screen, just follow all steps.
Beans : JavaBeans are classes that encapsulate many objects into a single object. It contains constructor, Getter, Setter Methods. With the help of Setter and Getter method user can set and get data. It also have zero argument constructor. Check out below code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
package com.example.myapplication; public class GridViewBean { int image; public GridViewBean() { } public GridViewBean(int image) { super(); this.image = image; } public int getImage() { return image; } public void setImage(int image) { this.image = image; } } |
Base Adapter: BaseAdapter which extends object and implements ListAdapter and Spinner Adapter. It can be used in ListView, GridView and Spinner. BaseAdapter is very generic adapter which allows you to do pretty much whatever you want . Its custom Adapter from which you can do whatever you want to do with grid and list, But you need to do some coding for it. Check below coding for Base Adapter.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
package com.example.myapplication; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import java.util.ArrayList; import java.util.List; public class GridViewBaseAdapter extends BaseAdapter { public ArrayList<GridViewBean> arraylistListener; private List<GridViewBean> mListenerList; Context mContext; public GridViewBaseAdapter(List<GridViewBean> mListenerList, Context context) { mContext = context; this.mListenerList = mListenerList; this.arraylistListener = new ArrayList<GridViewBean>(); this.arraylistListener.addAll(mListenerList); } public class ViewHolder { ImageView mItemPic; } @Override public int getCount() { return mListenerList.size(); } @Override public Object getItem(int position) { return mListenerList.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(final int position, View view, ViewGroup parent) { final ViewHolder holder; if (view == null) { view = LayoutInflater.from(mContext).inflate(R.layout.layout_gv_adapter, null); holder = new ViewHolder(); holder.mItemPic = (ImageView) view.findViewById(R.id.im_test); view.setTag(holder); } else { holder = (ViewHolder) view.getTag(); } try { int image = mListenerList.get(position).getImage(); holder.mItemPic.setImageResource(image); }catch (Exception ex){ } return view; } } |
Also design xml for Adapter view, Like I did check xml code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="200dp" android:layout_height="200dp" android:id="@+id/im_test" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:layout_marginBottom="10dp" android:layout_marginRight="10dp" android:background="@drawable/border_layout" android:src="@drawable/android"/> </RelativeLayout> |
At final Stage you have to do bind your GridView with Adapter. Lets finish this. Checkout below code :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
package com.example.myapplication; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.widget.GridView; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { GridView gv; GridViewBaseAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.gridview_layout); gv = (GridView) findViewById(R.id.gv_test); ArrayList<GridViewBean> arr_bean=new ArrayList<GridViewBean>(); arr_bean.add(new GridViewBean(R.drawable.android)); arr_bean.add(new GridViewBean(R.drawable.java)); arr_bean.add(new GridViewBean(R.drawable.python)); arr_bean.add(new GridViewBean(R.drawable.mysql)); arr_bean.add(new GridViewBean(R.drawable.android)); arr_bean.add(new GridViewBean(R.drawable.java)); adapter=new GridViewBaseAdapter(arr_bean,this); gv.setAdapter(adapter); } } |
Now the output of this code will look like below image.
