Mudah Membuat Gridview Di Android Studio Menggunakan Kotlin

 

 

Pada kesempatan kali ini aku mau coba share tutorial untuk membuat Gridview di android studio menggunakan bahasa kotlin.

Oke, langsung aja ke pembahasan.

Pertama kalian silahkan Create new project dan sync

Setelah proses sync selesai. 

ke folder res > layout > activity_main.xml    

Untuk codingnya sebagai berikut :

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

<RelativeLayout
xmlns: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:orientation="vertical"
tools:context=".MainActivity">

<GridView
   
android:id="@+id/gvListMakanan"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"
   
android:layout_marginTop="10dp"
    android:horizontalSpacing="5pt"
   
android:verticalSpacing="5pt"
   
android:columnWidth="65pt"
   
android:numColumns="auto_fit"
   
tools:layout_editor_absoluteX = "8dp"
   
tools:layout_editor_absoluteY = "8dp">
</GridView>


</RelativeLayout>

Selanjutnya klik kanan di folder layout > new > layout resource file > beri nama item_makanan

Untuk codingannya sebagai berikut :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
       
android:background="#ffffff"
       
android:padding="3pt"
       
android:orientation="vertical"
       
android:layout_width="match_parent"
       
android:layout_height="match_parent">

        <LinearLayout
               
android:gravity="center"
               
android:background="@drawable/background_makanan"
               
android:orientation="vertical"
               
android:layout_width="match_parent"
               
android:layout_height="match_parent">
   
                <ImageView
                       
android:id="@+id/ivGambarMakanan"
                       
android:layout_width="50pt"
                       
android:layout_height="50pt"
                       
android:src="@drawable/bakso"/>

                <TextView
                       
android:id="@+id/tvNamaMakanan"
                       
android:text="Bakso"
                       
android:textSize="20sp"
                       
android:textColor="#000000"
                       
android:gravity="center"
                       
android:layout_width="match_parent"
                       
android:layout_height="wrap_content"/>

        </LinearLayout>
</LinearLayout>

Selanjutnya klik kanan lagi di folder layout > new > layout resource file > beri nama activity_detail_makanan

Untuk codingannya sebagai berikut :

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".DetailMakanan">

<ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:id="@+id/ivGambar"
        android:src="@drawable/bakso"
        android:layout_gravity="center"/>

    <TextView
        android:id="@+id/tvNama"
        android:text="Nama Makanan"
        android:textSize="25sp"
        android:textColor="@color/colorPrimary"
        android:textStyle="bold"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/tvDeskripsi"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="20dp"
        android:text="Deksripsi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

Selanjutnya klik kanan lagi di folder drawable > new > drawable resource file > beri nama background_makanan

Untuk codingannya sebagai berikut :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#fff"/>
            <corners android:radius="3pt"/>
            <padding android:bottom="3dp"
                     android:left="3dp"
                     android:right="3dp"
                     android:top="3dp"/>
        </shape>
    </item>
</selector>

Jangan lupa masukkan gambar makanan kalian ke folder drawable. Caranya kalian cari gambar makanan di dalam folder komputer / laptop kalian lalu drag ke folder drawable (copy gambar dan paste di drawable).

Baik, setelah selesai sekarang kita beralih ke folder Class Activity kita. Silahkan kalian klik file MainActivity.kt

Lalu input codingan kalian seperti ini :

package com.erwin.tugaskotlin2

import android.content.Context
import android.content.Intent
import androidx.appcompat.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.activity_main.*
import kotlinx.android.synthetic.main.item_makanan.view.*

class MainActivity : AppCompatActivity() {

    val listMakanan = ArrayList<Makanan>()
    var adapter : AdapterMakanan? = null

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

        listMakanan.add (Makanan( "Bakso", "Bakso adalah Makanan Indonesia", R.drawable.bakso))
        listMakanan.add (Makanan( "Jengkol", "Jengkol Makanan Yang Membuat Nafas Bau", R.drawable.jenkol))
        listMakanan.add (Makanan( "Mie Ayam", "Mie ayam adalah makanan yang buat gemuk", R.drawable.mie_ayam))
        listMakanan.add (Makanan( "Pizza", "Pizza adalah makanan yang buat sakit perut", R.drawable.pizza))
        listMakanan.add (Makanan( "Risol", "Risol Adalah makanan jenis gorengan", R.drawable.risoles))
        listMakanan.add (Makanan( "Sushi", "Sushi adalah makanan mentah khas negeri sakura", R.drawable.sushi))

        adapter = AdapterMakanan(this, listMakanan)
        gvListMakanan.adapter = adapter

        }

    inner class AdapterMakanan: BaseAdapter{
        var listMakanan = ArrayList<Makanan>()
        var context:Context? = null
        constructor(context: Context, listOfFood: ArrayList<Makanan>):super(){
            this.context = context
            this.listMakanan= listOfFood
        }

        override fun getView(p0: Int, pl: View?, p2: ViewGroup?): View {
            val makanan = this.listMakanan[p0]
            var inflator = context!!.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
            var foodView = inflator.inflate(R.layout.item_makanan, null)
            foodView.ivGambarMakanan.setImageResource(makanan.gambar!!)
            foodView.ivGambarMakanan.setOnClickListener {

                val intent = Intent (context, DetailMakanan::class.java)
                intent.putExtra("nama", makanan.nama!!)
                intent.putExtra("deskripsi", makanan.deskripsi!!)
                intent.putExtra("gambar", makanan.gambar!!)
                context!!.startActivity(intent)
            }
            foodView.tvNamaMakanan.text = makanan.nama!!
            return foodView
        }

        override fun getItem(p0: Int): Any {
            return listMakanan[p0]
        }

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

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

Jika sudah sekarang buat Class baru. Caranya klik kanan di package > new > kotlin file/class > Makanan

Untuk bentuk codingannya seperti ini :

package com.erwin.tugaskotlin2

class Makanan {
    var nama:String? = null
    var deskripsi:String? = null
    var gambar:Int?= null

    constructor(nama:String, deskripsi:String, gambar:Int) {
        this.nama=nama
        this.deskripsi=deskripsi
        this.gambar=gambar
    }
}

Lanjut tambahkan juga Class baru dengan nama DetailMakanan

Untuk bentuk codingannya seperti ini :

package com.erwin.tugaskotlin2

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.core.os.bundleOf
import kotlinx.android.synthetic.main.activity_detail_makanan.*
import kotlinx.android.synthetic.main.item_makanan.*

class DetailMakanan : AppCompatActivity() {

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

        val bundle=intent.extras

        ivGambar.setImageResource(bundle!!.getInt("gambar"))
        tvNama.text = bundle.getString("nama")
        tvDeskripsi.text = bundle.getString("deskripsi")
    }
}

Oke terakhir cek file AndroidManifest.xml kalian. Apakah sudah sesuai kah seperti ini : 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.erwin.tugaskotlin2">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".DetailMakanan"></activity>
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Jika sudah silahkan kalian coba test running hasil codingan kalian. Apakah berhasil atau masih error. Apabila temen temen butuh file mentahnya silahkan download disini.


Semoga bermanfaat ya buat temen-temen, kalian juga boleh kok buat ngembangin lagi sehingga Mudah Membuat Gridview Di Android Studio Menggunakan Kotlin ini akan semakin menjadi lebih baik. Jika temen-temen memiliki saran tentang apa yang harus diperbaiki dalam proses semacam ini, beri tahu aku di komentar di bawah. Juga, jika kalian menyukai jenis konten dari aku, beri tahu di komentar sehingga nantinya dapat membuat lebih banyak di waktu mendatang! 

Baca juga

Posting Komentar