Android GridView Example Using Android Studio

Android GridView is the mostly used ViewGroup. GridView enables us to arrange data in the form of rows and columns. GridView is a two-dimensional scrolling grid. We can populate a cell of GridView with multiple views inside it such as TextView and ImageView.

The best way to learn something is to practically implement it in a real project.We will develop a small application in order to implement GridView. We will display Flags of different countries and name in a GridView.

Android GridView Tutorial – Important Topics

  • Adding a GridView in main layout.
  • Creating Inner layout for GridView. They layout inside a cell.
  • Using CustomAdapter by extending BaseAdapter class.
  • Populating GridView with data.
  • Styling GridView with selector.

Project Source Code

You can Download the complete project code,

How to implement GridView with Custom Adapter

Create a new project in Android Studio and name it GridViewTutorial. The name of activity is MainActivity and activity_main.xml is the layout file. Open main activity layout file and add the GridView in it.

activity_main.xml

Create a new XML file in the drawable folder for adding a selector to style the GridView. We will define a different state of the item such as default state, selected state.

res -> drawable-> grid_selector.xml

We will add colors in colors.xml.

res -> values -> colors.xml

Open main activity file and add the below code except for the top line where package name is mentioned. Below is the code of MainActivity.

Create a string array and populate it with country names

Create the instance of CountryAdapter class and bind it with GridView. I will explain CountryAdapter class later on. We will pass Country array to the constructor of CountryAdapter class.

This is simply an OnItemClickListener implementation. We will show a Toast on item click. Integer position holds the index position of the items in the GridView, therefore, We can get the selected country name. Toast will show the position and country name of selected item.

We will add new layout file name it gridview_layout.xml. It is the inner layout of GridView item. We will add an ImageView to display country image and a TextView to display country name.

gridview_layout.xml

Add a new java class file name it CountryAdapter. CountryAdapter extends the BaseAdapter class. The code of CountryAdapter class is given below.

CountryAdapter.java

First of all we will implement required methods inherited from BaseAdapter class.
CountryAdapter() is the constructor.
getCount() returns the number item in data set.
getView() method generates the item’s view. LayoutInflater takes inner xml layout and creates different View objects from its content for reuse. Here MyView is being reused by all grid items. If it is null then create new otherwise reuse the old one.

Getting country name from Name array and displaying it into TextView

GetDrawableIDByName() method takes country name and return the id of drawable stored in drawable folder as shown in below screenshot. You need to add the country flag images in this folder. Image name should be same as country name.

Run the application. Below is the screenshot of the emulator.

android gridview tutorial

Android GridView Tutorial – Video Demo

In this video, you can have a look at the overall project structure and run the application in the emulator.

I hope you will like this article. Dont forget to subscribe to our email list and get the new articles directly in your inbox. You can also connect with us on our Facebook page and Youtube channel.

Check Also

asynctask kotlin example

Kotlin AsyncTask Tutorial with Example

Here is an example of implementing AsyncTask in Kotlin. I will create an Android application …