Google Glass is a futuristic technology that promises to revolutionize how we use our devices to interact with the world. But from a developer’s standpoint, what is so special about developing for the glass? The answer is “Nothing!” In fact, from the perspective of an experienced Android developer, Google Glass is just another Android device with a very small screen and limited features!

The fact that anyone with Android development knowledge can become a member of this “elite” community of futuristic wearable-tech evangelists is part of what makes Google Glass so awesome. Sure, you will need to learn a few new things, such as the difference between “Immersion” and “Active Card”, but as you will see, the learning curve is not steep.

The purpose of this Google Glass tutorial is to lay the groundwork for developing any Glass application, through the creation of a simple app that encompasses all of the common steps. My goal is to save you some time in research and trial-and-error, and enable you to run your first Glass application as soon as possible.

In this tutorial we’ll first go over how to set up your development environment and connect your Google Glass to your computer. Then we will create a simple “Hello World” Glass app which will include custom voice commands and integration with the Glass start menu. Once you get your first application developed and running on your Glass you will learn the basics of navigation in Glass applications, voice activated menus, and dynamic content creation.

How to Get On Board

Glass is still in a kind of “beta testing” phase, for which Google has invented the term “Explorer Program”. However you name it, Glass is not yet something that you can get in-store like a smartphone. Unfortunately, Android development tools still do not have an emulator that you can use to develop your application without actual hardware.

Thus, in order to run and debug your application, you will need to get your hands on an actual Google Glass through the Explorer Program. To join the program visit the sign up page and sign up for access. Once approved, prepare your credit card and wait for your glass to be delivered. The Explorer version of Glass currently costs $1,500 USD, but the price is expected to come down significantly before the device hits stores.

For the Glassless

Due to the lack of any emulator, it is necessary that you have actual Google Glass hardware in order to develop the app in this tutorial (or any Glass app), but if getting one is outside your budget, don’t feel discouraged - it will be worth following along anyway. What will become apparent in the tutorial is that developing for Glass is almost the same as developing for any other Android platform!

If you still haven’t used Google Glass, but are as excited about it as I am, take a look at these two videos as they should give you enough input to understand the basics of the user interface.

There are even more useful videos for setup and navigation here, and many more details about the user interface here.

Rules of Engagement

This Google Glass developer’s tutorial makes the following assumptions:

I assume that you understand the basics of navigation and setup of the Glass. If you have never used Glass, take a look at the videos linked above.

I assume that you understand the basics of Android development: the structure of the project files, configuration of Android applications, etc.

I will be using Android Studio, but the instructions should translate to almost any Android development environment. Android Studio is still in “beta”, but so is Glass. Don’t be scared to start using it - it is really a great product. Android Studio is available for download here.

Setting Up Your Google Glass

Alright, let’s get started!

The first thing you need to do is enable debug mode on your Glass. You have to do something like this on every Android device you use for development of your apps so this might be familiar. To enable debug, swipe to “Settings” -> “Device info” and then tap to open device menu. Select “Turn on debug” and it will be enabled.

Next, you need to get your development environment ready. The current version of Google Glass requires that you use API version 19, so make sure that it is installed. Also, you need to have your Glass Development Kit installed. Use your Android SDK Manager to install these two packages if you haven’t done so already.

Hello World!

So let’s make our first piece of “Glassware”. (Yes, Google has coined another term! “Glassware” is the name for any application running on Google Glass). We’ll start by developing a good old “Hello World!” application. Like most major Android development environments, Android Studio automatically populates new apps with a template to display this famous phrase. As a result, getting “Hello World!” up and running is merely an exercise in fundamental app deployment.

In Android Studio, click “New Project” and fill in the project form. You can use something similar to this:

When selecting form factors and API make sure to select “Glass” and API 19

Select “Immersion Activity” as your startup activity.

You remember I mentioned that you will need to learn the difference between Immersion and Live Card? Google’s User Interface article explains the different types of Glass screens. Here’s a quick summary:

Live cards are added to the Glass timeline and display real-time information about something through high-frequency updates. They are constantly running in the background even when users are interacting with different cards. This allows users to multitask with constant access to different kinds real-time information.

Immersions are fully-customizable screens which run outside of the timeline experience. These allow you to design your own UI and process user input however you see fit. This is what we will be using!

In the next screen of the wizard, leave the default values for “Name” and “Title” and click “Finish”.

After Gradle takes care of your dependencies and gets your project ready, it’s time to put on your Glass plug it in. Now this is futuristic development!

Assuming that all of your Android ADB drivers are in place and your Glass is recognized by your system, you should get your Glass in your device list.

