Google glass app Tutorial

Google Glass is a headset you wear like a pair of eyeglasses, except it has optical display.

Not only does it make you feel like a bad-ass Terminator, but you can make apps for it too!

In this tutorial, you’ll get a head start with Google Glass development by learning how to make a simple Google Glass shopping list app. In the process, you’ll learn:

• The difference between Simple Live Cards and Immersion Activities
• Using Google’s GDK (Glass Development Kit)
• Testing on the device
• How to change the app’s theme
• How to create custom voice commands

Come with me if you want to live – in the world of Google Glass!

Note: This Google Glass app tutorial assumes you know the basics of Android development. If you are new to Android development, check out our Android Tutorial for Beginners series first.

Developing for Google Glass

Google Glass development is unlike any other kind of mobile development.

Because the device is on your face and not in your hand, touch isn’t the main source of input. Imagine tapping, pinching and swiping on a pair of glasses; you’d have to clean them every two seconds!

Google Glass is meant to free your hands, and as such, voice input is the main source of interaction with Glass apps.

Another distinct difference is that because the display is so much smaller than hand-held devices, you have less real estate to work to show information. As a result, user interfaces tend to be plain and simple.

You may have heard that Google is no longer accepting new “Explorers” to purchase early copies of Google Glass. Although this means you can’t get access to a Google Glass if you don’t have one already, the project is far from dead.

Think of it as Google Glass’s way of saying “I’ll be back.”

There’s been a recent change of leadership and direction, so you can expect Glass 2.0 to surface within the next year or two. Wearables are the future of technology, and Glass is anything but a thing of the past.

Note: Because there is no simulator, you’ll need an actual Google Glass to test your work. If you don’t have one, you can at least read along to see what’s involved :]

Getting Started

Google Glass runs a modified version of Android, and much of the code and many of tools you’ll use are the same.

Install Android Studio by following the instructions in this Android for Beginners tutorial.

When you launch Android Studio for the first time, the main menu will come up. By default, Android Studio doesn’t install all the tools necessary for Glass development.

To download these tools, press ConfigureSDK Manager. Under Android 4.4.2 (API 19), choose SDK Platform and Glass Development Kit Preview. Deselect everything else.

Press Install 2 packages and accept the license for each tool. Once downloading finishes, close out of the SDK manager.

Two Types of Glass Apps

There are two different types of Google Glass apps:

• Live Cards exist inside the timeline, so the user doesn’t have to enter or exit the app. They are minimally dependent on user interaction. One example is Google+, which uses a Live Card to show posts on the timeline.
• Immersion Activities take up the entire Glass display and require the user exit to return to the main timeline. These behave more like apps for your phone.

You’ll be creating an Immersion Activity in this Google Glass app tutorial.

Note: If you worked through our WatchKit book or tutorials, you may notice that these two different types are a little familiar; they very much resemble WatchKit’s apps and glances!

Interactions In the Moment

Though they are rivals, Glass apps are remarkably similar to Apple Watch apps. From a design perspective, both primarily show white text on a black background. Both platforms allow for limited require user interaction.

In the Apple Watch Human Interface Guidelines, Apple states, “If you measure interactions with your iOS app in minutes, you can expect interactions with your WatchKit app to be measured in seconds.”

The user will not be using your app for very long, so you need it to be fast, simple and straightforward. This is why I say Apple Watch and Google Glass have a lot in common.

Google’s Glass Design Principles state: “Glass works best with information that is simple, relevant and current.” Glass is meant to be in the moment, not stuck in the past hour, month or year.

What you can take away about wearable tech is it’s not meant to have complex apps that do everything. Wearable demands short, frequent and periodic use in order to show the user current, relevant information.

So let’s get get going on creating your Google Glass app!

Creating the Project

On the Welcome screen, select Start a new Android Studio project.

Name the application “Shopping List” and press Next.

This next screen is where you’ll choose what devices you want to run the app. Deselect the default Phone and Tablet and select Glass.

As mentioned before, you’ll be creating an Immersion Activity. The next page of the project setup lets you select this option.

Keep the default Activity Name, MainActivity, but change the Activity Title from Hello World Immersion toShopping List. This title is what shows in the user’s list of activities.

When you’re done, press Finish.

Running your Glass Activity

Before you can actually run activity on your Glass, you first need to enable testing on the device. On your Glass, go to SettingsDevice InfoTurn on debug. Now you’re ready to make some magic.

Plug your Google Glass into your computer’s USB port. You’ll hear a dinging sound come from the Glass when it is connected properly.

In Android Studio, press the Run button on the toolbar, which is the right arrow to the left of the bug icon.

An Edit Configuration screen will appear. Make sure that your settings on this screen are the same as below:

• Module: app
• Package: Deploy default APK
• Activity: Launch default Activity
• Target Device: USB Device

Press Run. If a pop-up informs you that Configuration is still incorrect, select Continue Anyway.

Android Studio will now build and run the app on your device. Go you! Your app is now running on your Google Glass.

