Android - How to Create Google Glass Options Menu?

My previous tutorial about google glass explains the basic setup required for google glass app development.

In this tutorial I am going to explain how to display menu items on google glass. Displaying options menu on glass is very simple. The menu we are going to create contains three menu items where selecting each menu items performs separate action.

Let’s starts this by creating a sample glass project.

Creating new Glass Project

1. Create a new project in Eclipse. File ⇒ New ⇒ Android Application Project and give application name, project name and package.

2. Set Minimum Required SDK and Target SDK to API 19: Android 4.4 (KitKat), Compile With to Glass Development Kit Sneak Peek (Google Inc.) (API19) and select the Theme to None

3. Download this drawable folder and paste it in project’s res folder. This folder contains icons required for the menu items.

4. Open strings.xml and add below strings.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Glass Menu</string>     
    
    <!-- App start voice command -->
    <string name="start_command">Menus</string>
    
    <!-- View messages -->
    <string name="msg_tap_to_menu">Please tap to lauch "menu"</string>
    <string name="msg_about">Activity for about</string>
    <string name="msg_url">www.androidhive.info</string>
    <string name="msg_settings">Activity for settings</string>
    
    <!-- Menu Items -->
    <string name="action_about">About</string>
    <string name="action_settings">Settings</string>
    <string name="action_quit">Quit</string>
    

</resources>

5. Now create an xml file named main.xml under res ⇒ menu folder. In this file we declare actual menu items. We are going to add three menu items about, settings and quit. The first two menu items will launch two separate activities and the third option will quit the app.

<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    
    <item
        android:id="@+id/action_about"
        android:icon="@drawable/ico_about"        
        android:title="@string/action_about"/>
    
    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/ico_settings"        
        android:title="@string/action_settings"/>
    
    <item
        android:id="@+id/action_quit"
        android:icon="@drawable/ico_quit"        
        android:title="@string/action_quit"/>

</menu>

6. Now quickly create two activities for about and settings. These activities will be launched when menu items are selected.

Create activity_about.xml and AboutActivity.java and paste below code.

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/msg_about"
        android:textSize="35dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="@string/msg_url"
        android:textSize="20dp" />

</RelativeLayout>

package info.androidhive.glassmenu;

import android.app.Activity;
import android.os.Bundle;

public class AboutActivity extends Activity {

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

Also create activity_settings.xml and SettingsActivity.java and paste below code.

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/msg_settings"
        android:textSize="35dp" />

</RelativeLayout>

package info.androidhive.glassmenu;

import android.app.Activity;
import android.os.Bundle;

public class SettingsActivity extends Activity {

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

7. Now open your main activity class (MainActivity.java) and do the below changes. On Glass, menus can be triggered using the same methods which we use when developing mobile app.

Here user tap on D-Pad is detected using KEYCODE_DPAD_CENTER key event inside onKeyDown() method. Then by calling openOptionsMenu() method, menu is rendered on to glass screen. Finally the appropriate action for menu item selection is taken place in onOptionsItemSelected() method.

package info.androidhive.glassmenu;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends Activity {

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

	/**
	 * Opening menu on tapping on D-pad
	 * */
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		if (keyCode == KeyEvent.KEYCODE_DPAD_CENTER) {
			openOptionsMenu();
			return true;
		}
		return false;
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	/**
	 * Taking appropriate action on selecting menu item
	 * */
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		
		switch (item.getItemId()) {
		case R.id.action_about:
			// About menu item selected
			Intent ia = new Intent(MainActivity.this, AboutActivity.class);
			startActivity(ia);
			return true;
		case R.id.action_settings:
			// Settings menu item selected
			Intent is = new Intent(MainActivity.this, SettingsActivity.class);
			startActivity(is);
			return true;
		case R.id.action_quit:
			// Quit menu item selected
			// we'll simply close the app
			finish();
			return true;
		default:
			return super.onOptionsItemSelected(item);
		}
	}

}

Until now we are done with actual menus part. But before testing it, I would like to add the app to ok glass menu to launch the app by voice command.

Adding the app to “Ok Glass” menu

8. Create a new folder named xml under res folder.

9. Inside res ⇒ xml folder create an xml file named voice_trigger_start.xml.

<?xml version="1.0" encoding="utf-8"?>
<trigger keyword="@string/start_command" />

10. Now add DEVELOPMENT permission in the AndroidManifest.xml. This allows us to use unlisted glass voice commands.

To launch the app by voice command, we need to add intent-filter and meta-data by adding appropriate voice packages.

<uses-permission android:name="com.google.android.glass.permission.DEVELOPMENT" />

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.glassmenu"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="19"
        android:targetSdkVersion="19" />
    
    <uses-permission android:name="com.google.android.glass.permission.DEVELOPMENT"/>

    <application
        android:allowBackup="true"
        android:icon="@drawable/app_icon"
        android:label="@string/app_name" >
        <activity
            android:name="info.androidhive.glassmenu.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="com.google.android.glass.action.VOICE_TRIGGER" />
            </intent-filter>

            <meta-data
                android:name="com.google.android.glass.VoiceTrigger"
                android:resource="@xml/voice_trigger_start" />
        </activity>
        <activity
            android:name="info.androidhive.glassmenu.AboutActivity"
            android:label="@string/app_name" />
        <activity
            android:name="info.androidhive.glassmenu.SettingsActivity"
            android:label="@string/app_name" />
    </application>

</manifest>

Now deploy the app on to Google Glass and launch the app by saying Ok Glass Menus. Once the app is launched, if you tap on D-Pad you can the menu opened. You can swipe forward / backward to see other menu options.

http://www.androidhive.info/2014/10/how-to-create-google-glass-options-menu/