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

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

MainActivity
LangListAdapter

Langauge(Model).
Activity_main.xml
Layout_adapter.xml

Header.xml
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.

package com.w3adda.listviewwithkot


class Langauge {
varname: String = ""
varimg_icon: Int = 0


}

package com.w3adda.listviewwithkot

class Langauge {

varname: String = ""

varimg_icon: Int = 0

}

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.

package com.w3adda.listviewwithkot

import android.app.Activity
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.ImageView
import android.widget.TextView

data class LangListAdapter(varlangaugeList:List<Langauge>, varactivity: Activity) : BaseAdapter(){

override fun getItem(position: Int): Any {
return langaugeList.get(position)
    }

override fun getItemId(position: Int): Long {
return position.toLong()
    }

override fun getCount(): Int {
return langaugeList.size
}

override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
valview: View = View.inflate(activity,R.layout.layout_adapter,null)

valtv_num = view.findViewById<TextView>(R.id.tv_number) as TextView
valtv_lang = view.findViewById<TextView>(R.id.tv_lang) as TextView
valimg_lang=view.findViewById<ImageView>(R.id.im_lang)


tv_num.text= (position+1).toString()+"."
tv_lang.text= langaugeList.get(position).name
vallang_pic=langaugeList.get(position).img_icon
//img_lang.drawable =langaugeList.get(position).img_icon
img_lang.setImageResource(lang_pic)



return view
    }

}

package com.w3adda.listviewwithkot

import android.app.Activity

import android.view.View

import android.view.ViewGroup

import android.widget.BaseAdapter

import android.widget.ImageView

import android.widget.TextView

data class LangListAdapter(varlangaugeList:List<Langauge>, varactivity: Activity) : BaseAdapter(){

override fun getItem(position: Int): Any {

return langaugeList.get(position)

}

override fun getItemId(position: Int): Long {

return position.toLong()

}

override fun getCount(): Int {

return langaugeList.size

}

override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

valview: View = View.inflate(activity,R.layout.layout_adapter,null)

valtv_num = view.findViewById<TextView>(R.id.tv_number) as TextView

valtv_lang = view.findViewById<TextView>(R.id.tv_lang) as TextView

valimg_lang=view.findViewById<ImageView>(R.id.im_lang)

tv_num.text= (position+1).toString()+"."

tv_lang.text= langaugeList.get(position).name

vallang_pic=langaugeList.get(position).img_icon

//img_lang.drawable =langaugeList.get(position).img_icon

img_lang.setImageResource(lang_pic)

return view

}

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

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/border_layout"
android:layout_margin="10dp"
android:orientation="horizontal">

<TextView
android:id="@+id/tv_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/im_lang"
android:layout_marginTop="38dp"
android:layout_marginLeft="5dp"
android:layout_marginBottom="5dp"
android:text="1."
android:gravity="end|top"
android:textColor="@color/colorText"
android:textSize="18sp" />


<TextView
android:id="@+id/tv_lang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kotlin"


android:layout_below="@+id/im_lang"
android:layout_alignLeft="@+id/im_lang"
android:layout_marginLeft="10dp"
android:textColor="@color/colorText"
android:textSize="18sp" />


<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="@+id/im_lang"
android:layout_toRightOf="@+id/tv_number"
android:layout_margin="20dp"
/>


</RelativeLayout>

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/border_layout"

android:layout_margin="10dp"

android:orientation="horizontal">

<TextView

android:id="@+id/tv_number"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignTop="@+id/im_lang"

android:layout_marginTop="38dp"

android:layout_marginLeft="5dp"

android:layout_marginBottom="5dp"

android:text="1."

android:gravity="end|top"

android:textColor="@color/colorText"

android:textSize="18sp" />

<TextView

android:id="@+id/tv_lang"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Kotlin"

android:layout_below="@+id/im_lang"

android:layout_alignLeft="@+id/im_lang"

android:layout_marginLeft="10dp"

android:textColor="@color/colorText"

android:textSize="18sp" />

<ImageView

android:layout_width="80dp"

android:layout_height="80dp"

android:id="@+id/im_lang"

android:layout_toRightOf="@+id/tv_number"

android:layout_margin="20dp"

</RelativeLayout>

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

package com.w3adda.listviewwithkot

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.GridView


class MainActivity : AppCompatActivity() {

varlist_lang: GridView? = null
varlangaugeList: ArrayList<Langauge> = ArrayList<Langauge>()
varadapter: LangListAdapter? = null

    override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

list_lang= findViewById<GridView>(R.id.list_lang) as GridView
addLangData()
adapter = LangListAdapter(langaugeList, this)
list_lang?.adapter = adapter
}