When you first run it, it won’t show up on screen automatically; you have to have a chat with it. So, while wearing the Glass, say “OK Glass,” then ask it to “Show me a demo.” This phrase is the default voice trigger that launches your app.

Your screen should now look like this:

Basic Project Settings

Now take Glass off and get back to work. :]

The template project is not ready for real-time. You didn’t think we’d let you off that easily in this tutorial, did you? It’s missing some pretty important pieces of code.

Open AndroidManifest.xml, which you’ll find in the manifests directory. Under the <manifest> tag and above the <application> tag, add this line of code:

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

That code requests permission to test new, unlisted voice commands in your app.

Note: This line of code is for development purposes only. To launch Glassware with unique commands, you’ll need to submit a new voice command for approval before you release the app.

Open voice_triggers.xml (in the res/xml folder). This file declares the voice command that launches your Glassware.

When you first run the app, you needed to say, “OK Glass, show me a demo.” That command is currently declared in this file.

I’m going out on a limb here and guessing that you don’t want the user to launch your app by saying, “Show me a demo.”

For a more contextual trigger, simply change this line to the following:

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

This changes the starting voice trigger to be the same as your app’s name. So in this case, the trigger is “Shopping List.” Note that command is replaced by keyword.

Another thing that sticks out is the strange appearance of the app. Google Glass apps are generally white text on a black background. However, if you look at the app you have, it’s just the opposite.

In order for the app to look normal, you’ll need to specify what theme to use. Open res/values/styles.xml and look for this line:

<style name="AppTheme" parent="android:Theme.Holo.Light"></style>

Currently, the app uses the Holo.Light theme, which is more appropriate for the screen of an Android phone or tablet than it is for Glass.

Light backgrounds tend to make it more difficult to see the content because the screen is semi-transparent, so the text can get lost in background. Besides, your app will look like a bit of an oddball when compared to other apps.

Replace the above line with the following to implement the default theme.

<style name="AppTheme" parent="android:Theme.DeviceDefault"></style>

Now, run the app again on your Google Glass. Notice how the launch command is no longer Show me a demo, but Open Shopping List instead. Also, when you open the app, it should now be a little easier on the eyes.

Foundation of Voice Commands

Although you just told Android that your app will test your custom voice commands, each individual activity that uses them must explicitly request permission to use them.

In MainActivity.java, find onCreate(Bundle bundle). Right below the call to super.onCreate(bundle);, add the following line:

getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);

You need to import WindowUtils, so add this line of code at the top of the file:

import com.google.android.glass.view.WindowUtils;

Alternatively, you can press Option-Enter and Android Studio will automatically add the import.

Next, you need to declare which voice commands your app must listen to. Glass apps practice selective hearing unless you force their hands, very much like teenagers. :]

Open strings.xml inside res/values. It should predefine the following values:

<string name="app_name">Shopping List</string> <string name="title_activity_main">Shopping List</string> <string name="hello_world">Hello world!</string>

For your shopping list, you’ll need two basic functions: the ability to add and remove an item from the list.

Add the following lines under the "hello_world" declaration:

<string name="add_item">Add item</string> <string name="remove_item">Remove item</string>

On its own, these declarations don’t mean a thing. They only give you a constant string that can be referenced anywhere in the project so you don’t accidentally type in the wrong value.

When using Google Glass, one phrase that you use frequently is “OK Glass.” This is the command that tells your device to listen up. The commands that are available afterwards depend on how the app was designed or context.

Menus are created using XML. (I promise this is the last XML you’ll have to look at!) In the Project Navigator, select res. Press ⌘N (or FileNew) and select Directory. When prompted for the name of the directory, entermenu.

Again, select this new directory and press ⌘N. This time, select Menu resource file. Name the fileactivity_menu.

Replace everything beneath the XML version header line with the following:

<menu xmlns:android="http://bit.ly/1I9HKuD"> <item android:id="@+id/add_menu_item" android:title="@string/add_item"> </item> <item android:id="@+id/remove_menu_item" android:title="@string/remove_item"> </item> </menu>

Not only will this file let you create a menu with these two voice commands, it also generates a unique identifier for each one to help you figure out which command was used. This way, you know whether the user wanted to add or remove an item from the list.

For the app to know that you want these options in the “OK Glass” menu, you need to inflate the menu in two designated methods.

To inflate a menu means that you convert an XML file into a Menu object.

In MainActivity.java, add the following method after onCreate():

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

At the top of the file, import the following file, or use Option-Enter to automatically import:

import android.view.Menu;

These methods inflate your menu options into the menu parameter, so that it knows what voice commands are available.

Run the app on your Google Glass. When you get into the app, say, “OK Glass.” A menu with the options Add Item and Remove Item will appear.

Try to use the Add Item command. Glass will recognize the voice command, but nothing will happen. Why is that?

You’ve not yet told the app what to do when it hears the voice command.

Asking User for an Item

After the user triggers a voice command, onMenuItemSelected is called. Add the following code underonCreatePanelMenu:

