Tutorial Xamarin Android : Membuat Grid View dengan Image dan Text

Pada sore yang cerah ini saya akan memberikan tutorial mengimplementasikan GridView pada Xamarin Android. Nah pada study kasusnya biasanya saya gunakan untuk membuat menu yang banyak dalam bentuk Grid. Dari pada mengandalkan GridLayout lebih baik menggunakan gridview.

Untuk menggunakannya kita memerlukan beberapa point sebagai berikut :

1. GridLayout.axml adalah sebuah tampilan custom untuk menampilkan Image dan text.
2. Kategori.axml adalah tempat kita memasang GridView yang nantinya akan diisi oleh GridLayout.
3. GridModel.cs adalah sebuah class untuk menampung variable grid.
3. GridAdapter.cs yang include didalamnya sebuah Class View Holder.
4. KategoriActivity.cs untuk menampilkan GridView.
5. Masukan gambar pada folder drawable

Sekarang kita membuat terlebih dahulu Layout yang dibutuhkan. Oh iya pastikan AppCompat dan SupportDesign sudah terinstal pada Package anda.

GridLayout.axml

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

        <ImageView
            android:id="@+id/Images"
            android:src="@drawable/bayi"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:scaleType="fitCenter" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="Name"
                android:id="@+id/Names"
                android:padding="10dp"
                android:textColor="#ff525252"
                android:gravity="center" />
          
</LinearLayout>

KategroiLayout.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffffff">
    <include
        layout="@layout/app_bar" />
    <GridView
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/lv"
        android:numColumns="4"/>
</LinearLayout>

Membuat tambahan app_bar.axml layout untuk toolbar

app_bar.axml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="#0267C1"
    app:itemIconTint="@android:color/white"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Selanjutnya kita buat sebuah Model

GridModel.cs

using System;
namespace diskonfinder
{
    public class GridModel
    {
        

        private String name;
        private int image;

        public GridModel(string name, int image)
        {
            this.name = name;
            this.image = image;
        }

        public string Name
        {
            get { return name; }
        }

        public int Image
        {
            get { return image; }
        }
    }
}

Tampung dalam Adapter

GridAdapter.cs

using System;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Object = Java.Lang.Object;

namespace diskonfinder
{
    class GridAdapter : BaseAdapter
    {
        private readonly Context c;
        private readonly JavaList<GridModel> menugrid;
        private LayoutInflater inflater;

        /*
         * CONSTRUCTOR
         */
        public GridAdapter(Context c, JavaList<GridModel> menugrid)
        {
            this.c = c;
            this.menugrid = menugrid;
        }

        /*
         * RETURN SPACECRAFT
         */
        public override Object GetItem(int position)
        {
            return menugrid.Get(position);
        }

        /*
         * SPACECRAFT ID
         */
        public override long GetItemId(int position)
        {
            return position;
        }

        /*
         * RETURN INFLATED VIEW
         */
        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            //INITIALIZE INFLATER
            if (inflater == null)
            {
                inflater = (LayoutInflater)c.GetSystemService(Context.LayoutInflaterService);
            }

            //INFLATE OUR MODEL LAYOUT
            if (convertView == null)
            {
                convertView = inflater.Inflate(Resource.Layout.GridLayout, parent, false);
            }

            //BIND DATA
            CustomAdapterViewHolder holder = new CustomAdapterViewHolder(convertView)
            {
                NameTxt = { Text = menugrid[position].Name }
            };
            holder.Img.SetImageResource(menugrid[position].Image);

            //convertView.SetBackgroundColor(Color.LightBlue);

            return convertView;
        }

        /*
         * TOTAL NUM OF SPACECRAFTS
         */
        public override int Count
        {
            get { return menugrid.Size(); }
        }
    }

    class CustomAdapterViewHolder : Java.Lang.Object
    {
        //adapter views to re-use
        public TextView NameTxt;
        public ImageView Img;

        public CustomAdapterViewHolder(View itemView)
        {
            NameTxt = itemView.FindViewById<TextView>(Resource.Id.Names);
            Img = itemView.FindViewById<ImageView>(Resource.Id.Images);

        }
    }
}

