Kotlin GridView

In this tutorial you will learn about the Kotlin GridView and its application with practical example.

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.

Table Of Contents

Lets understand it by an example , Create GridView in Xml Layout like below code

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_fitmeans 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.

Example: With the help of below example we will get understand about GridView with Kotlin. There are some classes and xml which is used in Grid View are listed below.

  1. MainActivity
  2. LangListAdapter
  3. Langauge(Model).
  4. Activity_main.xml
  5. Layout_adapter.xml
  6. Header.xml
  7. border_layout.xml

Let’s get understand each class one by one.


#Langauge(Model): In Kotlin we do not need to write getter and setter method in model. It is very simple to create model in Kotlin support. Just check below model, you will get understand what I am trying to say.

so it is pretty simple to create model just need to declare our variable.


#LangListAdapter:Below is the Adapter Code, code is reduced by Kotlin and it is very easy to get understand, methods are same as we already discussed in BaseAdapter in Android Article. So Let’s write code of it. Here It extends Base Adapter which is clearly explained in Android Tutorial. 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.

# layout_adapter.xml : The below layout is associated with Above adapter class. Just check it.

#MainActivity:Now it is time to finish our last stage that is Activity which is associated with Model and Adapter. We have added data from here. The adding process is about same Like we used to use before, but some changes are there, Kotlin also reduced code here and did simple work for us. Checkout below code.

#activity_main.xml:The Associated XML file with Above activity is below you can simply use it.

#Header.xml: The Header file which I have used in activity_main.xml is below, you can modified it according to you.

#border_layout.xml: Here I have used border layout for creation border of GridView’s item. Press right click of mouse on drawable and make drawable resource file like below image,


And paste this code in your resource file.

Run:We are all set from coding part. Soits time to run this project on your device or Emulator. I have used Emulator. The result of above project will look like below image.


In this tutorial we have learn about the Kotlin GridView and its application with practical example. I hope you will like this tutorial.