Membuat Menu Menggunakan DataGridView di Android

Tutorial berikut masih bagian dari tutorial sebelumnya tentang Android, yaitu membuat menu secara dinamis menggunakan ArrayList.

Pada tutorial kali ini berbeda dengan sebelumnya yang menggunakan ListView sebagai objek, pada tutorial kali ini akan menggunakan DataGridView sebagai menu yang akan di tampilkan secara grid layaknya menu utama pada HP Android kalian.

Tampilan menu yang akan dibuat seperti berikut ini:



[ads id="ads1"]

Langkah-Langkah Membuat Menu

Oke lanjut, untuk membuatnya kita membutuhkan beberapa objek/class yaitu GridMenuModel.java, GridMenuAdapter.java, dan beberapa drawable icon.

Di akhir tutorial, kalian bisa download source codenya.

Membuat Layout GridMenu.xml

Langkah pertama adalah membuat layout menu terlebih dahulu, layout ini berfungsi sebagai interface/tampilan menu yang akan dibuat.

Kode berikut adalah contoh layout yang akan digunakan.

Simpan dengan nama gridmenu.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridview_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="5dp">

    <ImageView
        android:id="@+id/gridImage"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:layout_marginTop="15dp"
        android:src="@drawable/receipt" />

    <TextView
        android:id="@+id/gridTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="10dp"
        android:text="Title"
        android:textColor="@color/cardview_dark_background"
        android:textSize="12sp" />
</LinearLayout>

Pada layout diatas, ada beberapa icon vector drawable yang disertakan didalam source code. Untuk membuatnya, kalian bisa baca tutorialnya di Cara Membuat Drawable Vektor Android Studio.

Membuat Class GridMenuModel.java

Digunakan sebagai Model dari menu yang akan dibuat nantinya. Class GridMenuModel terdiri dari object ImageView, dan object TextView.

ImageView berfungsi sebagai penampil Icon, dan TextView berfungsi sebagai penampil Title/Judul.

Kode selengkapnya berikut ini. Simpan dengan nama GridMenuModel.java.

public class GridMenuModel {
    String Title ;
    int Icon;

    public GridMenuModel(String Title, int Icon){
        this.Title = Title;
        this.Icon = Icon;
    }

    public String getTitle(){
        return this.Title;
    }

    public int getIcon(){
        return this.Icon;
    }
}

Membuat Class GridMenuAdapter.java

Class ini berfungsi sebagai adapter yang digunakan oleh DataGridView.

public class GridMenuAdapter extends ArrayAdapter<GridMenuModel> {
    private ArrayList<GridMenuModel> dataSet;
    private Context mContext;
    
    public static class ViewHolder {
        public TextView txtTitle;
        public ImageView imgIcon;
    }

    public GridMenuAdapter(Context context, ArrayList<GridMenuModel> data) {
        super(context, -1, data);
        this.dataSet = data;
        this.mContext=context;

    }

    private int lastPosition = -1;

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        final GridMenuModel dataModel = getItem(position);
        final ViewHolder viewHolder; // view lookup cache stored in tag
        final LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        viewHolder = new ViewHolder();
        convertView = inflater.inflate(R.layout.gridmenu, parent, false);
        viewHolder.txtTitle = (TextView) convertView.findViewById(R.id.gridTitle);
        viewHolder.imgIcon = (ImageView) convertView.findViewById(R.id.gridImage);
        convertView.setTag(viewHolder);

        lastPosition = position;
        viewHolder.txtTitle.setText(dataModel.getTitle());
        viewHolder.imgIcon.setImageResource(dataModel.getIcon());
        return convertView;
    }
}

[ads id="ads2"]

Penggunaan Pada Activity

Langkah selanjutnya adalah mengimplementasikan object yang sudah kita buat diatas kedalam layout yang kita inginkan. Caranya dengan menambahkan object DataGridView kedalam layout lalu berikan id dengan nama gridMenu misalnya.

Lalu pada Activity dimana kita menambahkan object DataGridView, buatlah ArrayList sebagai item menu yang akan digunakan pada DataGridView.

Lalu selanjutnya data ArrayList diset kedalam adapter GridMenuAdapter.

Berikut contoh penggunaan pada Activity

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final GridView gridMenuView = (GridView) findViewById(R.id.gridMenu);
        final ArrayList<GridMenuModel> gridMenu = new ArrayList<>();
        gridMenu.add(new GridMenuModel("Menu 1", R.drawable.info_circle));
        gridMenu.add(new GridMenuModel("Menu 2", R.drawable.key));
        gridMenu.add(new GridMenuModel("Menu 3", R.drawable.luggage_cart));
        gridMenu.add(new GridMenuModel("Menu 4", R.drawable.minus_circle));
        gridMenu.add(new GridMenuModel("Menu 5", R.drawable.pallet));
        gridMenu.add(new GridMenuModel("Menu 6", R.drawable.receipt));
        gridMenu.add(new GridMenuModel("Menu 7", R.drawable.receive));
        gridMenu.add(new GridMenuModel("Menu 8", R.drawable.recycle));
        gridMenu.add(new GridMenuModel("Menu 9", R.drawable.return_truck));
        gridMenu.add(new GridMenuModel("Menu 10", R.drawable.sign_out_alt));
        gridMenu.add(new GridMenuModel("Menu 11", R.drawable.stock));
        gridMenu.add(new GridMenuModel("Menu 12", R.drawable.term));
        gridMenu.add(new GridMenuModel("Menu 13", R.drawable.truck));
        gridMenu.add(new GridMenuModel("Menu 14", R.drawable.user_circle));

        final GridMenuAdapter adapter = new GridMenuAdapter(getApplicationContext(), gridMenu);
        gridMenuView.setAdapter(adapter);
        gridMenuView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                GridMenuModel dataModel= gridMenu.get(position);
                Snackbar.make(view, dataModel.getTitle() +" Pos:" + position, Snackbar.LENGTH_SHORT)
                        .setAction("No action", null).show();
            }
        });

    }
}

Selesai. Silahkan customize menu yang ada sesuai imajinasi kalian.

Source Code : Membuat Menu Menggunakan DataGridView di Android

Membuat Menu di Android Studio Belajar Android