If this is the first time you connected your device to a computer, your Glass will ask for approval/trust to be established. Just tap your glass to allow connection and you should be ready.

Click “Run” and deploy your “Default APK” with “MainActivity” as the startup activity for launch on “USB” device.

After a few seconds, you should see something like this on your Glass screen:

Hurray! Your application is running on Glass! And all you had to do is fill in few default values when you created the app!

Since we did not specify differently, Glass will show your app under the name “Show demo”. If you swipe back to the Start screen and then tap to open the app menu, you will see it listed like this:

A Little Polish

Ok, you got it running, but this doesn’t look like a real Glass application, and you don’t want the application to be started by “Show demo”.

In this tutorial we will just tweak it a little to get the real feeling.

Setting the Theme

First, you don’t want to take up any of your small Glass screen with this ugly header “Hello World Immersion” activity title bar, and you definitely don’t want your screen to be gray with black font. In order to fix this we just need to switch the theme on our Android and let Glass OS take care of it.

Open res/values/styles.xml for editing. It should have the following content:

<?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="android:Theme.Holo.Light"> </style> </resources>

Just change android:Theme.Holo.Light to android:Theme.DeviceDefault . This should take care of application layout and colors automatically, using the Glass default theme.

Defining Menu Appearance

Ok, the next thing we want to do in this Glass development tutorial is set up our application to have a proper name and nice voice controlled startup. Open your Android Manifest ( AndroidManifest.xml ) and add the following above <application… tag:

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

The reason you want to use DEVELOPMENT permissions is so you can play with custom voice controls. Google is pretty strict about which voice commands are allowed in approved Glass apps, and all new commands must be approved. Since this tutorial is for learning purposes and you will not be submitting this application to the official Glassware store, you should not worry about it. Just turn on DEVELOPMENT permissions and you will have access to “unlisted voice commands”. For more information about this please read this GDK page.

Open voice_trigger.xml for editing. This is where the voice command to start your application is defined. It should be located in res/xml/ folder. You should get content similar to this:

<trigger command="SHOW_ME_A_DEMO" />

Instead of saying “Show me a demo” to start our app, let’s just say the name of the app. Change the contents of the file to:

<trigger keyword="@string/app_name" />

If you go back to your manifest file, you may notice that your android:label="@string/app_name" has been automatically updated to also use the resource string @string/app_name instead of the hard coded Hello Glass value as it was before. If this setting was not updated, make sure to set the value to android:label="@string/app_name" .

And what is your app name, exactly? If you open res/values/strings.xml , your app_name should be listed as:

<string name="app_name">Hello Glass</string>

This should wrap up things for your first Hello Glass application. Let’s see how it works now!

From your Start screen, you can say “ok glass” to bring up the voice menu. Your application is now in the list of voice-activated commands.

With this tutorial to guide you, this is what your Glass app start screen looks like now.

If you say “Hello glass” your application should start and you should get a standardized Glass experience:

If you don’t want to use your voice to activate the application, you can just tap on your Start screen and you will see that your application is available in the menu:

Voice or Touch? Use Both!

It is very important that you pay close attention to the interface of your application and the interaction of your users with it. Remember that your users are not always in a position to use their voice - for example, while watching a lecture or presentation. Alternatively, they may have their hands full and be unable to use touch. I suggest that you provide both touch and voice menu interaction whenever possible, allowing your users to navigate through your application using voice and touchpad in parallel.

A Real Application - Toptal Finder

Now that you are comfortable with Glass development, and you have created Hello Glass, it is time to create a real application that will put new Glass features to work. Let’s build an app that lets you browse profiles of top Toptal developers based on development platform.

The structure of our example Glass application will be simple:

We want our start screen to have the Toptal logo with a voice and tap activated menu allowing us to select the development platform we need a developer for. After selecting a platform, we want to get a list of developers with their picture and name. Developer profiles will be presented in the form of a scrollable list of personal cards. When viewing a developer profile, we want to be able to add them to favorites or send a request for hire.

The Basics

Let’s quickly recap what you already added on top of your Android knowledge:

How to setup your development environment to build Glassware. How to configure your application to use the standard Glassware GUI theme. How to start your application using custom voice commands and menu names.

Using this knowledge, get your new app up and running. You can either update the Hello Glass app from above, or start a fresh app following those same steps. Name this application “Top Finder”, and make your voice_trigger.xml file look like this.

<?xml version="1.0" encoding="utf-8"?> <trigger keyword="@string/app_name" > <constraints network="true" /> </trigger>

The network="true" constraint tells glass to check for network connectivity when starting this app, which we will need to connect to the Toptal developer lists. If there is no connection, Glass will display a warning message.

