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:
 
 
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&#8221;
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.

Glass Development Mirror API – Part 4 – Where to start after setting up!

So you have Glass and you want to develop apps for it?

You already have an IDE such as Eclipse or Android Studio to code your apps in, you know all about adb and Droid@Screen to view your Glass screen on your computer screen!

Google Glass GDK vs Mirror API by Marcio Valenzuela Santiapps.com
Google Glass GDK vs Mirror API

Well you do have options, before jumping into your typical Hello World Glass app.

As with other platforms like iOS, you have the option of native apps and web based services apps.  This last option is basically an app that runs on a server(s) and interacts directly with your device (be it Glass or iDevice) by sending it information.

Native – GDK – Apps

These are the ones that you code for in Android and install on your Glass device.  These are covered in the Hello World Tutorials for Glass elsewhere on this site.

Web Based – Mirror API – Glassware

These are web based apps.  They will be the subject of this post for today.

If you don’t know much about web services, you have come to the right blog!  I have some experience with web services, which just means writing applications on a server, usually in php or python.  I barely picked up some php a few years back, so I feel sorta comfortable with it.  So if you go to:

https://developers.google.com/glass/develop/mirror/quickstart/index

You will see this is a Quickstart Project page for Glass Mirror API.  You can download a starter project in any language you feel comfortable with.  I chose php for the reason I mentioned earlier.  What a web service starter project means is, its a folder with some code files inside.  Its not like a normal Hello World project you would download for native apps where you run the project from the IDE.  In the case of software as a service apps (Saas) you usually have to do 2 things with a starter project like this:

  1. Download it to your computer and re-upload it to a server somewhere (yes, you’ll need a server or server hosting online)
  2. Modify a configurable or settings file somewhere to make it work on your server

So download the project that you feel more comfortable with.  If you don’t have a preference then Id suggest taking a free python or php course somewhere, at the most basic level, and then returning to this tutorial.

Ok so this was my first mistake.  Im not a server admin or anything close to it.  I do have a free account on a more or less sophisticated server (MediaTemple) and I thought I’d download the project and upload it to that server and run it there.  Ill make a long story short but basically after failing there, I tried Brinkter and then a free online hosting company but I always ran into trouble.  So here is the scoop:

  • You will download the project contained in a folder called mirror-quickstart-php-master
  • You would upload it to a server
  • You would configure the settings for it & run it by accessing that URL in a browser

Sounds simple huh?  It turns out I chose a php project.  The project also required sqlite which in my case was not preinstalled on my MediaTemple server.  Which meant I had two options, migrate my test account and everybody else in that account to a new server with sqlite already installed.  I was not allowed to do this for fear of extended down times and possible misconfigurations in the new server.  Or I could re-compile PHP on the entire existing server which would also cause issues for sure.  Recompile what?!  No way, that was not for me.

The easiest solution if you just want to work with Glass Mirror API is to simply run it on your local machine and worry about uploading to a production server once you have something real going. Luckily, Im on a mac.  This meant that most of the stuff I needed was already installed and I just had ton configure it to run.  Here is what I needed:

  • Apache Server – comes installed with Mavericks
  • PHP – also comes installed with Mavericks
  • SQLite – also seems to have come installed with Mavericks by virtue of PHP 5.4

Cool so I just had to:

  • Activate Apache:

Open up Terminal and type:

sudo apachectl start

To test if it works, simply point Safari to:

http://localhost

and you should get a white page with black bold letters reading:

It works!