@Override public boolean onMenuItemSelected(int featureId, MenuItem item) { // 1 if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS) { // 2 Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH); // 3 startActivityForResult(intent, item.getItemId()); return true; } return super.onMenuItemSelected(featureId, item); }

At the top of the file, import these classes (or do three Option-Enters):

import android.content.Intent; import android.view.MenuItem; import android.speech.RecognizerIntent;

It’s short and sweet, but there’s quite a bit of action in those three lines:

1. First, you check to make sure that the feature ID is for voice commands – this means the menu item was selected from the “OK Glass” menu.
2. When the voice commands are called, this finds out what you want the app to do. If the user wants to add an item, you need to find out what that item is! In order to do this, you create an Intent.
3. This Intent, when started, shows the “Speak your message” screen with the microphone on the right side, a screen most Glass users know well. After the user dictates the item they want to add (or remove), you’re able to use the transcribed text in your app.

Depending on the action you need to call when the intent is completed, you need to pass a different constant.

When the intent completes, it gives you back the constant you pass in; from there, you can act according to which action you originally intended.

But you’ve already thought of this! The way you set up activity_menu.xml has already defined a unique constant for each action. This item ID is attached to the MenuItem parameter in the method. You launch the intent using startActivityForResult, and pass the MenuItem’s ID as the second parameter.

If the feature isn’t for voice commands, then it is best practice to pass on the method call to the superclass.

Run and launch the app and say “OK Glass,” followed by “Add Item.” A new screen will appear that lets you say the item you want to add.

You know you’re craving a sugar rush right about now, so why not tell Glass to add a 3 Musketeers or your favorite candy bar to the list?

Note: Glass needs a working network connection to understand voice commands.

But when you try to add an item nothing in the app changes. This makes sense because you haven’t set anything to use the dictated text. Seems that you won’t be getting your sugar fix until you work through this tutorial.

Even though it’s empty, your shopping list is almost done! All that you have left to do is save and load some items in the list.

Saving & Retrieving Items

Select the MainActivity file in the Project Navigator (this makes sure your new file goes into the right group) then go to FileNew… and create a new Java class named DataManager. Replace everything in the file after the package statement with the following:

import android.content.Context; import android.content.SharedPreferences; import java.util.ArrayList; import java.util.Collections; import java.util.HashSet; import java.util.Set; //1 public class DataManager { private Context context; private static final String StoredStringsKey = "com.raywenderlich.shoppinglist.storedstringskey"; private static final String PreferencesLocation = "com.raywenderlich.shoppinglist"; public DataManager(Context c){ context = c; } //2 public ArrayList<String> getStoredStrings(){ SharedPreferences preferences = context.getSharedPreferences(PreferencesLocation, Context.MODE_PRIVATE); Set<String> stringSet = preferences.getStringSet(StoredStringsKey, Collections.<String>emptySet()); return new ArrayList<>(stringSet); } //3 public void setStoredStrings(ArrayList<String> strings){ SharedPreferences preferences = context.getSharedPreferences(PreferencesLocation, Context.MODE_PRIVATE); SharedPreferences.Editor editor = preferences.edit(); Set<String> stringSet = new HashSet<>(strings); editor.putStringSet(StoredStringsKey, stringSet); editor.apply(); } }

This code creates a utility class that saves and retrieves the user’s shopping list items. Here’s a breakdown of what’s going on:

1. The Context is a way for this class to access the SharedPreferences for this application, and this variable is set in the constructor (the public DataManager(...) code).
2. SharedPreferences is a key-value store, and it acts like a dictionary — if you’ve ever used Cocoa’s NSUserDefaults it will look a little familiar. The key for the stored values is StoredStringsKey, and the values are set in the setStoredStrings function.
3. When you want to get these values back in getStoredStrings() this just asks the SharedPreferences, “Hey, what are the values that are attached to the string here in StoredStringsKey?”

Replace the two occurrences of “com.raywenderlich” with whatever identifier you used when you created the project.

Open MainActivity.java. After the declaration of onMenuItemSelected, add the following method:

protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == R.id.add_menu_item && resultCode == RESULT_OK) { // 1 } else if (requestCode == R.id.remove_menu_item && resultCode == RESULT_OK) { // 2 } super.onActivityResult(requestCode, resultCode, data); }

onActivityResult is called when the speech-recognizing Intent completes. The Intent usually completes with a result code of RESULT_OK of RESULT_CANCEL. You only care about what happens if the Intent completes successfully, so in both cases, you check to make sure that resultCode == RESULT_OK.

requestCode is the same code that you gave the Intent when you called startActivityForResult, which is eitherR.id.add_menu_item or R.id.remove_menu_item.

If the code is R.id.add_menu_item, you want to take the item that the user dictated and add it to the strings stored in the DataManager class.

Add the following code at // 1:

//Part A List<String> results = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS); String spokenText = results.get(0); //Part B DataManager dataManager = new DataManager(getBaseContext()); ArrayList<String> storedStrings = dataManager.getStoredStrings(); storedStrings.add(spokenText); dataManager.setStoredStrings(storedStrings); //Part C mView = buildView(); mCardScroller.getAdapter().notifyDataSetChanged();

Again, at the top of the file import these classes:

import java.util.ArrayList; import java.util.List;

A lot of this code should look new to you, so let me explain each part:

• Part A: Take the Intent and get the spoken text from its “extra results.”
• Part B: Create a new DataManager instance using the base context. After you get a copy of the strings already stored in the DataManager, you add the spoken text to this copy. Then, you set the DataManager’s stored strings to the new values.
• Part C: You update the view to show the new data.

Now, add the following code at //2:

List<String> results = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS); String spokenText = results.get(0); DataManager dataManager = new DataManager(getBaseContext()); List<String> storedStrings = dataManager.getStoredStrings(); if (storedStrings.contains(spokenText)){ storedStrings.remove(spokenText); dataManager.setStoredStrings(new ArrayList<>(storedStrings)); } mView = buildView(); mCardScroller.getAdapter().notifyDataSetChanged();