Home Screen

Let’s make our application’s home screen look something like this:

When you see the “ok glass” message on your screen it means that application has voice activated menu at that place. Speaking the phrase “ok glass” here activates the voice menu for this location. This phrase is predefined by Glass and you cannot change it.

You can think of “ok glass” as an “application menu”, just like you have used in your smartphone/tablet development, and it has exactly the same role. As you would “tap” the “Application menu icon” on your screen (often 3 dots or lines) to open an Android application menu, you need to say “ok glass” to open the voice activated menu in your Glassware app.

In order to enable the “ok glass” menu you need to request FEATURE_VOICE_COMMANDS from the API. To do this, add the following line in your onCreate handler in your MainActivity :

getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);

Every activity that has this feature included will be rendered with “ok glass” text at the bottom center.

The next thing you need to do is create a menu for the main screen. In your res/menu folder create a new XML menu definition named main.xml . To make things simple we will just enable three Toptal developer platforms, but feel free to make the changes as you like.

It should have the following content:

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/find_android" android:title="Top Android developer" /> <item android:id="@+id/find_javascript" android:title="Top JavaScript developer" /> <item android:id="@+id/find_ios" android:title="Top iOS developer" /> </menu>

You might be wondering why I chose rather long menu titles instead of simply Android, JavaScript and iOS. Well, the reason is very simple. The guys from the Glass development team are still improving voice recognition. It is recommended practice to use two or three words in your menus so that Glass will recognize them easier.

I already mentioned that the “ok glass” menu is no different from your standard Android application menu. Attaching a menu to an activity is practically the same. Just override the onCreatePanelMenu handler in your MainActivity , and inflate the main menu you just created:

@Override public boolean onCreatePanelMenu(int featureId, Menu menu){ if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { getMenuInflater().inflate(R.menu.main, menu); return true; } return super.onCreatePanelMenu(featureId, menu); }

Now we need to add a menu handler. Before you do that, create one empty method named findDevelopers . We will come back to this later to start a search and show the results. After that you can override your menu handler.

public void findDevelopers(String platform){ } @Override public boolean onMenuItemSelected(int featureId, MenuItem item) { if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { switch (item.getItemId()) { case R.id.find_android: findDevelopers("Android"); break; case R.id.find_javascript: findDevelopers("Java Script"); break; case R.id.find_ios: findDevelopers("iOS"); break; } return true; } return super.onMenuItemSelected(featureId, item); }

It is now time to make our example Google Glass application’s home screen pretty. Import a Toptal logo into your application as res/drawable/logo.png . I used this image:

In your MainActivity class, make the following changes.

Make sure that the following private variables are declared at the start of the class:

private CardScrollView mCardScroller; private View mView; private GestureDetector mGestureDetector;

Change the buildView method to customize the Card layout:

private View buildView() { Card card = new Card(this); card.setText(R.string.app_name); card.setImageLayout(Card.ImageLayout.LEFT); card.addImage(R.drawable.logo); return card.getView(); }

And change your onCreate handler to be like this:

protected void onCreate(Bundle bundle) { super.onCreate(bundle); getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS); mView = buildView(); mCardScroller = new CardScrollView(this); mCardScroller.setAdapter(new CardScrollAdapter() { @Override public int getCount() { return 1; } @Override public Object getItem(int position) { return mView; } @Override public View getView(int position, View convertView, ViewGroup parent) { return mView; } @Override public int getPosition(Object item) { if (mView.equals(item)) { return 0; } return AdapterView.INVALID_POSITION; } }); // Handle the TAP event. mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { openOptionsMenu(); } }); mGestureDetector = createGestureDetector(this); setContentView(mCardScroller); }

As I said before, we want to include tap-activated menu along with “ok glass”, so just enable gestures like you would in your Android app. Add the following methods in your MainActivity class:

