{"id":440,"date":"2016-01-05T09:00:19","date_gmt":"2016-01-05T09:00:19","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=440"},"modified":"2019-06-12T08:00:57","modified_gmt":"2019-06-12T08:00:57","slug":"gridview","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/gridview","title":{"rendered":"GridView Tutorial With Examples In Android"},"content":{"rendered":"<p>In android GridView is a view group that display items in two dimensional scrolling grid (rows and columns), the grid items are not necessarily predetermined but they are automatically inserted to the layout using a ListAdapter. Users can then select any grid item by clicking on it. GridView is default scrollable so we don&#8217;t need to use ScrollView or anything else with GridView.<\/p>\n<p><center><\/center>GridView is widely used in android applications. An example of GridView is your default Gallery, where you have number of images displayed using grid.<\/p>\n<p><span style=\"color: #008000;\"><strong>Adapter Is Used To Fill Data In Gridview:<\/strong><\/span> To fill the data in a GridView we simply use adapter and grid items are automatically inserted to a GridView using an Adapter which pulls the content from a source such as an arraylist, array or database. You can read full <a href=\"\/ui\/adapter\">Adapter tutorial here<\/a>.<\/p>\n<p><span style=\"color: #008000;\"><strong>GridView in Android Studio:<\/strong><\/span>\u00a0Gridview is present inside Containers. From there you can drag and drop on virtual mobile screen to create it. Alternatively you can also XML code to create it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2293\" src=\"\/ui\/wp-content\/uploads\/2016\/01\/GridView-in-Android-Studio.jpg\" alt=\"GridView in Android Studio\" width=\"458\" height=\"193\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/01\/GridView-in-Android-Studio.jpg 458w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/01\/GridView-in-Android-Studio-300x126.jpg 300w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/p>\n<p><strong>Basic GridView code in XML:<\/strong><\/p>\n<pre>&lt;GridView\r\nandroid:id=\"@+id\/simpleGridView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:numColumns=\"3\"\/&gt;\r\n<\/pre>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-448\" src=\"\/ui\/wp-content\/uploads\/2015\/12\/Gridview-in-Android-Design.jpg\" alt=\"Gridview in Android Design\" width=\"219\" height=\"383\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2015\/12\/Gridview-in-Android-Design.jpg 219w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2015\/12\/Gridview-in-Android-Design-172x300.jpg 172w\" sizes=\"auto, (max-width: 219px) 100vw, 219px\" \/><\/center><span style=\"color: #ff0000;\"><strong>Important Note:<\/strong><\/span> numColumns property has to be specified otherwise GridView behaves like a ListView with just singleChoice. In the above image <code>numColumns<\/code> property specified that there is 3 columns to show, if we set it to <code>auto_fit<\/code> then it automatically display as many column as possible to fill the available space of the screen. Even if the phone is in portrait mode or landscape mode it automatically fill the whole space.<\/p>\n<hr \/>\n<h4><strong>Attributes of GridView:<\/strong><\/h4>\n<p>Lets see different attributes\u00a0of GridView which will be used while designing a custom grid view:<\/p>\n<p><span style=\"color: #008000;\"><strong>1.id:<\/strong><\/span> id is used to uniquely identify a GridView.<\/p>\n<p>Below is the id attribute\u2019s example code with explanation included in which we don&#8217;t specify the number of columns in a row that&#8217;s why\u00a0the GridView behaves like a ListView.<\/p>\n<p>Below is the id attribute example code for Gridview:<\/p>\n<pre>&lt;GridView\r\nandroid:id=\"@+id\/simpleGridView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\n\/&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>2.numColumns:<\/strong><\/span> numColumn define how many columns to show. It\u00a0 may be a integer value, such as &#8220;5&#8221; or <code>auto_fit<\/code>.<\/p>\n<p><code><strong>auto_fit<\/strong><\/code>\u00a0 is used to display as many columns as possible to fill the available space on the screen.<\/p>\n<p><strong><span style=\"color: #ff0000;\">Important Note:<\/span>\u00a0<\/strong>If we don&#8217;t specify numColumn property in GridView it behaves like a ListView with singleChoice.<\/p>\n<p>Below is the numColumns example code where we define 4 columns to show in the screen.<\/p>\n<pre><strong>&lt;!-- numColumns example code --&gt;<\/strong>\r\n&lt;GridView\r\nandroid:id=\"@+id\/simpleGridView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:numColumns=\"4\"\/&gt; &lt;!-- numColumns set to 4--&gt;\r\n\r\n<\/pre>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-452\" src=\"\/ui\/wp-content\/uploads\/2015\/12\/numColumns-attribute-property-in-gridview-android.jpg\" alt=\"numColumns attribute property in gridview android\" width=\"221\" height=\"331\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2015\/12\/numColumns-attribute-property-in-gridview-android.jpg 221w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2015\/12\/numColumns-attribute-property-in-gridview-android-200x300.jpg 200w\" sizes=\"auto, (max-width: 221px) 100vw, 221px\" \/><\/center><span style=\"color: #008000;\"><strong>3. horizontalSpacing:<\/strong><\/span> horizontalSpacing property is used to define the default horizontal spacing between columns. This could be in pixel(px),density pixel(dp) or scale independent pixel(sp).<\/p>\n<p>Below is the horizontalSpacing example code with explanation included where horizontal spacing between grid items is 50 dp.<\/p>\n<pre>&lt;!--Horizontal space example code in grid view--&gt;&gt;\r\n&lt;GridView\r\nandroid:id=\"@+id\/simpleGridView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:numColumns=\"3\"\r\nandroid:horizontalSpacing=\"50dp\"\/&gt;&lt;!--50dp horizontal space between grid items--&gt;<\/pre>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-453\" src=\"\/ui\/wp-content\/uploads\/2015\/12\/horizontalSpacing-in-Gridview.jpg\" alt=\"horizontal Spacing in Gridview\" width=\"222\" height=\"392\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2015\/12\/horizontalSpacing-in-Gridview.jpg 222w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2015\/12\/horizontalSpacing-in-Gridview-170x300.jpg 170w\" sizes=\"auto, (max-width: 222px) 100vw, 222px\" \/><\/center><span style=\"color: #008000;\"><strong>4.verticalSpacing:<\/strong><\/span> verticalSpacing property used to define the default vertical spacing between rows. This should be in px, dp or sp.<\/p>\n<p>Below is the verticalSpacing example code with explanation included, where vertical spacing between grid items is 50dp.<\/p>\n<pre><strong>&lt;!-- Vertical space between grid items code --&gt;<\/strong>\r\n&lt;GridView\r\nandroid:id=\"@+id\/simpleGridView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:numColumns=\"3\"\r\nandroid:verticalSpacing=\"50dp\"\/&gt;&lt;!--50dp vertical space set between grid items--&gt;\r\n<\/pre>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-454\" src=\"\/ui\/wp-content\/uploads\/2015\/12\/verticalSpacing-in-Grid-View-items-android.jpg\" alt=\"vertical Spacing in Grid View items android\" width=\"222\" height=\"381\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2015\/12\/verticalSpacing-in-Grid-View-items-android.jpg 222w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2015\/12\/verticalSpacing-in-Grid-View-items-android-175x300.jpg 175w\" sizes=\"auto, (max-width: 222px) 100vw, 222px\" \/><\/center><span style=\"color: #008000;\"><strong>5.columnWidth:<\/strong><\/span> columnWidth property specifies the fixed width of each column. This could be in px, dp or sp.<\/p>\n<p>Below is the columnWidth example code. Here column width is 80dp and selected item\u2019s background color is green which shows the actual width of a grid item.<\/p>\n<p><span style=\"color: #ff0000;\"><strong>Important Note:<\/strong><\/span> In the below code we also used\u00a0listSelector property which define color for selected item. Also to see the output of columnWidth using listSelector we need to use Adapter which is our next topic. The below code is not sufficient to show you the output.<\/p>\n<pre><strong>&lt;!--columnWidth in Grid view code--&gt;<\/strong>\r\n&lt;GridView\r\nandroid:id=\"@+id\/simpleGridView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:numColumns=\"3\"\r\nandroid:columnWidth=\"80dp\"\r\nandroid:listSelector=\"#0f0\"\/&gt;&lt;!--define green color for selected item--&gt;\r\n\r\n<\/pre>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-455\" src=\"\/ui\/wp-content\/uploads\/2015\/12\/column-Width-in-Grid-View-android.jpg\" alt=\"column Width in Grid View android\" width=\"214\" height=\"263\" \/><\/center><\/p>\n<hr \/>\n<h4><strong>GridView Example Using Different\u00a0Adapters In Android Studio:<\/strong><\/h4>\n<p>An adapter is a bridge between UI component and data source that helps us to fill data in UI component. It holds the data and sends the data to adapter view, then view can takes the data from the adapter view and shows the data on different views like as list view, grid view, spinner etc.<\/p>\n<p>GridView and ListView both are subclasses of\u00a0AdapterView\u00a0and it can be populated by binding\u00a0 to an\u00a0Adapter, which retrieves the data from an external source and creates a View that represents each data entry. In android commonly used adapters which fill data in GridVieware:<\/p>\n<p>1. Array Adapter<\/p>\n<p>2. Base Adapter<\/p>\n<p>3. Custom Array Adapter<\/p>\n<p>Now we explain these adapters\u00a0in detail:<\/p>\n<p><span style=\"color: #008000;\"><strong>1. Avoid Array Adapter To Fill Data In GridView:<\/strong><\/span><\/p>\n<p>Whenever you have a list of single items which is backed by an array, you can use ArrayAdapter. For instance, list of phone contacts, countries or names.<\/p>\n<p>By default, ArrayAdapter expects a Layout with a single TextView, If you want to use more complex views means more customization in grid items, please avoid ArrayAdapter and use custom adapters.<\/p>\n<pre>ArrayAdapter adapter = new ArrayAdapter&lt;String&gt;(this,R.layout.ListView,R.id.textView,StringArray);\r\n<\/pre>\n<hr \/>\n<h4><span style=\"color: #008000;\"><strong>2. GridView Using Base Adapter In Android:<\/strong><\/span><\/h4>\n<p>Base Adapter is a common base class of a general implementation of an Adapter that can be used in GridView. Whenever you need a customized grid view you create your own adapter and extend base adapter in that. Base Adapter can be extended to create a custom Adapter for displaying custom grid items. ArrayAdapter is also an implementation of BaseAdapter. You can read <a href=\"\/ui\/baseadapter-tutorial-example.html\">BaseAdapter tutorial here<\/a>.<\/p>\n<p><strong><span style=\"color: #008000;\">Example of GridView using Base Adapter in Android Studio:<\/span><\/strong> Below is the example of GridView in Android, in which we show the Android logo&#8217;s in the form of Grids. In this example firstly we create an int type array for logo images and then call the Adapter to set the data in the GridView. In this we create a CustomAdapter by extending BaseAdapter in it. At Last we implement setOnItemClickListener event on GridView and on click of any item we send that item to another Activity and show the logo image in full size.<\/p>\n<p>Below you can download code, see final output and step by step explanation of the example.<\/p>\n<p style=\"text-align: center;\"><a class=\"download\" href=\"https:\/\/github.com\/abhisheksaini4\/GridViewExample\" target=\"_blank\" rel=\"nofollow\">Download Code<\/a><a class=\"help\" title=\"Learn How To Download Code And Import In Android Studio\" href=\"\/androidstudio\/download-code-abhiandroid\" target=\"_blank\" rel=\"nofollow\"> ? <\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2290\" src=\"\/ui\/wp-content\/uploads\/2016\/01\/GridView-using-Base-Adapter-Example-In-Android-Studio.gif\" alt=\"GridView using Base Adapter Example In Android Studio\" width=\"270\" height=\"411\" \/><\/p>\n<p><span style=\"color: #008000;\"><strong>Step 1:<\/strong><\/span> Create a new Android project in Android Studio and fill all the required details. In our case we have named GridViewExample and package com.example.gourav.GridViewExample<\/p>\n<p><span style=\"color: #008000;\"><strong>Step 2:<\/strong> <\/span>Open activity_main.xml and paste the below code. In this we have created a Grid view insideLinear Layout and also set number of columns to 3.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:orientation=\"vertical\"&gt;\r\n    &lt;!--\r\n    GridView with 3 value for numColumns attribute\r\n    --&gt;\r\n    &lt;GridView\r\n        android:id=\"@+id\/simpleGridView\"\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:footerDividersEnabled=\"false\"\r\n        android:padding=\"1dp\"\r\n        android:numColumns=\"3\" \/&gt;\r\n&lt;\/LinearLayout&gt;\r\n\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 3:<\/strong> <\/span>: Create a new XML file and paste the below code. We have named activity_gridview.xml.<br \/>\nIn this step we create a new XML file and add a ImageView in it. This file is used in CustomAdapter to set the logo images<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:padding=\"1dp\"\r\n    android:orientation=\"vertical\"&gt;\r\n    &lt;ImageView\r\n        android:id=\"@+id\/icon\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"120dp\"\r\n        android:scaleType=\"fitXY\"\r\n        android:layout_gravity=\"center_horizontal\"\r\n        android:src=\"@drawable\/logo1\" \/&gt;\r\n&lt;\/LinearLayout&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 4:<\/strong><\/span>Now open drawable folder and save small size png images of different logo&#8217;s and name them like logo1,logo2 and etc.<\/p>\n<p><span style=\"color: #008000;\"><strong>Step 5:<\/strong> <\/span>Now open MainActivity.java and paste the below code. If your package name is different, don\u2019t copy it.<br \/>\nIn this step firstly we get the reference of GridView and then create a int type array for Android logo&#8217;s. After that we call the CustomAdapter and pass the array in it. At Last we implement setOnItemClickListener event on GridView and on click of any item we send that item to another Activity to show the logo image in Full Size. I have added comments in code to help you to understand the code easily so make you read the comments.<\/p>\n<pre>package com.example.gourav.GridViewExample;\r\nimport android.content.Intent;\r\nimport android.os.Bundle;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.view.View;\r\nimport android.widget.AdapterView;\r\nimport android.widget.GridView;\r\npublic class MainActivity extends AppCompatActivity {\r\n    GridView simpleGrid;\r\n    int logos[] = {R.drawable.logo1, R.drawable.logo2, R.drawable.logo3, R.drawable.logo4,\r\n            R.drawable.logo5, R.drawable.logo6, R.drawable.logo7, R.drawable.logo8, R.drawable.logo9,\r\n            R.drawable.logo10, R.drawable.logo11, R.drawable.logo12, R.drawable.logo13};\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        simpleGrid = (GridView) findViewById(R.id.simpleGridView); \/\/ init GridView\r\n        \/\/ Create an object of CustomAdapter and set Adapter to GirdView\r\n        CustomAdapter customAdapter = new CustomAdapter(getApplicationContext(), logos);\r\n        simpleGrid.setAdapter(customAdapter);\r\n        \/\/ implement setOnItemClickListener event on GridView\r\n        simpleGrid.setOnItemClickListener(new AdapterView.OnItemClickListener() {\r\n            @Override\r\n            public void onItemClick(AdapterView&lt;?&gt; parent, View view, int position, long id) {\r\n                \/\/ set an Intent to Another Activity\r\n                Intent intent = new Intent(MainActivity.this, SecondActivity.class);\r\n                intent.putExtra(\"image\", logos[position]); \/\/ put image data in Intent\r\n                startActivity(intent); \/\/ start Intent\r\n            }\r\n        });\r\n    }\r\n}\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 6:<\/strong><\/span> Create a new class CustomAdapter and paste the below code.<br \/>\nIn this step we create a CustomAdapter class by extending BaseAdapter in it. In this step we set the logo image&#8217;s in the grid items. I have added comments in code to help you to understand the code easily so make you read the comments.<\/p>\n<pre>package com.example.gourav.GridViewExample;\r\nimport android.content.Context;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.widget.BaseAdapter;\r\nimport android.widget.ImageView;\r\npublic class CustomAdapter extends BaseAdapter {\r\n    Context context;\r\n    int logos[];\r\n    LayoutInflater inflter;\r\n    public CustomAdapter(Context applicationContext, int[] logos) {\r\n        this.context = applicationContext;\r\n        this.logos = logos;\r\n        inflter = (LayoutInflater.from(applicationContext));\r\n    }\r\n    @Override\r\n    public int getCount() {\r\n        return logos.length;\r\n    }\r\n    @Override\r\n    public Object getItem(int i) {\r\n        return null;\r\n    }\r\n    @Override\r\n    public long getItemId(int i) {\r\n        return 0;\r\n    }\r\n    @Override\r\n    public View getView(int i, View view, ViewGroup viewGroup) {\r\n        view = inflter.inflate(R.layout.activity_gridview, null); \/\/ inflate the layout\r\n        ImageView icon = (ImageView) view.findViewById(R.id.icon); \/\/ get the reference of ImageView\r\n        icon.setImageResource(logos[i]); \/\/ set logo images\r\n        return view;\r\n    }\r\n}\r\n\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 7:<\/strong><\/span> Now Create a new XML file named activity_second and paste the below code in it.<br \/>\nIn this step we create an XML file for our Second Activity to display the logo image in full size.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    android:background=\"#fff\"\r\n    tools:context=\"com.example.gourav.GridViewExample.SecondActivity\"&gt;\r\n    &lt;ImageView\r\n        android:id=\"@+id\/selectedImage\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_centerInParent=\"true\"\r\n        android:scaleType=\"fitXY\" \/&gt;\r\n&lt;\/RelativeLayout&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 8:<\/strong><\/span> Now Create a new Activity with name SecondActivity.class and add below code in it.<\/p>\n<p>In this step we create a new Activity in which firstly we initiate the ImageView and then get the Image from our Previous Activity by using Intent object and set the same in the ImageView.<\/p>\n<pre>package com.example.gourav.GridViewExample;\r\nimport android.content.Intent;\r\nimport android.os.Bundle;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.widget.ImageView;\r\npublic class SecondActivity extends AppCompatActivity {\r\n    ImageView selectedImage;\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_second);\r\n        selectedImage = (ImageView) findViewById(R.id.selectedImage); \/\/ init a ImageView\r\n        Intent intent = getIntent(); \/\/ get Intent which we set from Previous Activity\r\n        selectedImage.setImageResource(intent.getIntExtra(\"image\", 0)); \/\/ get image from Intent and set it in ImageView\r\n    }\r\n}\r\n<\/pre>\n<p><strong>Output:<\/strong> Now run the App and you will see different Android images in GridView. Click on the any image and full size of it will open up.<\/p>\n<hr \/>\n<h4><strong>3. GridView Example Using Custom ArrayAdapter In Android Studio:<\/strong><\/h4>\n<p>ArrayAdapter is also an implementation of BaseAdapter so if we want more customization then we create a custom adapter and extend ArrayAdapter in that. Here we are creating GridView using <a href=\"\/ui\/custom-arrayadapter-tutorial-example.html\">custom array adapter<\/a>.<\/p>\n<p><span style=\"color: #008000;\"><strong>Example of GridView using Custom Adapter :<\/strong> <\/span>Example of Grid View using custom arrayadapter to show birds in the form of grids. Below is the code and final output:<\/p>\n<p>Below you can download code, see final output and step by step explanation of the topic.<\/p>\n<p style=\"text-align: center;\"><a class=\"download\" href=\"https:\/\/github.com\/abhisheksaini4\/GridViewExample\" target=\"_blank\" rel=\"nofollow\">Download Code<\/a> <a class=\"help\" title=\"Learn How To Download Code And Import In Android Studio\" href=\"\/androidstudio\/download-code-abhiandroid\" target=\"_blank\" rel=\"nofollow\"> ? <\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2268\" src=\"\/ui\/wp-content\/uploads\/2016\/01\/GridView-CustomArray-Example-In-Android-Studio.jpg\" alt=\"GridView CustomArray Example In Android Studio\" width=\"256\" height=\"416\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/01\/GridView-CustomArray-Example-In-Android-Studio.jpg 256w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/01\/GridView-CustomArray-Example-In-Android-Studio-185x300.jpg 185w\" sizes=\"auto, (max-width: 256px) 100vw, 256px\" \/><br \/>\n<strong><span style=\"color: #008000;\">Step 1:<\/span><\/strong> Create a new project and name it GridViewExample.<br \/>\n<span style=\"color: #008000;\"><strong>Step 2:<\/strong><\/span> Now open app -&gt; res -&gt; layout -&gt; activity_main.xml (or) main.xml and add following code :<\/p>\n<pre>&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/activity_main\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\"abhiandroid.com.gridviewexample.MainActivity\"&gt;\r\n\r\n    &lt;GridView\r\n        android:id=\"@+id\/simpleGridView\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:numColumns=\"3\"\/&gt;\r\n\r\n&lt;\/RelativeLayout&gt;\r\n<\/pre>\n<p><strong><span style=\"color: #008000;\">Step 3:<\/span><\/strong> Create a new layout Activity in app -&gt; res-&gt; layout-&gt; new activity and name it grid_view_items.xml and add following code:<\/p>\n<pre>&lt;RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/grid_view_items\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\"abhiandroid.com.gridviewexample.GridViewItems\"&gt;\r\n\r\n    &lt;ImageView\r\n        android:id=\"@+id\/imageView\"\r\n        android:layout_width=\"150dp\"\r\n        android:layout_height=\"150dp\"\r\n        android:padding=\"5dp\"\r\n        android:scaleType=\"fitXY\"\r\n        android:src=\"@drawable\/ic_launcher\"\r\n        android:layout_alignParentTop=\"true\"\r\n        android:layout_centerHorizontal=\"true\" \/&gt;\r\n\r\n    &lt;TextView\r\n        android:id=\"@+id\/textView\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:padding=\"@dimen\/activity_horizontal_margin\"\r\n        android:text=\"Demo\"\r\n        android:textColor=\"#000\"\r\n        android:layout_below=\"@+id\/imageView\"\r\n        android:layout_centerHorizontal=\"true\"\r\n        android:layout_marginTop=\"13dp\" \/&gt;\r\n&lt;\/RelativeLayout&gt;\r\n<\/pre>\n<p><strong><span style=\"color: #008000;\">Step 4:<\/span><\/strong> Now open app -&gt; java -&gt; package -&gt; MainActivity.java<\/p>\n<pre>import android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\nimport android.widget.GridView;\r\nimport java.util.ArrayList;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    GridView simpleList;\r\n    ArrayList birdList=new ArrayList&lt;&gt;();\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        simpleList = (GridView) findViewById(R.id.simpleGridView);\r\n        birdList.add(new Item(\"Bird 1\",R.drawable.b1));\r\n        birdList.add(new Item(\"Bird 2\",R.drawable.b2));\r\n        birdList.add(new Item(\"Bird 3\",R.drawable.b3));\r\n        birdList.add(new Item(\"Bird 4\",R.drawable.b4));\r\n        birdList.add(new Item(\"Bird 5\",R.drawable.b5));\r\n        birdList.add(new Item(\"Bird 6\",R.drawable.b6));\r\n\r\n        MyAdapter myAdapter=new MyAdapter(this,R.layout.grid_view_items,birdList);\r\n        simpleList.setAdapter(myAdapter);\r\n\r\n    }\r\n}\r\n<\/pre>\n<p><strong><span style=\"color: #008000;\">Step5 :<\/span><\/strong> Create a new Class src -&gt; package -&gt; MyAdapter.java and add the following code:<\/p>\n<pre>import android.content.Context;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.widget.ArrayAdapter;\r\nimport android.widget.ImageView;\r\nimport android.widget.TextView;\r\n\r\nimport java.util.ArrayList;\r\n\r\npublic class MyAdapter extends ArrayAdapter {\r\n\r\n    ArrayList birdList = new ArrayList&lt;&gt;();\r\n\r\n    public MyAdapter(Context context, int textViewResourceId, ArrayList objects) {\r\n        super(context, textViewResourceId, objects);\r\n        birdList = objects;\r\n    }\r\n\r\n    @Override\r\n    public int getCount() {\r\n        return super.getCount();\r\n    }\r\n\r\n    @Override\r\n    public View getView(int position, View convertView, ViewGroup parent) {\r\n\r\n        View v = convertView;\r\n        LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);\r\n        v = inflater.inflate(R.layout.grid_view_items, null);\r\n        TextView textView = (TextView) v.findViewById(R.id.textView);\r\n        ImageView imageView = (ImageView) v.findViewById(R.id.imageView);\r\n        textView.setText(birdList.get(position).getbirdName());\r\n        imageView.setImageResource(birdList.get(position).getbirdImage());\r\n        return v;\r\n\r\n    }\r\n\r\n}\r\n<\/pre>\n<p><strong><span style=\"color: #008000;\">Step 6:<\/span> <\/strong>Create a new Class src -&gt; package -&gt; Item.java and add the below code:<\/p>\n<pre>public class Item {\r\n\r\n    String birdListName;\r\n    int birdListImage;\r\n\r\n    public Item(String birdName,int birdImage)\r\n    {\r\n        this.birdListImage=birdImage;\r\n        this.birdListName=birdName;\r\n    }\r\n    public String getbirdName()\r\n    {\r\n        return birdListName;\r\n    }\r\n    public int getbirdImage()\r\n    {\r\n        return birdListImage;\r\n    }\r\n}\r\n\r\n<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Now run the App and you will see different bird images in GridView.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In android GridView is a view group that display items in two dimensional scrolling grid (rows and columns), the grid items are not necessarily predetermined but they are automatically inserted to the layout using a ListAdapter. Users can then select any grid item by clicking on it. GridView is default scrollable so we don&#8217;t need &hellip; <a href=\"https:\/\/abhiandroid.com\/ui\/gridview\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">GridView Tutorial With Examples In Android<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-440","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"<title>GridView Tutorial With Examples In Android Studio \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"Explanation on Gridview using examples and code in Android Studio. Also learn how array adapter and base adapter used to fill data in Gridview.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/gridview\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=440"}],"version-history":[{"count":2,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/440\/revisions"}],"predecessor-version":[{"id":2786,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/440\/revisions\/2786"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}