This code is similar to the code added at // 1, except that you remove the spoken text instead of adding it.

What About the UI?

Both of these code snippets end by updating the user interface. Because you haven’t really looked at that yet, let’s look through the automatically generated code that shapes the app’s appearance.

Inside the onCreate implementation, you have the following code:

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; } }); mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { // Plays disallowed sound to indicate that TAP actions are not supported. AudioManager am = (AudioManager) getSystemService(Context.AUDIO_SERVICE); am.playSoundEffect(Sounds.DISALLOWED); } }); setContentView(mCardScroller);

The app gives you two variables from the get-go: mView and mCardScroller, and mView is just a generic view.

mCardScroller is a CardScrollView. If you have multiple views that should be displayed side by side, you change the adapter methods, which are located in the setAdapter block, to display these views. The individual views shown in a CardScroller are called “cards.”

Next, you call setOnItemClickListener on your mCardScroller, and the code inside the block plays an alert to inform the user that tapping is not allowed in this app. When users tap, they hear the sound and that’s it.

Finally, you set the content view to be the card scroller, and it only has one view — mView — so that is the view/card that shows on-screen.

When you create the mView, you call buildView(). Jump down to the implementation of buildView() to see how this is implemented:

private View buildView() { CardBuilder card = new CardBuilder(this, CardBuilder.Layout.TEXT); card.setText(R.string.hello_world); return card.getView(); }

Hello world? That’s not a 3 Musketeers. You want to show the list of items, not a default “Hello World!”

Replace this method with the following:

private View buildView() { // 1 CardBuilder card = new CardBuilder(this, CardBuilder.Layout.TEXT); // 2 DataManager dataManager = new DataManager(getBaseContext()); ArrayList<String> strings = dataManager.getStoredStrings(); // 3 StringBuilder builder = new StringBuilder(); if (strings.size() == 0){ builder.append("No Items!"); // 4 } else { for (String s : strings) { builder.append("- ").append(s).append("n"); } } // 5 card.setText(builder.toString()); return card.getView(); }

Let’s review how this works:

1. First, you create a new CardBuilder with a Text layout. For reference, CardBuilders generate cards or views, for your CardScroller to present.
2. The next two lines of code should look familiar; you’re simply getting the stored strings from the DataManager.
3. Next, you instantiate a new StringBuilder instance to create the card’s text. If there’s nothing in the shopping list, then you want to show “No Items!”
4. Otherwise, you create a bulleted list comprised of each string in the shopping list by adding a hyphen, the item and then a new line.
5. Finally, you set the CardBuilder’s text to the string you just created, and return the CardBuilder’s view.

Run your Shopping List, and you’ll find everything working as expected!

In the Shopping List, speak “OK Glass… Add Item… Samsung Galaxy Gear.” Someone has to want one, right?

Now, the app should show this screen, with the smart watch in the list:

After thinking about it a little bit, you realize that you really want an Apple Watch. Tell your Glass, “OK Glass… Add Item… Apple Watch.” Your list should have two items in it, as shown below:

Now you have two smart watches in your list at once! Maybe you should reconsider that Samsung.

Tell your Glass, “OK Glass… Remove Item… Samsung Galaxy Gear.” Make sure that you say the item’s name exactly as it appears in the app, because otherwise it will stay on the list.

Your shopping list is now completed — congratulations on creating your very own Google Glass app!

Where To Go From Here?

Here is the download for the final project.

If you’re interested in learning more about Glass development, check out Google’s Glass Developer page.

Google also has a Glass Github page with several really cool sample projects that I recommend you check out.

Challenge: You noticed that if you have too many items in the sample app, you cannot see the last few items on the list. To keep the tutorial more general and approachable, I did not address this issue.There is an open-sourced control that you can implement, called HeadScrollView. This view scrolls when the user raises and lowers his/her head. If you’re up for a challenge, try it out and let me know how it turns out in the comments.

New platforms are always fun to start developing for, and Glass is no exception. I hope you had fun and learned a lot!

Do you have questions about this Google Glass app tutorial – or do you just want to share your favorite Terminator movie? Either way, post it to the comments below! :]

The post Google glass app Tutorial appeared first on Codzcook.

from Codzcook.com

Google Glass is a headset you wear like a pair of eyeglasses, except it has optical display.

Not only does it make you feel like a bad-ass Terminator, but you can make apps for it too!

In this tutorial, you’ll get a head start with Google Glass development by learning how to make a simple Google Glass shopping list app. In the process, you’ll learn:

• The difference between Simple Live Cards and Immersion Activities
• Using Google’s GDK (Glass Development Kit)
• Testing on the device
• How to change the app’s theme
• How to create custom voice commands

Come with me if you want to live – in the world of Google Glass!

Note: This Google Glass app tutorial assumes you know the basics of Android development. If you are new to Android development, check out our Android Tutorial for Beginners series first.

Developing for Google Glass

Google Glass development is unlike any other kind of mobile development.

Because the device is on your face and not in your hand, touch isn’t the main source of input. Imagine tapping, pinching and swiping on a pair of glasses; you’d have to clean them every two seconds!

Google Glass is meant to free your hands, and as such, voice input is the main source of interaction with Glass apps.

Another distinct difference is that because the display is so much smaller than hand-held devices, you have less real estate to work to show information. As a result, user interfaces tend to be plain and simple.

You may have heard that Google is no longer accepting new “Explorers” to purchase early copies of Google Glass. Although this means you can’t get access to a Google Glass if you don’t have one already, the project is far from dead.

Think of it as Google Glass’s way of saying “I’ll be back.”

There’s been a recent change of leadership and direction, so you can expect Glass 2.0 to surface within the next year or two. Wearables are the future of technology, and Glass is anything but a thing of the past.

Note: Because there is no simulator, you’ll need an actual Google Glass to test your work. If you don’t have one, you can at least read along to see what’s involved :]

