Month: March 2017

Android – Creating a simple hamburger menu in title bar

What we want:

A standard hamburger style menu that can be used in the active title bar of an Android Application

Android hamburger menu collapsed

Android hamburger menu collapsed

How to do it:

Create a menu layout in the menu directory of the res folder, reference it in your activity, and program functionality to each menu item.

Menu-item file:

If the folder “menu” doesn’t exist in “res”. You will need to create it. See below:

Android resource menu layout

Android resource menu layout

Contents of new file:

<?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/iconHamburger"
        android:icon="@drawable/hamburger"
        app:showAsAction="ifRoom|withText"
        android:title="Other">
        <menu>
            <item
                android:icon="@drawable/settingsicon"
                android:id="@+id/menuItemSettingsicon"
                android:onClick="launchSettings"
                android:title="Settings"></item>
            <item
                android:icon="@drawable/browser"
                android:id="@+id/menuItemWebsite"
                android:onClick="launchBrowser"
                android:title="Website / Status"></item>
            <item
                android:icon="@drawable/bug"
                android:id="@+id/menuItemBugReporting"
                android:onClick="launchEmail"
                android:title="Bug reporting"></item>
            <item
                android:icon="@drawable/beer"
                android:id="@+id/menuItemBeer"
                android:onClick="launchDonateActivity"
                android:title="Donate / Buy me a beer"></item>

        </menu>

    </item>
</menu>

You’ll need a hamburger icon, which you can obtain off google images anywhere. I also have icons on each menu item. The end result looks like this:

Android hamburger menu expanded

Android hamburger menu expanded

We’ll need to make the hamburger expand on click, so create the following method

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.mainpagemenu, menu);
        return true;
    }

 

You’ll notice that in the XML file, I have an onClick property that refers to a method we haven’t implemented in this java file. We’ll add the methods to the file now (The method will need to accept a Menu item!)

    public void launchEmail(MenuItem menuItem)
    {
        //do whatever you want in this method
        Intent emailIntent = new Intent(android.content.Intent.ACTION_SEND);
        emailIntent.setType("message/rfc822");
        emailIntent.putExtra(android.content.Intent.EXTRA_EMAIL, new String[] {"[email protected]"});
        try {
            emailIntent.putExtra(android.content.Intent.EXTRA_SUBJECT, "Hi, I found a bug with your app -");
            startActivity(emailIntent);
        } catch (ActivityNotFoundException e) {
            Toast.makeText(getApplicationContext(), "You have no email client installed! Email me at samp[email protected]", Toast.LENGTH_LONG).show();
        }

    }

 

That’s it! That’s how you create a very simple Hamburger menu!