I have been spending a lot of quality time with Google Glass and Android lately. I’ve already shared a few of those experiences, like sending trackable email on Google Glass using its Mirror API and my Android email tutorial. Most recently I have been working on a native “Glassware” app, which I’d like to share here.
Using the Google Glass GDK I’ll show you how to:
- Create native Glassware (Glassware is the name Google has given to apps running on Glass)
- Activate and interact with your Glassware by voice
- Use menus to edit your Glassware’s data
- Manipulate Cards in an Immersion
- Send email using the SendGrid Java library
Now, Let’s Get Hackin’
You’re probably ready to jump in, but before we start, you’ll need to follow prerequisites to get the most out of the tutorial:
- Experience with native Android Development
- Install the Android SDK
- Complete the GDK Quick Start
- Get the latest Java EE Development Kit Bundles with JDK. I used version 7, update 45 for Mac OSX.
Quickstart: Try the App Out on Your Device in Minutes
I recommend you start here so that you can see the finished project in action; otherwise, you can watch the following video.
- Complete the GDK Quick Start.
- Clone the example code into your project.
- Get a SendGrid account.
- Rename UtilsDEFAULT.java to Utils.java.
- Update the username, password and from_address variables in Utils.java.
- After compiling and launching the app, say “OK Glass, send an email”.
- Follow the prompts and send your first email using SendGrid through Glass.
Go Deep and Immerse Thyself
Creating an Immersion based App for Glass using the GDK.
Using the GDK, you can create 3 types of Cards. A Card is what you see on the screen when looking through Glass (as demonstrated in the above video). I chose to use an Immersion type of Card for this Glassware example because there is high user interaction. You can find a great description of Immersions along with a Hello World tutorial at AndroidZeitgeist.
Designing The User Experience
The first order of business is to create a sketch of the Glassware’s workflow. I started with paper and pen, using that sketch to create the Glassware. I then created this diagram to avoid revealing my horrible drawing abilities in this post.
The full source code for this tutorial can be found at GitHub.
Let’s begin by creating a new Android application. I am using the Android Developer Tools with the Eclipse IDE for this tutorial.
- Navigate to File->New->Project
- Choose “Android Application Project”
- Click Next
- Click Next
- Click Next
- Click Next
- Click Next
- Click Finish
Update the App Manifest
First, we need to give our app permission to access the Internet. This is needed so we can make the SendGrid Web API calls. Add the following before the application tag:
Next, implement the default Glass theme by replacing the android:theme attribute with:
Let’s add an icon for our app by adding the icon attribute (you can generate your own icon with this tool):
Create a folder under the res folder named drawable and add the icon.
Replace the generated code in the intent-filter element with the following:
This will allow our app to be launched with a voice trigger. Now we have to define how to handle that voice trigger. Add the following after the intent-filter element:
<meta-data android:name="com.google.android.glass.VoiceTrigger" android:resource="@xml/voice_trigger" />
Your completed App Manifest should look similar to the following:
You can find complete documentation for the App Manifest file here.
Define the Launch Voice Trigger
Your Glassware’s resources are under the res folder. There are a few that we need to define and update.
To define the voice trigger for our Glassware, we need to create a folder named xml under the res directory. In that folder, create a file named voice_trigger.xml with the following contents:
<trigger keyword="@string/send_email" />
Now we will define the string for the voice trigger by modifying strings.xml which is located in res/values:
Now, when we say “OK Glass, send an email”, our Glassware will launch.
Initiate Our Code in Glass – MainActivity.java
Now we will implement the Glassware’s functionality, starting with the MainActivity.java file under the src directory.
There is a lot of code in that file, but I’ll go on to explain the sections below.
This is the function that is invoked when the application begins. In this first interaction with our Glassware we want to find out who we need to email. Because the GDK does not yet support contacts, I implemented an AddressBook class which contains an array of first names and emails.
Why not just store the emails? Well, I could not get Glass to understand email addresses verbally. When I said @, Glass transcribed at.
On this first Card we remind the user what contacts are available to email. When the GDK implements contact support we would acquire the names from that list.
This is a utility function to create the Cards that the user will see. If you want to add some bling, check out the Glass theme and UI widgets.
Before we send an email, we want to show a preview to the user, allowing for a chance to make any necessary edits. This utility function generates the content that is displayed on preview Card.
This function intercepts two interactions with the Glass trackpad, tap and a downward swipe. Capturing the downward swipe causes us to exit the Glassware.
If the user taps the trackpad there are 5 differenct cases to capture:
- InitializeCapture the email we are sending to.
- Subject is not definedOnce the to field is defined initially, we next enter this state.
- Text is not definedThis state is entered after we have defined the to and subject fields.
- Edit modeWhen all the fields are defined, it means that we want to give the user an option to edit. In this Glassware we achieve this using a menu.
- DoneCatch any taps that happen after the email was sent. In our case we exit the Glassware, but you may want to allow for sending additional emails.
In states where we need to capture verbal input we must create an Intent which is captured by the onActivityResult function as described below.
Here is where we capture verbal input. We have to account for two different workflows here. The first considers the initial time through the app when the to, subject, and text fields are captured in sequence. The second workflow captures any edits after the user arrives at the preview stage.
Here is where we handle the menu actions, such as editing any of the fields. Also, we make our call to SendGrid’s Web API using our Java library to do the heavy lifting of getting our email delivered. You will want to edit the error message, as I wont respond to your errors … maybe.
Now Send the Email
Now we implement the magic that sends our email. Your code should look like this:
The only thing that needs modification in this file is your package definition. This is a very basic example of how to use our Java library, you learn more at our docs.
Address Book Hack
This is a temporary solution until we get access to contacts in Glass via the GDK. You will need to update the emails HashMap with your own list. If you bring this Glassware to production, implement proper error handling in the getEmail function.
Note that by adding the OmniFocus email option here, I can send tasks from Glass to import into Omnifocus, which is currently a Apple only app.
Store Your Credentials
Here we store our credentials. You need change the filename and class name from UtilsDEFAULT to Utils, then you will add your SendGrid credentials and the email you want to appear as the from address.
Complete the Menu
Compile and Run
Click the magical green triangle in your Eclipse IDE and there should be a result similar to what I demonstrated in this video.
Here are some resources that I found helpful when creating this Glassware and tutorial:
- Send Email from Android Native Applications
- Glass Development Kit Documentation
- SendGrid Java Library
- Sabastian’s Hello World Immersion tutorial
- StackOverflow, GitHub and the Google Developer Community
- Oracle’s Java Tutorials
What will you create?
I can’t wait to see what kind of Glassware you create with this code. Once you do, be sure to promote your Glassware at our SendGrid Developer Community and at the Google Glass Developer Community on Google Plus.