Getting Started

Google Glass runs a modified version of Android, and much of the code and many of tools you’ll use are the same.

Install Android Studio by following the instructions in this Android for Beginners tutorial.

When you launch Android Studio for the first time, the main menu will come up. By default, Android Studio doesn’t install all the tools necessary for Glass development.

To download these tools, press ConfigureSDK Manager. Under Android 4.4.2 (API 19), choose SDK Platform and Glass Development Kit Preview. Deselect everything else.

Press Install 2 packages and accept the license for each tool. Once downloading finishes, close out of the SDK manager.

Two Types of Glass Apps

There are two different types of Google Glass apps:

• Live Cards exist inside the timeline, so the user doesn’t have to enter or exit the app. They are minimally dependent on user interaction. One example is Google+, which uses a Live Card to show posts on the timeline.
• Immersion Activities take up the entire Glass display and require the user exit to return to the main timeline. These behave more like apps for your phone.

You’ll be creating an Immersion Activity in this Google Glass app tutorial.

Note: If you worked through our WatchKit book or tutorials, you may notice that these two different types are a little familiar; they very much resemble WatchKit’s apps and glances!

Interactions In the Moment

Though they are rivals, Glass apps are remarkably similar to Apple Watch apps. From a design perspective, both primarily show white text on a black background. Both platforms allow for limited require user interaction.

In the Apple Watch Human Interface Guidelines, Apple states, “If you measure interactions with your iOS app in minutes, you can expect interactions with your WatchKit app to be measured in seconds.”

The user will not be using your app for very long, so you need it to be fast, simple and straightforward. This is why I say Apple Watch and Google Glass have a lot in common.

Google’s Glass Design Principles state: “Glass works best with information that is simple, relevant and current.” Glass is meant to be in the moment, not stuck in the past hour, month or year.

What you can take away about wearable tech is it’s not meant to have complex apps that do everything. Wearable demands short, frequent and periodic use in order to show the user current, relevant information.

So let’s get get going on creating your Google Glass app!

Creating the Project

On the Welcome screen, select Start a new Android Studio project.

Name the application “Shopping List” and press Next.

This next screen is where you’ll choose what devices you want to run the app. Deselect the default Phone and Tablet and select Glass.

As mentioned before, you’ll be creating an Immersion Activity. The next page of the project setup lets you select this option.

Keep the default Activity Name, MainActivity, but change the Activity Title from Hello World Immersion toShopping List. This title is what shows in the user’s list of activities.

When you’re done, press Finish.

Running your Glass Activity

Before you can actually run activity on your Glass, you first need to enable testing on the device. On your Glass, go to SettingsDevice InfoTurn on debug. Now you’re ready to make some magic.

Plug your Google Glass into your computer’s USB port. You’ll hear a dinging sound come from the Glass when it is connected properly.

In Android Studio, press the Run button on the toolbar, which is the right arrow to the left of the bug icon.

An Edit Configuration screen will appear. Make sure that your settings on this screen are the same as below:

• Module: app
• Package: Deploy default APK
• Activity: Launch default Activity
• Target Device: USB Device

Press Run. If a pop-up informs you that Configuration is still incorrect, select Continue Anyway.

Android Studio will now build and run the app on your device. Go you! Your app is now running on your Google Glass.

When you first run it, it won’t show up on screen automatically; you have to have a chat with it. So, while wearing the Glass, say “OK Glass,” then ask it to “Show me a demo.” This phrase is the default voice trigger that launches your app.