private fun addLangData() {
vallang1 = Langauge()
        lang1.name = "Android"
lang1.img_icon=R.drawable.android
langaugeList.add(lang1)

vallang2 = Langauge()
        lang2.name = "Kotlin"
lang2.img_icon=R.drawable.kotlin
langaugeList.add(lang2)

vallang3 = Langauge()
        lang3.name = "Java"
lang3.img_icon=R.drawable.java
langaugeList.add(lang3)

vallang4 = Langauge()
        lang4.name = "Python"
lang4.img_icon=R.drawable.python
langaugeList.add(lang4)

vallang5 = Langauge()
        lang5.name = "PHP"
lang5.img_icon=R.drawable.php
langaugeList.add(lang5)

vallang6 = Langauge()
        lang6.name = "React"
lang6.img_icon=R.drawable.react
langaugeList.add(lang6)

vallang7 = Langauge()
        lang7.name = "HTML"
lang7.img_icon=R.drawable.html
langaugeList.add(lang7)

vallang8 = Langauge()
        lang8.name = "MySql"
lang8.img_icon=R.drawable.mysql
langaugeList.add(lang8)


vallang9 = Langauge()
lang9.name = "Laravel"
lang9.img_icon=R.drawable.laravel
langaugeList.add(lang9)
    }
}

package com.w3adda.listviewwithkot

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

import android.widget.GridView

class MainActivity : AppCompatActivity() {

varlist_lang: GridView? = null

varlangaugeList: ArrayList<Langauge> = ArrayList<Langauge>()

varadapter: LangListAdapter? = null

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

list_lang= findViewById<GridView>(R.id.list_lang) as GridView

addLangData()

adapter = LangListAdapter(langaugeList, this)

list_lang?.adapter = adapter

}

private fun addLangData() {

vallang1 = Langauge()

lang1.name = "Android"

lang1.img_icon=R.drawable.android

langaugeList.add(lang1)

vallang2 = Langauge()

lang2.name = "Kotlin"

lang2.img_icon=R.drawable.kotlin

langaugeList.add(lang2)

vallang3 = Langauge()

lang3.name = "Java"

lang3.img_icon=R.drawable.java

langaugeList.add(lang3)

vallang4 = Langauge()

lang4.name = "Python"

lang4.img_icon=R.drawable.python

langaugeList.add(lang4)

vallang5 = Langauge()

lang5.name = "PHP"

lang5.img_icon=R.drawable.php

langaugeList.add(lang5)

vallang6 = Langauge()

lang6.name = "React"

lang6.img_icon=R.drawable.react

langaugeList.add(lang6)

vallang7 = Langauge()

lang7.name = "HTML"

lang7.img_icon=R.drawable.html

langaugeList.add(lang7)

vallang8 = Langauge()

lang8.name = "MySql"

lang8.img_icon=R.drawable.mysql

langaugeList.add(lang8)

vallang9 = Langauge()

lang9.name = "Laravel"

lang9.img_icon=R.drawable.laravel

langaugeList.add(lang9)

}

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
tools:context="com.w3adda.listviewwithkot.MainActivity">
<include layout="@layout/header"
android:id="@+id/header"/>

<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/list_lang"
android:layout_below="@+id/header"
android:padding="5dp"
android:numColumns="2"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:divider="@color/colorDivider"
android:dividerHeight="1dp"/>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#fff"

tools:context="com.w3adda.listviewwithkot.MainActivity">

<include layout="@layout/header"

android:id="@+id/header"/>

<GridView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/list_lang"

android:layout_below="@+id/header"

android:padding="5dp"

android:numColumns="2"

android:verticalSpacing="10dp"

android:horizontalSpacing="10dp"

android:stretchMode="columnWidth"

android:gravity="center"

android:divider="@color/colorDivider"

android:dividerHeight="1dp"/>

</RelativeLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@color/header"
android:layout_height="50dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:text="W3Adda ListView"
android:textSize="18sp"
android:textStyle="bold"
/>



</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:background="@color/header"

android:layout_height="50dp">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="12dp"

android:text="W3Adda ListView"

android:textSize="18sp"

android:textStyle="bold"

</RelativeLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
>
<shape>
<solid
android:color="@android:color/transparent"
>

</solid>

<corners android:radius="3dp" />

<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<stroke
android:width="1dp"
android:color="#ca640b"/>
</shape>


</item>
</selector>

<?xml version="1.0" encoding="utf-8"?>

<item

<shape>

<solid

android:color="@android:color/transparent"

</solid>

<padding

android:bottom="1dp"

android:left="1dp"

android:right="1dp"

android:top="1dp" />

<stroke

android:width="1dp"

android:color="#ca640b"/>

</shape>

</item>

</selector>

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.

More Kotlin Android Tutorial

Learn

ABOUT PAGES

Laravel 9 Livewire Pagination with Search

Laravel 9 Livewire Pagination Example

Laravel 9 Check User Login, Online Status & Last Seen

codeigniter 4 image upload example tutorial

Laravel 9 Livewire Charts Example

Laravel 9 Livewire Crud Example

Laravel 9 Livewire Multiple Image Upload

Laravel 9 Livewire Image Upload

Laravel 9 Livewire Submit Form

Laravel 9 Simple CRUD Application Example