Sun. Aug 7th, 2022

pada materi ini membahas tentang membuat layout Gridview pada Kotlin Android dengan BaseAdapter. adapun langkahnya buat terlebih dahulu desain layout main GridView (main_grid.xml). layout seperti gambar di bawah ini.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <GridView
        android:id="@+id/gvmenu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnWidth="130dp"
        android:horizontalSpacing="13dp"
        android:numColumns="auto_fit"
        android:verticalSpacing="13dp" />

</LinearLayout>

kemudian buat layout konten grid misal terdiri dari gambar dan textview dapat dilihat pada gambar.

(menu.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:background="#ddd"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="15dp">

    <ImageView
        android:id="@+id/imgmenu"
        android:layout_width="130dp"
        android:layout_height="120dp"
        app:srcCompat="@drawable/riki" />

    <TextView
        android:id="@+id/tvmenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Menu"
        android:textSize="20sp" />
</LinearLayout>

Buatlah konstruktor Menu (Menu.kt) yang melakukat set Text dan Gambar

package a.riki.cobahello

class Menu{
    var name: String? = null
    var image: Int? = null

    constructor(name: String, image: Int) {
        this.name = name
        this.image = image
    }
}

Kemudian coding MainActivity. codenya menghubungkan dengan BaseAdapter untuk memasukkan nama-nama menu dan gambar pada ArrayList.

package a.riki.cobahello

import android.content.Context
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import kotlinx.android.synthetic.main.main_grid.*
import kotlinx.android.synthetic.main.menu.view.*

class MainActivity : AppCompatActivity() {

    var adapter: MenuAdapter? = null
    var menusList = ArrayList<Menu>()

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

        // list menu
        menusList.add(Menu("Riki", R.drawable.riki))
        menusList.add(Menu("Kotlin", R.drawable.kotlin))
        menusList.add(Menu("Java", R.drawable.java))
        menusList.add(Menu("Flutter",R.drawable.flutter))
        menusList.add(Menu("C++", R.drawable.cplusplus))
        menusList.add(Menu("Android", R.drawable.ic_launcher_background))
        adapter = MenuAdapter(this, menusList)

        gvmenu.adapter = adapter
    }

    class MenuAdapter : BaseAdapter {
        var menusList = ArrayList<Menu>()
        var context: Context? = null

        constructor(context: Context, menusList: ArrayList<Menu>) : super() {
            this.context = context
            this.menusList = menusList
        }

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

        override fun getItem(position: Int): Any {
            return menusList[position]
        }

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

        override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
            val menu = this.menusList[position]

            var inflator = context!!.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
            var menuView = inflator.inflate(R.layout.menu, null)
            menuView.imgmenu.setImageResource(menu.image!!)
            menuView.tvmenu.text = menu.name!!

            return menuView
        }
    }
}

Outputnya sebagai berikut: