First Google Glass App – Part 8 – Hello Glass!

Jumping right in, let’s create a Glass GDK project from scratch:

  1. Create New Android Project
  2. Configure GDK
  3. Imports
  4. Code
  5. qwe

To create a new project…See our Part 1 of the tutorial.

Make sure to configure the Glass GDK Sneak Peek Manually if it didn’t get configured by Android Studio or Eclipse on set up.  As it turns out, even if you create a project setting GDK as the Compile for API, it doesn’t get created as such.  You must double check in your build.gradle file (CAREFUL, there are 2 such files.  You need to modify your inner most gradle file) and make sure it looks something like this:

Google Glass GDK App Build Gradle File Settings by Marcio Valenzuela Santiapps.com
Google Glass GDK App Build Gradle File Settings by Marcio Valenzuela Santiapps.com

And you need to make sure that Android 4.0.3 GDK Sneak Peek & gdk.jar got added to your External Libraries as well.

Ok, once we have that out of the way, we need to include some imports.  In this case we need to add AudioManager support because we will be working with audio.  We also need TextToSpeech for recognizing commands and KeyEvent to respond to touches.

Add the following imports:

import android.app.Activity;
import android.content.Context;
import android.media.AudioManager;
import android.os.Bundle;
import android.speech.tts.TextToSpeech;
import android.view.View;
import android.view.KeyEvent;
import android.widget.TextView;

import com.google.android.glass.app.Card;
import com.google.android.glass.media.Sounds;

We will create the card and its view as well as add a TextView, nothing new here.  But we will create a TextToSpeech variable as well as a context.  We init our speech engine and pass it the value to be speak.

We will also be creating an onKeyDown method to respond to taps on the touchpad.  When they DO occur we will then create an AudioManager to play a tap sound, set the text view and also set speak a new value.

So lets add the following code:

public class HelloGlassActivity extends Activity {

private Card _card;
private View _cardView;
private TextView _statusTextView;

private TextToSpeech _speech;

private Context _context = this;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// Init TextToSpeech engine
_speech = new TextToSpeech(this, new TextToSpeech.OnInitListener() {
@Override
public void onInit(int status) {
_speech.speak(“Hello Glass”, TextToSpeech.QUEUE_FLUSH, null);
}
});

// An alternative way to layout the UX
setContentView(R.layout.layout_helloworld);
_statusTextView = (TextView)findViewById(R.id.status);
}

/**
* Handle the tap from the touchpad.
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
switch (keyCode) {
// Handle tap events.
case KeyEvent.KEYCODE_DPAD_CENTER:
case KeyEvent.KEYCODE_ENTER:

// Status message below the main text in the alternative UX layout
AudioManager audio = (AudioManager)getSystemService(Context.AUDIO_SERVICE);
audio.playSoundEffect(Sounds.TAP);

_statusTextView.setText(R.string.touchpad_touched);

_speech.speak(“Touchpad touched”, TextToSpeech.QUEUE_FLUSH, null);

return true;
default:
return super.onKeyDown(keyCode, event);
}
}

@Override
public void onResume() {
super.onResume();
}

@Override
public void onPause() {
super.onPause();
}

@Override
public void onDestroy() {
super.onDestroy();
}
}

Its quite a simple app but it gets your juices flowing!

Plug in your Glass device and hit the Run button!

First Google Glass App – Part 7 – Bridge to Glass App GDK Development

Before jumping into Glass dev, let’s understand how to create a Hello World project in Android Studio (AS) and run it on our device.

  1. Create New Project
  2. Get to know the guts
  3. Add Imports
  4. Add Code
  5. Tweak guts
  6. Run on Device

Create New Project

When you select New Project from the File Menu, you get this Wizard screen:

Android Studio Beginner App Development by Marcio Valenzuela Santiapps.com
Android Studio Beginner App Development

Fill in the Application Name in a natural language and the Module Name without spaces.  Make sure to select API 15 for Minimum and Target SDK but Glass Development Kit Sneak Peek for Compile with.

Click Next and in the next screen just leave everything as is (the launch icon selector screen).

Android Studio Project Launcher Icon Window by Marcio Valenzuela Santiapps.com
Android Studio Project Launcher Icon Window

After that screen, leave the Blank Activity option selected and again click Next.

Android Studio Project Blank Activity Window by Marcio Valenzuela Santiapps.com
Android Studio Project Blank Activity Window

Finally in the Activity Name, leave MainActivity.  In the Layout Name leave activity_main but also copy that activity_main over to the Fragment Layout Name, replacing fragment_main.

Android Studio Project Layout Window by Marcio Valenzuela Santiapps.com
Android Studio Project Layout Window

Everything else stays as is and Click Finish.  The reason for this last bit is that new in Android is this concept of Fragments.  This just complicates things for us at the moment so we will leave it out for now.  We must also remove the MainActivity.java fragment method later.

Android Guts

Let’s familiarize ourselves with this screen:

Android Studio Layout Google Glass Development by Marcio Valenzuela Santiapps.com
Android Studio Layout Google Glass Development

Let’s review these 10 top pointers:

  1. Your Java Classes or Android Activities
  2. Layout files in xml format
  3. Value files for storing global settings of sorts
  4. AndroidManifest is a sort of Central Registry
  5. Top level build.gradle file
  6. Low level build.gradle file
  7. Tab bar for displayed files
  8. Sync Gradle file button
  9. Run button
  10. Green = A-Ok button!
Take some time to explore these files.  If you have gone through the tutorial at:
 
http://developer.android.com/training/basics/firstapp/index.html
 
You will be familiar with these pointers.  Otherwise, let’s take a closer look.
 
MainActivity is selected and displayed in the editor window.  This contains your default, boilerplate/template created MainActivity Class required for any app.
 
The layout folder contains your activity_main.xml file.  If you look inside that file you will see an xml file with some parameters and a TextView element.  You will also see a graphical representation of it off to the far right.
 
The values folder contains more xml files.  Most importantly, the strings.xml which contains global references to string values.  These are used throughout the app to assign string values where needed.
 
The AndroidManifest.xml file contains some general settings elements for your app such as the package name, launcher icon, activity tags which contain your declared activities and in this case, if the activity has an intent, which is like an action, it must also be specified here.  In our case we will add a Voice Trigger intent filter if there isn’t one already.
 
Build.gradle files are not to be messed around with much.  This is a new M.O. used by Android Studio to organize files in a workspace.  You must keep in mind here that there is a Top level and Low level build.gradle file so make sure you know which one you are being told to put things in.
 
The tabs display whatever files you have double clicked on the File Window on the left.
 
The Sync Gradle button is that green-blue circle with a solid circle inside and a green arrow pointing down.  Go Figure!  Its basically a sort of I’ve-made-some-changes-to-the-AndroidManifest-and/or-other-project-wide-parameters-which-require-project-workspace-reindexing (phew) button!
 
The Run button is of course the one used to build and launch the app in the emulator or device.
 
The Green=AOk button tells you all file and project inconsistencies have been resolved and that the project will build and run.  Sometimes you have resolved coding issues and this box is still red.  Just tap on the Sync Gradle button mentioned before and Just Like That, Its Magic…AOk!
 
Great now let’s look at some code…
 
Imports
 
If you expand the imports “+” sign in the MainActivity window’s left edge, you will get a list of what imports a project comes with.  Let’s just make sure they look like this:
 

import android.app.Activity;
import android.os.Bundle;
import com.google.android.glass.app.Card;

The last import as you can see is what allows us to create a Card instance, which is what Glass apps are based on.  This is what you put your info into in a Glass app.

Code

Next, simply add this method inside your public class MainActivity extends Activity statement:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

Card card = new Card(this);
card.setText(“你 好 吗”);
card.setFootnote(“santiapps.com”);

setContentView(card.toView());
}

Here we are creating a new card, setting its text and footnote properties and setting its view to the Activity’s ContentView or the main view.

Voila!  Connect your Glass to your USB port, make sure to set it to Debug Mode ON and Run the app.  It will build and install on your Glass.

Tweak

Now let’s tweak it.  In your AndroidManifest, declare this intent by making that file look like this:

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android”
package=”com.santiapps.glassapp” >

<application
android:allowBackup=”true”
android:icon=”@drawable/ic_launcher”
android:label=”@string/app_name” >
<activity
android:name=”com.santiapps.glassapp.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” />
</activity>
</application>

</manifest>

I’ve pasted my entire file here so as to clear up as much as I can.  Basically you just need to add the intent-filter and its metadata elements.

Let’s make it more interesting!  As with our First Android App tutorial, let’s add some user interaction in Part 2.

First Android App – Part 6

My First Android App

Android Studio Tutorial by Marcio Valenzuela Santiapps.com
Android Studio Tutorial

Now we are going to receive the input of this message and use the button to send it.

To do so, edit your Button declaration to look like this:

<Button

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”@string/button_send”

android:onClick=”sendMessage” />

We are simply telling it to respond to the onClick button action by calling the sendMessage method.

So we must declare this method in code, of course.  Open your MainActivity.java file and add the following:

/** Called when the user clicks the Send button */