Great!  {You can optionally customize your apache server to store files elsewhere and use virtual directories: http://brianflove.com/2013/10/23/os-x-mavericks-and-apache/}

  • Next PHP must be configured:

Again in terminal type:

sudo nano - c /private/etc/apache2/httpd.conf

This opens up a text editor called nano to use line numbers “-c” as sudo user, and opens the file httpd.conf for editing.

Scroll down to the approximate line 118 and uncomment the following line:

LoadModule php5_module libexec/apache2/libphp5.so

And approximately on line 231 add this line underneath the index.html line:

DirectoryIndex index.html index.php

Finally append this code block at the very end of  that file:

#PHP Settings
<IfModule php5_module>
    AddType application/x-httpd-php .php
    AddType application/x-httpd-php-source .phps
</IfModule>
Now you are ready to save.  Hit Control-O to Write Out the new file, then it confirms if you want to save the httpd.conf file, Hit Enter and then Control-X to Exit.
  • Code! (Quickstart project)
Almost there!  Now you just have to move that downloaded folder to MacIntoshHD/Users/youruser/Sites folder.  If the folder doesn’t exist, just create it.
Once that folder is in place you modify the config.php file with the values you get from creating a ClientID at
cloud.google.com/console
and in APIs Turn ON the Glass Mirror API and finally in Credentials create a New ClientID with these features:
Some Name of your choosing
Type: Web Application
Javascript Origins: http://localhost
Redirect URIs: http://localhost/~youruser/mirror-quickstart-php-master/oauth2callback.php

[NOTE: There may be an omitted step here, depending on your setup.  In my case, Im using the default folder for my webroot as created by Mavericks for Apache.  The original setup is that the webroot as can be seen in the httpd.conf file is “/Library/WebServer/Documents”.  This means that whatever I put in that folder will be loaded and displayed when I browse over to http://localhost.  I created a username.conf file which is placed in the /etc/apache2/users/.  That file has the following content:

<Directory "/Users/youruser/Sites/">
Options Indexes MultiViews
AllowOverride All
Order allow,deny
Allow from all
</Directory>

which basically allows me to now use http://localhost/~youruser and the files it points to are not in your /Users/youruser/Sites folder created earlier.]

Now point your browser to:
Voila!

First Android App – Part 5

My First Android App

 

Android Studio New Main Layout First Android App Tutorial by Marcio Valenzuela Santiapps.com
Android Studio New Main Layout First Android App Tutorial

Android is based on Java much like iOS is based on ObjectiveC.  If you are coming from an iOS background, itll be a bit jarring at first.  Even though ObjC “comes from” C, C formats are a bit different.  So I thought Id start with that first.

ObjC:

[myObject methodForDoingThis:someParameter];

is a method call which refers to this declared method:

-(void)methodForDoingThis: (id)someParameter{

//1. Take the passed in parameter

//2. Do something to with that parameter value

//3. Call some other method…

//4. Or if this were a method that returned an object instead of void

//4. Return a new object value

}

C:

myObject.methodForDoingThis(someParameter);

is a method call which refers to this declared method:

public methodForDoingThis void (id someParameter) {

//1.-4. Same as above

}

So this might throw you off a bit.  Add to that the fact that their IDE, be it Eclipse or AndroidStudio (or others), or rather their project files are a little less UI-friendly.  What I mean is that where in Xcode you have editable code files in Objective C and either a storyboard or NIBs to deal with UI stuff, in Android IDEs you have an AndroidManifest.xml, various layout.xml files and AndroidActivity.java files as well as a few other ones.

Ok, let’s get started with this Hello World App.

First Android App

First let’s create a New Project in Android Studio:

Android Studio New Project First Android App Tutorial by Marcio Valenzuela Santiapps.com
First Android App Tutorial

Here you can give it an Application Name in natural language, this means with spaces or what not.  This is the human readable name.  Then give it a Module Name which is recommended to not have spaces or strange characters other than alphanumerical characters.  Finally create a package name which is in reverse domain notation (com.something.app).  That something can you be company name or just your name.

In the above example we are actually creating an Android Glass project for Google Glass.  The idea is the same, but for this Android App, select API 15 as all three, Minimum, Target && Compile.  Leave the Theme as is and click on Next.

You will be asked about launch icons and just click Next.

Android Studio New Project Launcher Icons First Android App Tutorial by Marcio Valenzuela Santiapps.com
Android Studio New Project Launcher Icons First Android App Tutorial

You will get another screen about Activities, just leave Blank Activity.

Android Studio New Project Blank Activiy First Android App Tutorial by Marcio Valenzuela Santiapps.com
Android Studio New Project Blank Activiy First Android App Tutorial

Finally you might get this window:

Android Studio New Project Fragment Layout First Android App Tutorial by Marcio Valenzuela Santiapps.com
Android Studio New Project Fragment Layout First Android App Tutorial

Here make sure to make that one change, just to make things easier.  We must also remove the MainActivity.java fragment method later.

Once this is done, remember to go ahead to the MainActivity.java class and open it.  We are going to remove one method in here:

public static class PlaceholderFragment extends Fragment {

public PlaceholderFragment() {

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View rootView = inflater.inflate(R.layout.fragment_main, container, false);

return rootView;

}

}

Finally you should see a screen much like this:

Android Studio New Main Layout First Android App Tutorial by Marcio Valenzuela Santiapps.com
Android Studio New Main Layout First Android App Tutorial

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!

You can run the app now, it won’t do much, but its an app J.

  1. MainActivity is selected and displayed in the editor window.  This contains your default, boilerplate/template created MainActivity Class required for any app.
  1. 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.
  1. 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.
  1. 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.
  1. 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.
  1. The tabs display whatever files you have double clicked on the File Window on the left.
  1. 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!
  1. The Run button is of course the one used to build and launch the app in the emulator or device.
  1. 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!

Layout Files

These determine where and how objects will be laid out onscreen.  Check out activity_main.xml and make sure it has this:

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;

xmlns:tools=”http://schemas.android.com/tools&#8221;

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:orientation=”horizontal” >

</LinearLayout>

This simply tells us that we are using a Linear type layout.  And that the width and height should be stretched out to match whatever the parent is.

Now let’s actually add something onscreen by adding this code at the end of the last line but just before the </LinearLayout> closing tag:

<EditText android:id=”@+id/edit_message”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:hint=”@string/edit_message” />

Ok, now we added an editable text field with id = edit_message which wraps its content and has a hint of placeholder text = whatever is in the edit_message string.

So what IS in the edit_message string?  Well, open your values folder and double click to open strings.xml.  You will see something like this:

<?xml version=”1.0″ encoding=”utf-8″?>

<resources>

<string name=”app_name”>My First App</string>

<string name=”edit_message”>Enter a message</string>

<string name=”button_send”>Send</string>

<string name=”action_settings”>Settings</string>

<string name=”title_activity_main”>MainActivity</string>

</resources>

As you can see here we have a string value for app_name, edit_message, button_send & action_settings.  You probably don’t have button_send but you will add it soon if you don’t.  This is a globally accessible xml values file.  Whenever some object looks for a string with an identifier, such as @string/xxx, it will fetch whatever is in that strings.xml file at that identifier location.

Nothing Magical here, just an app_name global identifier, a placeholder hint for the editable text field we added, one for a button and another for an action_settings action tool bar button.

So let’s add the button by going back to activity_main.xml and adding this code after the EditText block but again, before the closing </LinearLayout> tag:

<Button

        android:layout_width=”wrap_content”

        android:layout_height=”wrap_content”

        android:text=”@string/button_send” />

This should be pretty easy to understand.  This time we are adding a button with its text property set to the string value for button_send.  If you don’t have that button_send string in your strings.xml then add it in now.

Compile and run and you should see this:

Android Studio New Main Layout First Android App Tutorial by Marcio Valenzuela Santiapps.com
Android Studio New Main Layout First Android App Tutorial

As you can see they are ONLY as large as they have to be.  Both the EditText and the Button objects are only as large as their content is.

The only problem is that the text in the EditText field is, well, editable, thus it could grow longer or shrink.  We must make a small adjustment to account for this by modifying some properties of the EditText object:

<EditText

android:layout_weight=”1″

android:layout_width=”0dp”

… />

This means only add or edit the fields shown here (the rest, …, stays as is).  The layout_weight property states how much space the EditText field should take up relative to those objects around it.  So basically if EditText is 1 and Button is 1, the total is 2, out of which each will take half.

The final layout should look like this:

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;

xmlns:tools=”http://schemas.android.com/tools&#8221;

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:orientation=”horizontal”>

<EditText android:id=”@+id/edit_message”

android:layout_weight=”1″

android:layout_width=”0dp”

android:layout_height=”wrap_content”

android:hint=”@string/edit_message” />

<Button

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”@string/button_send” />

</LinearLayout>

Build & Run and see your app in all its splendor! Remember to check out Part 2 for a little user interaction before we move onto building Google Glass apps!

Google Glass – Part 2 – Pros & Cons

Google Glass Pros & Cons by Marcio Valenzuela Santiapps.com
Google Glass Pros & Cons

In the first review I covered basically what Glass is and what its not, what it can & can’t do.

Now on to usability!

PROS (IMHO)

  1. The biggest advantage in my opinion, is being able to interact with information without having to look down like a zombie.  Or more importantly, not just the fact that we all look like zombies throughout the day, constantly checking our phones.  Because of course some will argue we are “Glassholes” or look like morons wearing these glasses.  But if you’re a true techie, you don’t care how something looks, you care about what it can do.  Its very comfortable to be able to get my information instantly, without getting distracted from what Im doing.  This goes for driving, talking, playing soccer even typing at a computer.  Its another screen for you to get your 21st century informational fix and more importantly its one you don’t have to grab and point at your face.  This makes Glass, in my opinion, the best wearable device that comes close to Star Trek type gadgets.
  2. Even though Glass apps (both Glassware & native) are currently very limited, as developers we have access to THE Glass team.  This means we are able to really sway which way this thing is going.  There have been quite a few iterations and a lot of functionality has been added and improved on.  Some apps being worked on are:
    1. Aside from single camera shots and continuous video, there is an app for adding long-time picture taking to compromise between the heavy long videos and a possibly mis-taken single photo.
    2. Barcode scanners
    3. Medical reference material
    4. There is a ShopGlass which lets you create shopping lists and take with you at the supermarket
  3. The handsfree & voice concept is ideal.  There are many times where I have found myself incapable of doing something because I needed to hold my phone.  So you come up with ideas of holding it in your mouth or putting it on top of something you are carrying.  Freeing up your hands for other tasks is great!

Now on to the CONS:

  1. Again, IMHO, the biggest #FAIL is the small screen.  Its big enough, sure, but it limits what you can do or rather, how well you can do something.  The voice-command menu is the starting point.  OTB Glass comes with about 4 or 5 commands.  You tilt your head up & down to scroll through that menu.  After a few more apps are installed which have voice-command triggers, that starting point list gets kinda long.  This is where voice commands will have to become a much more important channel for communicating with Glass.  Typically we use about 20 apps on our mobile devices every day.  Within those apps we perform about 3 common tasks every day.  That alone is about 60 commands.  That would be a long list.  A visually scrollable list of commands is not going to cut it.  Extending the screen to the size of glass lenses is not going to work either.  The whole idea of Glass is that its THERE but its not in the way.  Otherwise it becomes a hazard.
  2. Battery as with any mobile device is an issue.  It lasts about a day on a  single charge.  But then again it depends on how much you use it.  Not only that but it comes with its own charger.  So now I have to carry around an iPad, iPhone, Mac & Glass plus at least 3 different chargers.  The typical techie carries around at least an phone and a tablet.  Adding a 3rd device is an issue, unless it fully replaces one of those.
  3. Culture.  This is an odd one but important to mention.  Glass is meant to be worn, not hung around your neck like sunglasses.  This means they are to be worn at all times (well except in the shower perhaps & while sleeping {http://www.huffingtonpost.com/2014/01/21/google-glass-sex_n_4637741.html}).  In some places there is this culture issue about respect.  I don’t know about you guys, but when I go into an office or even meet with someone outside, I take off my sunglasses at least while I say hello.  I certainly don’t eat with them at the dinner table.  So what would be considered cool and intriguing in a US-tech-rich scenario, would be plain rude in certain places.  So there may be some generational gap there until us old geezers die off and newer kids grow up without those traditional ways of thinking.

So what do I use it for?  Whats my typical day?

I wake up and unplug them.  Oh because while they charge and if they have internet connectivity, they upload your images and videos to your private google account.  I put them on as part of my getting dressed ritual.  They’re with me while I drive and I can check stocks, weather and scores while I drive.  I get notifications while its sleeping on my face and I can just gesture to see what email just came in.  I usually don’t have it read aloud but I could if I ask it to.  So in that respect, its cool to know that my informational fix is quenched by simply knowing the sender and subject of a recently received email.

I keep them on while in the office but take them off if someone walks into the office.  I keep them on for errands but take them off for lunch.  Then put them back on for the rest of the afternoon.  Usually have them for my kid’s soccer practice for snapping pics.  I take them to solar installations with me to get ideas for the app Im working on.  I usually program with it as well when I develop iOS apps to get ideas for a programming app.  Then when I get home I take them off just because I want to rest.  Unless I decide to try a cooking recipe.

So as you can see, Im not yet a fully fledged Glass Explorer.  But I think its just a matter of time.

Google Glass & Android Series for Developers & Users

Google Glass & Android Series by Marcio Valenzuela Santiapps.com
Google Glass & Android Series

So I’ve gotten a little carried away with the Glass-Android thing.  My posts are as disorganized as my thoughts, so I thought I’d organize my posts a bit.  Here is the set of posts for Android & Glass Development as of Feb 15th, 2014:

  1. Google Glass Review – Part 1 – 什么 (shen me = what = what Glass is & isn’t)
  2. Google Glass Review – Part 2 – Pros & Cons
  3. Develop apps for Google Glass – Part 3 – Setting up!
  4. Glass Development Mirror API – Part 4 – Where to start after setting up
  5. First Android App – Part 5
  6. First Android App – Part 6
  7. First Google Glass App – Part 7 – Bridge to Glass App GDK Development
  8. First Google Glass App – Part 8 – Hello Glass!

The first 2 parts are more of a Curious George couple of articles telling people what to expect from Glass.  Everyone asks me what they are.  I end up telling people “its just a pair of sunglasses” or “its a computer” and of course they are speechless and I walk away quickly before a long discussion ensues.

The next 2 parts are for developing web service apps for Glass.  Glass can work with web based apps which run on a server and interact with Glass |OR| Glass can have native apps installed into it which it can run on.

The last 4 parts starting with First Android App and finishing with First Google Glass App, is a set of posts for learning how to create native apps for Glass.

Google Glass Review – Part 1- 什么

Developing apps for Google Glass by Marcio Valenzuela
Developing apps for Google Glass

I got my Glass a little late…but here is my review!

What they are?

You might think the answer is obvious, but its not.  Its a wearable computer but its not a full blown computer.  Does that make it less of a computer?  Not really, unless you consider ipads and iphones less than a computer because you can’t do ALL the things you can normally do on a full blown laptop.

What can you do with them?

Since we already mentioned you can’t do everything you can on a full blown computer, let’s talk about what we CAN DO!

Out of the box, Glass comes with a few commands such as those for taking pictures, recording video and a few others.  Out of these features, probably the coolest is taking pictures and videos handsfree.  This is very nice because holding the phone with a busy hand is a pain, not to mention keeping it pointed in the right direction the whole time.

Ok so we wouldn’t pay money to get a wearable camera right!?  So what else can we do?  Google Glass connects to the internet via a mobile device (for now) or through a wifi connection.  This way you can access the apps for Glass and ‘install’ them.  Install is a relative words nowadays because much the same way iOS and Android and Computer based apps are now native & web based, so are Glass apps.  As a matter of fact the first Glass apps were all web based, called Glassware!  They were web services you accessed online and interacted with to do certain tasks.  This is what developers had access to in the beginning.  Now you can actually make native apps for Glass using their new GDK.  This lets you do some pretty neat things like play games and others.

There is so much, Ill just list what you can do with certain apps:

  1. Mini Games (tennis etc.) actually work with your head movements
  2. Allthecooks is an app for following and creating cooking recipes
  3. Google Gmail for checking…mail
  4. Google Hangouts for…hanging out 🙂
  5. Twitter
  6. Facebook
  7. Strava is a really neat biking stats app

How do they work?

You can interact with Glass using a finger taps or a combination of gestures & voice commands.  Your first interface with Glass is the “ok glass” menu which is your starting point in a linear timeline of sorts.  The “ok glass” menu looks like this:

Google Glass Menu Review by Marcio Valenzuela Santiapps.com
Google Glass Menu Review

This is the main card.  It displays the time and the command to give to Glass.  Speaking “ok glass” gives you access to a voice-command launch menu.  That menu card looks like this:

Google Glass Menu Review by Marcio Valenzuela Santiapps.com
Google Glass Menu Review

As you can see there are some options such as getting directions, sending messages, making calls or taking notes.  These are default commands installed.  As you install new apps, new commands are sometimes added to this menu.  Not all new apps add commands, some apps simply send you notifications or new cards only when an event takes place.  These usually come from those web based or Glassware apps we mentioned.  Such as when you get a call or email.

The rest of the time, your Glass has a timeline which looks like this:

58f15e36aeb609df7c1bc8dc2cdd0ac8_articlex

As you can see from the image, Present & Future cards are to the left and Past cards are on the right.  You can swipe through this timeline back and forth.

This gives you an idea of how it works.  Now on to the neat things you can do.

Glassware & Native Apps

Some cool apps I consider useful are the Stock cards, weather cards and WorldLens.  The Stock & Weather cards are Glassware that run off of a concept I was unfamiliar with until a few weeks ago, called Google Now Cards.  These are cards you create yourself and only send you info when important information changes.  You can use them in the Google Now iOS app for example.

The WorldLens app is one that lets you point Glass at a text in a foreign language and it will translate it for you!

Allthecooks lets you look up a recipe while cooking and you can go through it step by step!

Other apps I know people are working on or are out there but I don’t use:

Driving robots using your head to gesture direction.

GolfSight is an app that helps you play golf, calculating distances and club selection.

Youtube for sharing your Glass videos.

Spellista is a sort of spelling game that you can play with other users.

Ill keep posting with new app ideas I hear from fellow programmers.  Its pretty exciting to be able to interact with the internet, hardware and information handsfree.  I am personally juggling ideas for Solar Installations and programming aides using Glass.

Who is Glass NOT for?

People who are clumsy!

Develop apps for Google Glass – Part 3 – Setting up!

Developing apps for Google Glass by Marcio Valenzuela
Developing apps for Google Glass

If you have experience in Android (Java) development, this will be even easier.

What you’ll need:

  1. Google Glass – to test your apps on
  2. Eclipse or Android Studio for coding
  3. Android SDK 15 & Glass Development Kit Sneak Peek (GDK)
  4. Configure adb

Glass

Well you either borrow a pair or get your own, but you will need Google Glass to test your apps.  The reason being that there is no Glass emulator as there is for Android as of yet.

Eclipse or Android Studio

Eclipse is the most widely known IDE for Android programming but its worth getting to know Android Studio, the new IDE for developing on Android & Glass. You can get it here:

http://developer.android.com/sdk/installing/studio.html

This is version 0.4.2 but there is a new build, 0.4.3 (Canary) to date of this publication.

Its ok if you choose Eclipse, the differences are minimal in general usage terms.

Android SDK 15 & GDK

If you’re used to iOS, where the IDE (Xcode) already includes the SDK, you’re in for a treat. In this case its necessary to manually get the SDKs; both API 15 as well as GDK. To do this you use the Tools menu & select AVD Manager:

Android Studio SDK Manager Glass GDK Sneak Peek by Marcio Valenzuela Santiapps.com
Android Studio SDK Manager Glass GDK Sneak Peek

Now you must pick the right SDKs. I recommend getting these options:

Android Studio SDK Manager Glass GDK Sneak Peek by Marcio Valenzuela Santiapps.com
Android Studio SDK Manager Glass GDK Sneak Peek

To install you must then click on Install Packages and individually Accept each license. This will take a while for the SDKs to download.

ADB

Now you’re ready to start programming, sorta.  You need the Android Debug Bridge, ADB.  This allows us to connect to Android/Glass devices and debug directly on them.  Again, if you’re coming in from an iOS environment you test on the iPhone Simulator and thats good enough to get started.  However, on Android, BELIEVE me, you DO NOT want to test on the emulator.  Both Eclipse and AS bring the AVD Manager, Android Virtual Device Manager which creates emulators in many configurations.  Just launching these can sometimes waste up to 15 minutes of your precious time.  This means that in a day of coding you can literally waste HOURS just waiting for the emulator to fire up.

Besides, as we mentioned, you can’t test Glass apps on anything but Glass devices.  So this is necessary.

Fortunately if you installed Android Studio, adb is already in Android Studio.app/sdk/platform-tools. If you’re on a mac you will need to add this path as an environment variable.  You might even need to create a symbolic link.  This is due to the fact that Android Studio is contained in one of these peculiar .app folders.  As you will see later, its hard to configure some neat development tools if you have files you need to get at, stored inside one of these .app packages.  You can inspect the application package in Finder:

Android Studio Package Contents Environment Variables Symbolic Links ADB Configuration by Marcio Valenzuela Santiapps.com
Android Studio Package Contents Environment Variables Symbolic Links ADB Configuration

In order to add an environment variable we first need to edit our ~/.bash_profile from terminal by doing this:

pico ~/.bash_profile

Now add the following line inside pico:

export PATH=/Applications/Android\ Studio.app/sdk/platform-tools:$PATH

this is assuming you installed Android Studio inside your Applications folder.

Now dab is accesible from any terminal.  So test it by opening a terminal and doing this:

adb devices

this should start the adb daemon and list all devices plugged into your USB ports which are in Debug Mode.

Finally, a cool dev tool is an app called Droid@Screen which can be used to display your Glass screen on your development computer screen.  you can get the latest version of it here:

http://droid-at-screen.ribomation.com/download/

The most current version was 1.0.2 to date of this publication.

In order to configure Droid@Screen we need to tell it where adb is.  The Android Studio.app folder structure we talked about is not recognized by most apps.  This it is necessary to create a symbolic link to our dab file. We can do this by using this command:

ln -s /Applications/Android Studio.app/sdk/platform-tools/adb /Applications/adb

which creates a symbolic link from the first URL via the second URL.  Now you can point your Droid@Screen configuration to this path.

You are ready to create Glass apps!

Any questions can be addressed to @santiapps.com