Your screen should now look like this:

Basic Project Settings

Now take Glass off and get back to work. :]

The template project is not ready for real-time. You didn’t think we’d let you off that easily in this tutorial, did you? It’s missing some pretty important pieces of code.

Open AndroidManifest.xml, which you’ll find in the manifests directory. Under the <manifest> tag and above the <application> tag, add this line of code:

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

That code requests permission to test new, unlisted voice commands in your app.

Note: This line of code is for development purposes only. To launch Glassware with unique commands, you’ll need to submit a new voice command for approval before you release the app.

Open voice_triggers.xml (in the res/xml folder). This file declares the voice command that launches your Glassware.

When you first run the app, you needed to say, “OK Glass, show me a demo.” That command is currently declared in this file.

I’m going out on a limb here and guessing that you don’t want the user to launch your app by saying, “Show me a demo.”

For a more contextual trigger, simply change this line to the following:

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

This changes the starting voice trigger to be the same as your app’s name. So in this case, the trigger is “Shopping List.” Note that command is replaced by keyword.

Another thing that sticks out is the strange appearance of the app. Google Glass apps are generally white text on a black background. However, if you look at the app you have, it’s just the opposite.

In order for the app to look normal, you’ll need to specify what theme to use. Open res/values/styles.xml and look for this line:

<style name="AppTheme" parent="android:Theme.Holo.Light"></style>

Currently, the app uses the Holo.Light theme, which is more appropriate for the screen of an Android phone or tablet than it is for Glass.

Light backgrounds tend to make it more difficult to see the content because the screen is semi-transparent, so the text can get lost in background. Besides, your app will look like a bit of an oddball when compared to other apps.

Replace the above line with the following to implement the default theme.

<style name="AppTheme" parent="android:Theme.DeviceDefault"></style>

Now, run the app again on your Google Glass. Notice how the launch command is no longer Show me a demo, but Open Shopping List instead. Also, when you open the app, it should now be a little easier on the eyes.

Foundation of Voice Commands

Although you just told Android that your app will test your custom voice commands, each individual activity that uses them must explicitly request permission to use them.

In MainActivity.java, find onCreate(Bundle bundle). Right below the call to super.onCreate(bundle);, add the following line:

getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);

You need to import WindowUtils, so add this line of code at the top of the file:

import com.google.android.glass.view.WindowUtils;

Alternatively, you can press Option-Enter and Android Studio will automatically add the import.

Next, you need to declare which voice commands your app must listen to. Glass apps practice selective hearing unless you force their hands, very much like teenagers. :]

Open strings.xml inside res/values. It should predefine the following values:

<string name="app_name">Shopping List</string> <string name="title_activity_main">Shopping List</string> <string name="hello_world">Hello world!</string>

For your shopping list, you’ll need two basic functions: the ability to add and remove an item from the list.

Add the following lines under the "hello_world" declaration:

<string name="add_item">Add item</string> <string name="remove_item">Remove item</string>

On its own, these declarations don’t mean a thing. They only give you a constant string that can be referenced anywhere in the project so you don’t accidentally type in the wrong value.

When using Google Glass, one phrase that you use frequently is “OK Glass.” This is the command that tells your device to listen up. The commands that are available afterwards depend on how the app was designed or context.

Menus are created using XML. (I promise this is the last XML you’ll have to look at!) In the Project Navigator, select res. Press ⌘N (or FileNew) and select Directory. When prompted for the name of the directory, entermenu.

Again, select this new directory and press ⌘N. This time, select Menu resource file. Name the fileactivity_menu.

Replace everything beneath the XML version header line with the following:

<menu xmlns:android="http://bit.ly/1I9HKuD"> <item android:id="@+id/add_menu_item" android:title="@string/add_item"> </item> <item android:id="@+id/remove_menu_item" android:title="@string/remove_item"> </item> </menu>

Not only will this file let you create a menu with these two voice commands, it also generates a unique identifier for each one to help you figure out which command was used. This way, you know whether the user wanted to add or remove an item from the list.

For the app to know that you want these options in the “OK Glass” menu, you need to inflate the menu in two designated methods.

To inflate a menu means that you convert an XML file into a Menu object.

In MainActivity.java, add the following method after onCreate():

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

At the top of the file, import the following file, or use Option-Enter to automatically import:

import android.view.Menu;

These methods inflate your menu options into the menu parameter, so that it knows what voice commands are available.

Run the app on your Google Glass. When you get into the app, say, “OK Glass.” A menu with the options Add Item and Remove Item will appear.

Try to use the Add Item command. Glass will recognize the voice command, but nothing will happen. Why is that?

You’ve not yet told the app what to do when it hears the voice command.

Asking User for an Item

After the user triggers a voice command, onMenuItemSelected is called. Add the following code underonCreatePanelMenu:

@Override public boolean onMenuItemSelected(int featureId, MenuItem item) { // 1 if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS) { // 2 Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH); // 3 startActivityForResult(intent, item.getItemId()); return true; } return super.onMenuItemSelected(featureId, item); }

At the top of the file, import these classes (or do three Option-Enters):

import android.content.Intent; import android.view.MenuItem; import android.speech.RecognizerIntent;

It’s short and sweet, but there’s quite a bit of action in those three lines:

1. First, you check to make sure that the feature ID is for voice commands – this means the menu item was selected from the “OK Glass” menu.
2. When the voice commands are called, this finds out what you want the app to do. If the user wants to add an item, you need to find out what that item is! In order to do this, you create an Intent.
3. This Intent, when started, shows the “Speak your message” screen with the microphone on the right side, a screen most Glass users know well. After the user dictates the item they want to add (or remove), you’re able to use the transcribed text in your app.

Depending on the action you need to call when the intent is completed, you need to pass a different constant.

When the intent completes, it gives you back the constant you pass in; from there, you can act according to which action you originally intended.

But you’ve already thought of this! The way you set up activity_menu.xml has already defined a unique constant for each action. This item ID is attached to the MenuItem parameter in the method. You launch the intent using startActivityForResult, and pass the MenuItem’s ID as the second parameter.

If the feature isn’t for voice commands, then it is best practice to pass on the method call to the superclass.

Run and launch the app and say “OK Glass,” followed by “Add Item.” A new screen will appear that lets you say the item you want to add.

You know you’re craving a sugar rush right about now, so why not tell Glass to add a 3 Musketeers or your favorite candy bar to the list?

Note: Glass needs a working network connection to understand voice commands.

But when you try to add an item nothing in the app changes. This makes sense because you haven’t set anything to use the dictated text. Seems that you won’t be getting your sugar fix until you work through this tutorial.

Even though it’s empty, your shopping list is almost done! All that you have left to do is save and load some items in the list.

Saving & Retrieving Items

Select the MainActivity file in the Project Navigator (this makes sure your new file goes into the right group) then go to FileNew… and create a new Java class named DataManager. Replace everything in the file after the package statement with the following:

import android.content.Context; import android.content.SharedPreferences; import java.util.ArrayList; import java.util.Collections; import java.util.HashSet; import java.util.Set; //1 public class DataManager { private Context context; private static final String StoredStringsKey = "com.raywenderlich.shoppinglist.storedstringskey"; private static final String PreferencesLocation = "com.raywenderlich.shoppinglist"; public DataManager(Context c){ context = c; } //2 public ArrayList<String> getStoredStrings(){ SharedPreferences preferences = context.getSharedPreferences(PreferencesLocation, Context.MODE_PRIVATE); Set<String> stringSet = preferences.getStringSet(StoredStringsKey, Collections.<String>emptySet()); return new ArrayList<>(stringSet); } //3 public void setStoredStrings(ArrayList<String> strings){ SharedPreferences preferences = context.getSharedPreferences(PreferencesLocation, Context.MODE_PRIVATE); SharedPreferences.Editor editor = preferences.edit(); Set<String> stringSet = new HashSet<>(strings); editor.putStringSet(StoredStringsKey, stringSet); editor.apply(); } }

This code creates a utility class that saves and retrieves the user’s shopping list items. Here’s a breakdown of what’s going on:

1. The Context is a way for this class to access the SharedPreferences for this application, and this variable is set in the constructor (the public DataManager(...) code).
2. SharedPreferences is a key-value store, and it acts like a dictionary — if you’ve ever used Cocoa’s NSUserDefaults it will look a little familiar. The key for the stored values is StoredStringsKey, and the values are set in the setStoredStrings function.
3. When you want to get these values back in getStoredStrings() this just asks the SharedPreferences, “Hey, what are the values that are attached to the string here in StoredStringsKey?”

Replace the two occurrences of “com.raywenderlich” with whatever identifier you used when you created the project.

Open MainActivity.java. After the declaration of onMenuItemSelected, add the following method:

protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == R.id.add_menu_item && resultCode == RESULT_OK) { // 1 } else if (requestCode == R.id.remove_menu_item && resultCode == RESULT_OK) { // 2 } super.onActivityResult(requestCode, resultCode, data); }

onActivityResult is called when the speech-recognizing Intent completes. The Intent usually completes with a result code of RESULT_OK of RESULT_CANCEL. You only care about what happens if the Intent completes successfully, so in both cases, you check to make sure that resultCode == RESULT_OK.

requestCode is the same code that you gave the Intent when you called startActivityForResult, which is eitherR.id.add_menu_item or R.id.remove_menu_item.

If the code is R.id.add_menu_item, you want to take the item that the user dictated and add it to the strings stored in the DataManager class.

Add the following code at // 1:

//Part A List<String> results = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS); String spokenText = results.get(0); //Part B DataManager dataManager = new DataManager(getBaseContext()); ArrayList<String> storedStrings = dataManager.getStoredStrings(); storedStrings.add(spokenText); dataManager.setStoredStrings(storedStrings); //Part C mView = buildView(); mCardScroller.getAdapter().notifyDataSetChanged();

Again, at the top of the file import these classes:

import java.util.ArrayList; import java.util.List;

A lot of this code should look new to you, so let me explain each part:

• Part A: Take the Intent and get the spoken text from its “extra results.”
• Part B: Create a new DataManager instance using the base context. After you get a copy of the strings already stored in the DataManager, you add the spoken text to this copy. Then, you set the DataManager’s stored strings to the new values.
• Part C: You update the view to show the new data.

Now, add the following code at //2:

List<String> results = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS); String spokenText = results.get(0); DataManager dataManager = new DataManager(getBaseContext()); List<String> storedStrings = dataManager.getStoredStrings(); if (storedStrings.contains(spokenText)){ storedStrings.remove(spokenText); dataManager.setStoredStrings(new ArrayList<>(storedStrings)); } mView = buildView(); mCardScroller.getAdapter().notifyDataSetChanged();