private GestureDetector createGestureDetector(Context context) { GestureDetector gestureDetector = new GestureDetector(context); //Create a base listener for generic gestures gestureDetector.setBaseListener( new GestureDetector.BaseListener() { @Override public boolean onGesture(Gesture gesture) { if (gesture == Gesture.TAP) { openOptionsMenu(); return true; } else if (gesture == Gesture.TWO_TAP) { // do something on two finger tap return true; } else if (gesture == Gesture.SWIPE_RIGHT) { // do something on right (forward) swipe return true; } else if (gesture == Gesture.SWIPE_LEFT) { // do something on left (backwards) swipe return true; } else if (gesture == Gesture.SWIPE_DOWN){ finish(); } return false; } }); gestureDetector.setFingerListener(new GestureDetector.FingerListener() { @Override public void onFingerCountChanged(int previousCount, int currentCount) { // do something on finger count changes } }); gestureDetector.setScrollListener(new GestureDetector.ScrollListener() { @Override public boolean onScroll(float displacement, float delta, float velocity) { // do something on scrolling return true; } }); return gestureDetector; } @Override public boolean onGenericMotionEvent(MotionEvent event) { if (mGestureDetector != null) { return mGestureDetector.onMotionEvent(event); } return false; }

That should be it! You can now start your app and try both methods of menu activation. If you say “ok glass” you get three menu items displayed on screen, and if you tap the glass, a scrollable menu will be opened. To navigate through menu items you can swipe back and forward.

Here’s what the voice menu looks like:

And here’s the gesture menu:

If you select a menu item nothing will happen as your findDevelopers method is yet to be implemented.

Developer Screens

We will continue to use the default Glass Card layout, with a picture on the left side, text on the right, and some footer information. For more information about best practices for designing your cards please refer to the Google Glass style guide.

Our developer profile is defined by simple properties:

Name Picture Development platform

So, let’s make sure to have the proper structure of classes in our app. Create a new class named DeveloperModel.java in your java/models folder. We want this class to be serializable, as it will contain profiles that are in a list.

public class DeveloperModel implements Serializable { private String name; public String getName(){ return name; } public void setName(String name){ this.name=name; } private String platform; public String getPlatform(){ return platform; } public void setPlatform(String platform){ this.platform=platform; } private String image; public String getImage(){ return image; } public void setImage(String image){ this.image=image; } }

We want our cards to be tightly bound to our developer profile data. Because the default CardScrollAdapter is a bit generic in regards to its data model we need to extend it and make it our own. Create DeveloperAdapter.java in your java/adapters folder:

public class DeveloperAdapter extends CardScrollAdapter { private List<Card> mCards; private List<DeveloperModel> mData; public DeveloperAdapter(List<Card> cards){ this.mCards = cards; } @Override public int getCount() { return mCards.size(); } @Override public Object getItem(int i) { return mCards.get(i); } @Override public View getView(int i, View view, ViewGroup viewGroup) { return mCards.get(i).getView(); } @Override public int getPosition(Object o) { return this.mCards.indexOf(o); } }

We don’t want our search results to be added on the home screen of application, so we will create new Activity that will do the search and display results. Create a new activity, ResultsActivity , next to your MainActivity (probably in java/com.helloglass ).

Make sure that it extends Activity .

Next, we need to specify a menu for our developer profile cards. Create a new menu, developer.xml , with the following content:

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/developer_fav" android:title="Add to favorites" /> <item android:id="@+id/developer_hire" android:title="Hire" /> <item android:id="@+id/go_back" android:title="Go back" /> </menu>

To enable passing parameters between ResultsActivity and MainActivity add the following lines at the start of ResultsActivity class:

public static final String SEARCH = "search"; private String mPlatform="Android";

Make sure to add your new activity to your manifest file:

<activity android:name=".ResultsActivity" android:immersive="true" android:icon="@drawable/ic_launcher" android:label="@string/title_activityresults" android:parentActivityName=".MainActivity"> <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="com.eloptico.MainActivity" /> </activity>

Setting up the initial screen of ResultsActivity and configuring cards is very similar to what we did on MainActivity . First check that you have your cards and scroller defined at the beginning:

private CardScrollView mCardScroller; private List<Card> mCards; private GestureDetector mGestureDetector;

Create a temporary search method that we will come back to later to implement. Adding new cards to the profile list is as simple as adding items to an Array. We’ll name this method findDevelopers also, but this one belongs to ResultsActivity :

private void findDevelopers(String platform){ for (int i=1; i<=10; i++){ Card card = new Card(this); card.setText(platform+" "+Integer.toString(i)); card.setTimestamp(platform); card.setImageLayout(Card.ImageLayout.LEFT); card.addImage(R.drawable.ic_person_50); mCards.add(card); } mCardScroller.setSelection(0); }

Now go back to your MainActivity and update findDevelopers there to start your ResultsActivity and pass in the platform property:

public void findDevelopers(String platform){ Intent resultsIntent = new Intent(this, ResultsActivity.class); resultsIntent.putExtra(ResultsActivity.SEARCH, platform); startActivity(resultsIntent); }

Attach your developer menu to ResultsActivity . You will be able to open the menu at any profile card.

@Override public boolean onCreatePanelMenu(int featureId, Menu menu){ if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { getMenuInflater().inflate(R.menu.developer, menu); return true; } return super.onCreatePanelMenu(featureId, menu); }

Just like earlier, enable gestures to handle the touchpad on your Glass when ResultsActivity is displayed. To do that just call openOptionsMenu() in your onGesture(Gesture gesture) method:

private GestureDetector createGestureDetector(Context context) { // … @Override public boolean onGesture(Gesture gesture) { if (gesture == Gesture.TAP) { openOptionsMenu(); return true; } else if // …

Also, add a menu handler to developer related actions. We will leave simple Toast messages for now.

@Override public boolean onMenuItemSelected(int featureId, MenuItem item) { if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { switch (item.getItemId()) { case R.id.developer_fav: Toast.makeText(getApplicationContext(), "Favorite", Toast.LENGTH_LONG).show(); break; case R.id.developer_hire: Toast.makeText(getApplicationContext(), "Message", Toast.LENGTH_LONG).show(); break; case R.id.go_back: break; } return true; } return super.onMenuItemSelected(featureId, item); }

Every application should use some nice visual elements, icons etc. The Google Glass team has provided a very large set of common standardized icons that are free for Glass developers to use in their applications. You can find a full set of standard Glass icons as well as fonts in their library

For now, you just need one icon ic_person_50.png , so go ahead and download it to your res\drawable folder. We will use this icon instead of downloading a picture of the developer.

The last thing that is left in our Glass app development tutorial for now is to override our onCreate handler on ResultsActivity , where we will check which development platform was forwarded from MainActivity and populate our list.

@Override protected void onCreate(Bundle bundle) { super.onCreate(bundle); getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS); mCardScroller = new CardScrollView(this); mCards = new ArrayList<Card>(); if(getIntent().hasExtra(SEARCH)){ mPlatform = getIntent().getStringExtra(SEARCH); } findDevelopers(mPlatform); mCardScroller.setAdapter(new DeveloperAdapter(mCards)); // Handle the TAP event. mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { openOptionsMenu(); } }); mGestureDetector = createGestureDetector(this); setContentView(mCardScroller); }

You can leave onResume and onPause methods the same as in your MainActivity .

If you start your application now, you can check how your developer profiles are created on the fly based on the menu selected on MainActivity . Again, you have an option to display your menu using “ok glass” or by tapping the touchpad or by using voice activation. Here’s what the “10th Android developer” profile looks like at the moment:

Tapping brings up the touch menu:

And saying “ok glass” brings up the voice menu:

Swipe down from the list to go back to the home screen of your app.

Getting Profiles from the Internet

To wrap things up, let’s populate the menu with real information for the top 10 Toptal developers for JavaScript, Android, and iOS.

You will need to download their profile pictures and make them available over HTTP, or just use URLs directly from toptal.com.

Since building a web crawler just to get names of top developers in Toptal might be too much of a detour for this article, I’ve created JSON files for you to use for Android, JavaScript, and iOS.

In your app, the first thing you need to do is request access to the internet from your Android OS. Add the following line to your Manifest file

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

Be aware that Glass will not allow you to block the main thread by using HTTP requests directly. You will need to handle JSON downloads and individual images in an asynchronous way. You can use an async task, create your own download service or intent, or whatever you prefer in your everyday work.

Building this functionality is not specific to Google Glass, so I will skip code snippets. If you forge ahead and get this last bit of functionality working, your profile cards should look like this:

Tutorial Wrap Up

I do hope that you had fun following this Google Glass development tutorial and building your first Glassware application. By now, you should be comfortable with the idea that writing applications for Glass is not much different than any other Android platform.

At this point, you have learned how to extend the Google Glass voice activated Home Screen, how to create your own voice activated menus, and how to combine voice controls with touch gestures. You also should understand the concepts and basic building blocks for Glass UI, such as cards, layouts, and elements. You’ve seen how to dynamically create cards and how to navigate between different activities.

To dive deeper, head over to Google’s developer resources at developers.google.com/glass. When you start building more complex applications it will prove to be a very helpful resource.

Please be reminded that Glass is still in the development phase and there are likely many more enhancements to be implemented before it gets to the consumer market. With this in mind, I have one important note for you:

There is quite a good deal of work left on voice recognition and you might catch yourself shouting at your imaginary friend while trying to start your activity or fill in some information. No worries there - everyone who tries Google Glass development feels the same, so you are not alone.

The technology will improve, and glass will be ready for retail in no time. It is sure to make big waves once it hits stores, so I hope you are as excited as I am about being one of the first to be out on the forefront of this exciting technology!

Shout Out: Screenshots in this article are made using [email protected].