Jalankan Pada Activity

KategoriActivity.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Support.V7.App;
using Android.Views;
using Android.Widget;

namespace diskonfinder
{
    [Activity(Label = "Kategori Diskon",Theme = "@style/MyThemes", ParentActivity = typeof(MainActivity))]
    public class KategoriActivity : AppCompatActivity
    {
        private GridView gv;
        private GridAdapter adapter;
        private JavaList<GridModel> menugrid;


        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.KategoriLayout);

            var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.app_bar);
            SetSupportActionBar(toolbar);
            SupportActionBar.SetDisplayHomeAsUpEnabled(true);

            gv = FindViewById<GridView>(Resource.Id.lv);


            //BIND ADAPTER
            adapter = new GridAdapter(this, GetGridMenu());

            gv.Adapter = adapter;

            gv.ItemClick += gv_ItemClick;

            // Create your application here
        }

        private void gv_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
        {
            Toast.MakeText(this, menugrid[e.Position].Name, ToastLength.Short).Show();
        }

        private JavaList<GridModel> GetGridMenu()
        {
            menugrid = new JavaList<GridModel>();

            GridModel s;

            s = new GridModel("Bayi dan Anak", Resource.Drawable.bayi);
            menugrid.Add(s);

            s = new GridModel("Belanja", Resource.Drawable.belanja);
            menugrid.Add(s);

            s = new GridModel("Fashion", Resource.Drawable.fashion);
            menugrid.Add(s);

            s = new GridModel("Kuliner", Resource.Drawable.kuliner);
            menugrid.Add(s);

            s = new GridModel("Kesehatan", Resource.Drawable.kesehatan);
            menugrid.Add(s);

            s = new GridModel("Hiburan", Resource.Drawable.hiburan);
            menugrid.Add(s);

            s = new GridModel("Pendidikan", Resource.Drawable.pendidikan);
            menugrid.Add(s);

            s = new GridModel("Travel", Resource.Drawable.travel);
            menugrid.Add(s);

            s = new GridModel("Kuliner", Resource.Drawable.kuliner);
            menugrid.Add(s);

            s = new GridModel("Cafe", Resource.Drawable.cafe);
            menugrid.Add(s);

            s = new GridModel("Musik", Resource.Drawable.musik);
            menugrid.Add(s);

            s = new GridModel("Otomotif", Resource.Drawable.otomotif);
            menugrid.Add(s);


            s = new GridModel("Elektronik", Resource.Drawable.elektronik);
            menugrid.Add(s);


            s = new GridModel("Olahraga", Resource.Drawable.olahraga);
            menugrid.Add(s);

            s = new GridModel("Hotel", Resource.Drawable.hotel);
            menugrid.Add(s);

            s = new GridModel("Jasa", Resource.Drawable.services);
            menugrid.Add(s);

            return menugrid;
        }

        public override void OnBackPressed()
        {
            base.OnBackPressed();
        }
    }
}

Oh iya kelupaan kita buat sebuah styles

Styles.xml

<?xml version="1.0" encoding="utf-8" ?> 
<resources>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
  </style>
 
  <style name="MyTheme" parent="MyTheme.Base">
  </style>
 
  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splashscreen</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
  </style>


    <style name="MyTheme.Bases" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="windowNoTitle">true</item>
     <item name="windowActionBar">true</item>
      <item name="colorControlNormal">#0C92CF</item>
     <item name="colorPrimary">#2196F3</item>
     <item name="colorPrimaryDark">#1976D2</item>
     <item name="colorAccent">#0C92CF</item> 
   </style>     
   <style name="MyThemes" parent="MyTheme.Bases">
   </style>
    
</resources>

Nah, kode diatas adalah beberapa hal yang dibutuhkan untuk membuat GridView pada Xamarin Android.


Salam

Ipung Purwono