public void sendMessage(View view) {

// Do something in response to button

}

We are declaring a public method that returns void, is called sendMessage and takes a View type to be referenced locally as view.

In order to do this you will need imports such as:

import android.view.View;

Now we are going to have this method declare what is called an Intent.  An intent is an action that we wish to carry out.  We do so by inserting this line into the method:

Intent intent = new Intent(this, DisplayMessageActivity.class);

Here we create a ‘new’ intent for this class to call the DisplayMessageActivity class and we assign it to an Intent type called intent! 🙂

Ok great, but what is this intent going to do?!  Add this code right below:

EditText editText = (EditText) findViewById(R.id.edit_message);

String message = editText.getText().toString();

intent.putExtra(EXTRA_MESSAGE, message);

First we get a reference to our EditText and assign it to a new variable called, rightly so, editText.  We get to our EditText view by finding the view through its id, which is edit_message.  Now we get that editText object and call its getText method concatenated to its toString method.  This converts the editText’s text value into a string.  We are assigning it to a String type variable called message.

Finally we call an intent object’s putExtra method to send that message variable along with an EXTRA_MESSAGE value.

You need 2 more imports here:

android.content.Intent

android.widget.EditText

Now let’s define the EXTRA_MESSAGE inside our MainActivity by adding this line right below the MainActivity public class declaration:

public class MainActivity extends Activity {

public final static String EXTRA_MESSAGE = “com.example.myfirstapp.MESSAGE”;

}

Now add the line that actually calls the new activity and your code should look like this:

public void sendMessage(View view) {

Intent intent = new Intent(this, DisplayMessageActivity.class);

EditText editText = (EditText) findViewById(R.id.edit_message);

String message = editText.getText().toString();

intent.putExtra(EXTRA_MESSAGE, message);

startActivity(intent);

}

Let’s create the second activity by right clicking on our java folder and selecting new Android Activity like so:

Screenshot 2014-02-08 15.49.32

Once again select a Blank Activity, the click Next.  Now fill in the following window as follows:

Android Studio Tutorial Adding New Activity by Marcio Valenzuela Santiapps.com
Android Studio Tutorial Adding New Activity

The Activity Name is self explanatory.  The layout file name is provided for you as are the others but remember that we are not using fragments.  So replace the fragment name again, with the same value as above in the Layout Name.  Leave the Title as is but for Hierarchichal Parent add in the name of the calling activity (MainActivity) preceded by your package name (which you can find in the AndroidManifest.xml in case you forgot.

Also remember to remove that fragment method created by default, Only If Its There!

Trim off some other unused stuff so that the final code looks like this:

public class DisplayMessageActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_display_message);

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case android.R.id.home:

NavUtils.navigateUpFromSameTask(this);

return true;

}

return super.onOptionsItemSelected(item);

}

}

We are doing the same thing here, which is call super.onCreate just to make sure something gets created.  Then we set the content view to be connected to this activity’s layout file.

Go to your strings.xml file and add a new string like so:

    <string name=”title_activity_display_message”>My Message</string>

Whenever we create a new activity we must declare it in the AndroidManifest.xml file.  Ours should now look like this:

<application … >

<activity

android:name=”com.example.myfirstapp.DisplayMessageActivity”

android:label=”@string/title_activity_display_message”

android:parentActivityName=”com.example.myfirstapp.MainActivity” >

<meta-data

android:name=”android.support.PARENT_ACTIVITY”

android:value=”com.example.myfirstapp.MainActivity” />

</activity>

</application>

Here we added the DisplayMessageActivity activity and its label as well as its parent.

So with our new activity created and the intent from the calling class, we now need to receive that intent in the new class.  Here is the code:

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// Get the message from the intent

Intent intent = getIntent();

String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);

// Create the text view

TextView textView = new TextView(this);

textView.setTextSize(40);

textView.setText(message);

// Set the text view as the activity layout

setContentView(textView);

}

We again create an Intent object and get the message from the MainActivity.  We then get a TextView reference, set its text size and set its text property to that in the gotten message.  Finally we set the content view to what it needs to be now.

Voila!  Build & Run and enjoy your first android app.