This code is similar to the code added at // 1, except that you remove the spoken text instead of adding it.

What About the UI?

Both of these code snippets end by updating the user interface. Because you haven’t really looked at that yet, let’s look through the automatically generated code that shapes the app’s appearance.

Inside the onCreate implementation, you have the following code:

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; } }); mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { // Plays disallowed sound to indicate that TAP actions are not supported. AudioManager am = (AudioManager) getSystemService(Context.AUDIO_SERVICE); am.playSoundEffect(Sounds.DISALLOWED); } }); setContentView(mCardScroller);

The app gives you two variables from the get-go: mView and mCardScroller, and mView is just a generic view.

mCardScroller is a CardScrollView. If you have multiple views that should be displayed side by side, you change the adapter methods, which are located in the setAdapter block, to display these views. The individual views shown in a CardScroller are called “cards.”

Next, you call setOnItemClickListener on your mCardScroller, and the code inside the block plays an alert to inform the user that tapping is not allowed in this app. When users tap, they hear the sound and that’s it.

Finally, you set the content view to be the card scroller, and it only has one view — mView — so that is the view/card that shows on-screen.

When you create the mView, you call buildView(). Jump down to the implementation of buildView() to see how this is implemented:

private View buildView() { CardBuilder card = new CardBuilder(this, CardBuilder.Layout.TEXT); card.setText(R.string.hello_world); return card.getView(); }

Hello world? That’s not a 3 Musketeers. You want to show the list of items, not a default “Hello World!”

Replace this method with the following:

private View buildView() { // 1 CardBuilder card = new CardBuilder(this, CardBuilder.Layout.TEXT); // 2 DataManager dataManager = new DataManager(getBaseContext()); ArrayList<String> strings = dataManager.getStoredStrings(); // 3 StringBuilder builder = new StringBuilder(); if (strings.size() == 0){ builder.append("No Items!"); // 4 } else { for (String s : strings) { builder.append("- ").append(s).append("n"); } } // 5 card.setText(builder.toString()); return card.getView(); }

Let’s review how this works:

1. First, you create a new CardBuilder with a Text layout. For reference, CardBuilders generate cards or views, for your CardScroller to present.
2. The next two lines of code should look familiar; you’re simply getting the stored strings from the DataManager.
3. Next, you instantiate a new StringBuilder instance to create the card’s text. If there’s nothing in the shopping list, then you want to show “No Items!”
4. Otherwise, you create a bulleted list comprised of each string in the shopping list by adding a hyphen, the item and then a new line.
5. Finally, you set the CardBuilder’s text to the string you just created, and return the CardBuilder’s view.

Run your Shopping List, and you’ll find everything working as expected!

In the Shopping List, speak “OK Glass… Add Item… Samsung Galaxy Gear.” Someone has to want one, right?

Now, the app should show this screen, with the smart watch in the list:

After thinking about it a little bit, you realize that you really want an Apple Watch. Tell your Glass, “OK Glass… Add Item… Apple Watch.” Your list should have two items in it, as shown below:

Now you have two smart watches in your list at once! Maybe you should reconsider that Samsung.

Tell your Glass, “OK Glass… Remove Item… Samsung Galaxy Gear.” Make sure that you say the item’s name exactly as it appears in the app, because otherwise it will stay on the list.

Your shopping list is now completed — congratulations on creating your very own Google Glass app!

Where To Go From Here?

Here is the download for the final project.

If you’re interested in learning more about Glass development, check out Google’s Glass Developer page.

Google also has a Glass Github page with several really cool sample projects that I recommend you check out.

Challenge: You noticed that if you have too many items in the sample app, you cannot see the last few items on the list. To keep the tutorial more general and approachable, I did not address this issue.There is an open-sourced control that you can implement, called HeadScrollView. This view scrolls when the user raises and lowers his/her head. If you’re up for a challenge, try it out and let me know how it turns out in the comments.

New platforms are always fun to start developing for, and Glass is no exception. I hope you had fun and learned a lot!

Do you have questions about this Google Glass app tutorial – or do you just want to share your favorite Terminator movie? Either way, post it to the comments below! :]

The post Google glass app Tutorial appeared first on Codzcook.

Blog, How To, Tools:Tips, tutorial, android studio http://bit.ly/1OpnGte
via IFTTT