Cara Membuat Dropdown Menu Pada Button di Android

Tutorial Cara Membuat Menu Dropdown Pada Button di Aplikasi Android

Halo semuanya. bagaimana kabar kalian hari ini? saya harap kalian baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial tentang bagaimana cara membuat dropdown menu pada button (tombol) di aplikasi android.

Button adalah widget yang paling sering digunakan untuk membuka aktivitas baru pada aplikasi. Tidak hanya untuk membuka aktivitas baru, widget ini juga bisa digunakan untuk keperluan seperti menampilkan menu lain yang terdapat pada aplikasi. Untuk membuat aplikasi terlihat rapi, maka kita harus membuat lokasi menu tersendiri.

Jadi, pada tutorial ini kalian akan belajar cara membuat button untuk menampilkan dropdown menu pada aplikasi android.

- Advertisement -

Tutorial Cara Menampilkan Menu Dropdown Pada Button di Android

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:Dropdown App
Company Name:androidrion.com
Package Name:com.androidrion.dropdownapp
Language:Java
Minimal SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml layout yang digunakan untuk projek ini:

  • activity_main.xml

Daftar file java activity yang digunakan dalam projek ini:

  • MainActivity.java

Daftar file xml menu yang digunakan dalam projek ini:

  • dropdown_menu.xml

Daftar file drawable yang digunakan dalam projek ini:

  • ic_keyboard_arrow_down.xml

Berikut adalah struktur projek aplikasi Dropdown App.

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Dropdown App.

Drawable File

Dalam projek ini, saya tambahkan ikon untuk membuktikan bahwa button akan menampilkan menu dropdown. Berikut ini adalah ikon yang digunakan.

Untuk mendapatkan ikon diatas, kalian bisa mengikuti tutorial pada link di bawah ini.

CARA MENAMBAHKAN IKON KE PROJEK ANDROID STUDIO

XML Layout File

Buka file activity_main.xml projek kalian. Tambahkan widget button dalam LinearLayout yang berorientasi vertical. Pada widget button, tambahkan atribut drawableRight lalu masukkan ikon arrow down yang sebelumnya telah kita tambahkan pada folder drawable. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?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"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableEnd="@drawable/ic_keyboard_arrow_down"
        android:drawableRight="@drawable/ic_keyboard_arrow_down"
        android:drawablePadding="8dp"
        android:text="Show dropdown Menu" />

</LinearLayout>

XML Menu File

Sebelum kita membuat menu xml, buatlah terlebih dahulu folder menu Android Resource Directory. Untuk membuat folder menu, kalian bisa mengikuti tutorial pada link di bawah ini.

CARA MEMBUAT FOLDER MENU DALAM PROJEK ANDROID STUDIO

Setelah kalian membuat folder menu dalam projek android studio kalian, buatlah file xml menu di dalamnya dengan cara klik kanan pada folder menu lalu pilih New>Menu resource file. Simpan file dengan nama dropdown_menu. Berikut ini adalah kode lengkap untuk file dropdown_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/dropdown_menu1"
        android:title="Menu 1"/>
    <item
        android:id="@+id/dropdown_menu2"
        android:title="Menu 2"/>
    <item
        android:id="@+id/dropdown_menu3"
        android:title="Menu 3"/>

    <item
        android:id="@+id/dropdown_menu4"
        android:title="Menu 4"/>

</menu>

Java Activity File

Buka MainActivity.java projek android studio kalian lalu tambahkan kode di bawah ini untuk menampilkan menu dropdown pada button di aplikasi android.

package com.androidrion.dropdownapp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.PopupMenu;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements MenuItem.OnMenuItemClickListener {

    Button button;

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

        button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                PopupMenu dropDownMenu = new PopupMenu(getApplicationContext(), button);
                dropDownMenu.getMenuInflater().inflate(R.menu.dropdown_menu, dropDownMenu.getMenu());
                dropDownMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {

                    @Override
                    public boolean onMenuItemClick(MenuItem menuItem) {
                        Toast.makeText(getApplicationContext(), "You have clicked " + menuItem.getTitle(), Toast.LENGTH_LONG).show();
                        return true;
                    }
                });
                dropDownMenu.show();
            }
        });
    }

    @Override
    public boolean onMenuItemClick(MenuItem item) {
        return false;
    }
}

Run ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian akan melihat button di tengah-tengah aplikasi dengan icon panah ke bawah di sebelah kanan. Ketika kalian menekan button tersebut, maka aplikasi akan menampilkan menu yang telah kalian buat dibawah button yang kalian tekan. Jika kode di atas tidak terjadi masalah, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat menu dropdown pada button di aplikasi android. Tutorial diatas tidak begitu sulit untuk dikerjakan karena kita hanya menggunakan satu buah widget untuk menjalankannya. Tutorial diatas sebenarnya masih bisa dikembangkan seperti membuat layout baru ketika memilih menu dropdown.

Jika kalian mengalami kendala saat melakukan tutorial diatas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini bermanfaat untuk kalian. Terima kasih.

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.