Android Menu


Menu in Android is one the best way of displaying multiple options a user can select from. It's a house (I'd like to say) that houses list of options that a user can choose from.
 There are three types of menu in Android —options menu, pop-up menu and context menu. They're all menus but they serve different purposes.
To create a menu in Android, you'll need to create a menu directory (if it does not exist in the res folder).

Right click on the res directory, click new > Android resource directory > Resource type > OK.
Create menu directory

Create a menu.xml file in the menu directory you created.

Right click on the menu directory, click new > menu resources file > Enter any name > OK.
Create a menu.xml file


Options Menu

You're familiar with this, it's the three dots on the top right corner of your App — default options menu. When it's clicked on, it becomes inflated showing the items it houses.










Screenshot of Options Menu  Example
Let's create options menu
After creating your menu directory and menu.xml, populate your menu.xml with data.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/about"
        android:title="About"
        app:showAsAction="never" />

    <item
        android:id="@+id/help"
        android:title="Help"
        app:showAsAction="never" />
   
 <item
        android:id="@+id/contact"
        android:title="Contact"
        app:showAsAction="never" />
</menu>

Implement it in your MainActivity.java file.

@Override
    public boolean onCreateOptionsMenu(Menu menu) {;
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.main_menu, menu);
        return true;
    }



    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch(item.getItemId()){
            case R.id.about:
                //Do something like launch a new activity
                return true;

            case R.id.help:
                //Do something like launch a new activity
                return true;

            case R.id.contact:
                //Do something like launch a new activity
                return true;

        default:
        return super.onOptionsItemSelected(item);
    }
}


Pop-up menu

As the name implies, it's a menu that pop-ups when clicked on. You should create an anchor view i.e. a TextView or Button that can be clicked on to display the menu items.








Screenshot of Pop-up Menu  Example


After creating your menu directory and menu.xml, populate your menu.xml with data.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/about"
        android:title="About"
        app:showAsAction="never" />

    <item
        android:id="@+id/help"
        android:title="Help"
        app:showAsAction="never" />

    <item
        android:id="@+id/contact"
        android:title="Contact"
        app:showAsAction="never" />
</menu>

Create a TextView or a Button in your activity_main.xml

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/more"
    android:layout_marginTop="50dp"
    android:text="Pop-up Menu Example"
    android:fontFamily="cursive"
    android:textSize="40dp"  />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="Other options"
    android:textSize="20dp"
    android:textStyle="bold"
    android:id="@+id/others"
    android:onClick="moreOptions"/>
 
Implement it in your MainActivity.java

public void moreOptions(View view) {
    PopupMenu pop = new PopupMenu(this, view);
    pop.getMenuInflater().inflate(R.menu.main_menu, pop.getMenu());
    pop.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {

        @Override
        public boolean onMenuItemClick(MenuItem item) {
            switch (item.getItemId()) {

                case R.id.about:
                    //Do something like launch a new activity
                    return true;

                case R.id.help:
                    //Do something like launch a new activity
                    return true;

                case R.id.contact:
                    //Do something like launch a new activity
                    return true;

                default:
                    return false;

            }
        }
    });
    pop.show();
}


Context menu

Context menu is also referred to as floating menu. Unlike options menu and pop-up menu, a user must long click on a view to get context menu.




Screenshot of Context Menu  Example
Create a TextView to anchor the Context menu in your activity_main.xml

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/more"
    android:layout_marginTop="50dp"
    android:text="Context Menu Example"
    android:fontFamily="cursive"
    android:textSize="40dp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="Other options"
    android:textSize="20dp"
    android:textStyle="bold"
    android:id="@+id/others"
    android:onClick="moreOptions"/>

Implement in your MainActivity.java

public void moreOptions(View view) {

        registerForContextMenu(view);
}

    @Override
    public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.main_menu, menu);
        super.onCreateContextMenu(menu, v, menuInfo);
    }


    @Override
    public boolean onContextItemSelected(MenuItem item) {
        switch (item.getItemId()) {

            case R.id.about:
                //Do something like launch a new activity
                return true;

            case R.id.help:
                //Do something like launch a new activity
                return true;

            case R.id.contact:
                //Do something like launch a new activity
                return true;

            default:
                return super.onContextItemSelected(item);
        }
    }


No comments: