Direct Link To HoneyGram In The Android Market

I have been doing incremental updates to HoneyGram the last couple of months and just recently got my hands on a Galaxy Nexus as well as GoogleTV 3.1 update, so I spent a few hours tweaking the app to support those platforms.  Upgrading was fairly painless with most tweaks going to layout and resource xml files and simply needing to include a layout-xlarge/ resources-xlarge with tablet specific resources and then tweaking the standard layout/ and resource/ directories to support both phone and television devices.  HoneyComb apps show up automatically for ICS in the Android Market and GoogleTV apps only need a few tweaks to be visible by those devices.

A few issues I ran in to:

1. A webview inside of a DialogFragment gets full screened in ICS so when redirecting back to the app it launches a new Main Activity even though I had launchMode=”singleTop” I fixed this by switching it to launchMode=”singleTask”
2. The text color for tab navigation labels are a little tricky to change.  I needed two sets of values/styles.xml  since ICS displays tabs on the line under the ActionBar the color used is the background of the main activity instead of the action bar.  I ended up having white on white text to background on phones and white on brown on tablets, but this was easy to fix by specifying a special values-xlarge/ resource directory with tweaked colors and text sizes.
3. Still having trouble getting the StackView widget to display and scroll properly on GoogleTV. StackViews inside of normal Activities don’t seem to work with the GoogleTV keyboard.
4. In order to have your app show up on the GoogleTV market you need to set the following in your manifest:<uses-feature android:name=”android.hardware.touchscreen” android:required=”false”/>

   You also can’t use GPS permissions since GTV’s do not have GPS chips (that I know of) so remove Permissions.ACCESS_FINE_LOCATION  and any GPS_PROVIDER code you have.

5. Make sure you use the OnSelectedItemClicked listeners for ListView/GridViews or arrow and enter buttons on GoogleTV will not work properly.
6. GridViews with ImageViews in them are difficult to size and layout properly, I am ending up with whitespace inbetween my columns that make the interface look funny, still working on fixing this.
7. Enable system level cache for Http Requests using the information on this page.  Seems to slow down things a little on ICS but it may just be my connection conditions.

Direct Link To HoneyGram In The Android Market

I’ve been meaning to learn all of the new Android 3.0(Honeycomb) APIs but due to the emulator being excrutiatingly slow(understandable as it is emulating an actual system image, unlike the iPad simulator that is basically just running an OS X app in an iPad shaped window), and not wanting to shell out money for a data plan, I have had to wait to get my hands on a Xoom Wifi.

For my first Honeycomb application I wanted to create an app that took advantage of the form factor, processing power, and faster network connection of the device. I also wanted something that could exercise all of the new APIs and UI widgets that are included in Honeycomb. I had been dabbling with the Instagram API and figured an image browser would take advantage of all of these features.

Popular images

The application allows everyone to view the popular feed on instagram, as well as query images nearby your location, and search through tagged images. If you have an Instagram account the fun really begins. Authenticated users can view their friend feed, their own pictures, favorite images, comment on images, and follow/unfollow other users.

The Instagram API uses OAuth 2.0 which was a snap to implement compared to OAuth 1.x! It also has a rate limit on how many queries can be made per key(users that are not logged in all share the same key, which can cause problems if the app gets popular). I created a simple app using App Engine that uses the memcache API to cache query results for a period of time.

Nearby Images

As for building the app itself, Honeycomb provides a nice default theme and widget set up that makes building your app quick and good looking right out of the box. Setting up a tabbed application with menu actions and subsections is a snap using the ActionBar. I decided to use fragments as much as possible as it seemed like the most difficult new API to grasp. After some trouble with Activity/Fragment lifecycles I got the hang of things and found it to be an incredibly powerful new set of tools. I found Fragments to be a mixture of an activities, views, and services. The activity portion is because of the various lifecycle methods and considerations. Views because much of the fragment lifecycle involves view creation/modification. Services because you have to go through the FragmentManager to manipulate fragments. You should never try to interact with a fragment through something like an instance/class variable.

Image Detail

One of my favorite features is the Image AppWidget. It uses the new StackView widget that provides a really nice looking and animated “stack” of views that automatically scroll and also let the user interact with through touching and dragging. HoneyGram lets you add an Image widget for popular, friend, self, and tag feeds. I also found that you could use the StackView in normal application layouts, although I plan on developing some other ways to visualize images.

AppWidget Dashboard Overkill!

Another feature I am proud of is the “interactive” surface view. This view uses OpenGL ES to present any set of images in a randomly generated “pile.” The user can then use multitouch to move, rotate, bring to top, and hide any of the images. Users can then save their work in the Gallery as well as share the image through any app on Android that allows image sharing.

Interactive Surface

Instructions

Uptake?

Overall I had a really positive experience developing this application, but there are some issues with the Android Market that are preventing this app from reaching its target audience(people that own Android tablets).

The biggest issue is that there is no way to filter applications that are designed specifically for Honeycomb from within the Android Market application. The only Tablet specific applications are in the “Featured Tablet Applications” list and that only contains 30 or so applications(most of which are just games that have been tweaked to work on the larger screen). When you view other application categories it gives you a list of all the available Android applications in that category. Anyone who has released an application on the Android Market knows that the “Just In” section of any category cycles so quickly it is practically impossible for anyone to see your application in that list.

Now I can understand that there simply aren’t enough Honeycomb specific applications to warrant a “Recent Tablet Applications” section but it is still difficult to find any outside of the featured apps. Tablet applications will also never be able to be in the Top Paid/Free Applications sections because they will never get enough sales/downloads as their phone counterparts.

Another big issue is that users cannot directly rate or review applications through the Honeycomb version of the Android Market. I admit I spent a good amount of time mindlessly tapping each part of my application description trying to find the right widget to rate and review. It turns out you can leave a review and rating(but not just a rating) through the web interface for the Android Market

I am still really excited about Honeycomb and designing and developing applications for Android tablets, but I am going to hold off on releasing any new applications until a) there are more devices in circulation and b) the Android Market improves its tablet sections

Gallery:

I have released a simple casual game on the Android Market. I decided to make a quick game while between jobs to see how the market has changed since I released my last game about a year ago. I decided to dust off a 2D OpenGL ES engine I wrote about a year and a half ago. It also uses custom Box2d JNI bindings and the Android NDK for physics. I have also integrated the new Android LVL licensing system, OpenFeint leader boards and achievements, and obfuscation using Proguard. It is designed specifically for hdpi devices and I am excited to see how it works on some of the upcoming Android tablets.

One snag I hit was when obfuscating with Proguard and having classes with JNI methods, these classes need to be “kept” by the proguard config file so that the method names and package still match the JNI headers and native source compiled by the NDK:

-keep class com.awalkingcity.casual2d.box2d.Box2DContext {;}

Another thing I am attempting to do is limit which devices can see the app in the market. The app was designed for HDPI screens as well as devices with faster processors than some of the first generation Android devices. Limiting by screen size does not work because the phones I am trying to target report both Medium and Large. So what I tried doing was adding “uses-feature” android:glEsVersion=”0×00020000″. My reasoning is that faster hdpi devices support OpenGL ES 2.0 while slower devices do not. I am not sure whether some of the custom ROMs out there hack OpenGL ES 2.0 support into the older devices or at least spoof support for it.

I am going to update this post with a couple of more tips and tricks I encountered while developing this game.

Here is the market description and some screen shots:

Monkey Fill is a simple and addicting physics game!

The goal is to fill the screen with monkeys while avoiding the bouncing green balls.

Hold down and drag your finger to grow monkeys.They will stop growing if they touch another monkey or pop if they hit a ball.

After one day of being on sale it became very obvious a free version is needed to drive sales of the full version, so I created a limited free version, we will see how well it does in the sea of free apps in the market.

Here is the OpenFeint listing: Monkey Fill

As I mentioned in my previous post I have been working through  the OpenGL ES 2.0 book and have been porting many of the examples to Android. I am going to go through some of the progress I have made so far.

Besides getting the various Android side of things set up the biggest annoyance I found was that all of the shaders in the examples were hard coded.  They all look something like this inlined in the code:

GLbyte vShaderStr[] =
"attribute vec4 vPosition;    \n"
"void main()                  \n"
"{                            \n"
"   gl_Position = vPosition;  \n"
"}                            \n";

GLbyte fShaderStr[] =
"precision mediump float;\n"\
"void main()                                  \n"
"{                                            \n"
"  gl_FragColor = vec4 ( 1.0, 0.0, 0.0, 1.0 );\n"
"}

Obviously this makes it fairly difficult to edit and test shaders in an external program so the first thing I did was create a mechanism to load a shader from the res/raw/ resource directory, drop it into native code, and compile/link into a shader program .  These code snippets should get you started:

In Android/Dalvik land load a shader into a string:

String vShader = readFileAsString(GL2JNIView.this.getContext().getResources()
.openRawResource(R.raw.vshader));

Send the string to native land and load it into a character array, compile/link the shader program, and free the pointer:

char *vertexShader = env->GetStringUTFChars(vShader, 0);

//load shader program

env->ReleaseStringUTFChars(vShader, vertexShader);

Here is a quick overview of some of the examples I have been working on, screen shots are straight from my Nexus One:

The mighty spinning cube demo, with a simple vertex and color fragment shader.  One major difference between ES 1.x and 2.0 is that all of the transformation functions have been done away with, instead you must manually manipulate a matrix and pass it into the vertex shader and multiply all the vertices by this matrix, fortunately the ES 2.0 book sample code comes with functions that map the old functions to the new approach.

Here is the multi texturing example from Chapter 10 of the ES 2.0 book, multitexturing becomes a fairly simple formula which is performed inside of the fragment shader.

The Cube Map texturing example from Chapter 9 of the book.  ES 2.0 provides a straight forward method for rendering things like reflections on objects by using a cube texture map.

This is a shot of the Particle System demo from Chapter 13 of the book.  It is difficult to get a good screen shot of all of the particle movement.  All of the particle parameter are passed into the shaders and calculations are performed by the GPU.

One of the first things I wanted to do after I got done with the basics was to load a textured .obj model in dalvik/Android and load it into native code and render it using vertex/fragment shaders.  This is a sample model from this very cool OpenGL ES android tutorial/project.

The ES 2.0 book assumes that you already know how to do graphics programming with OpenGL as well as program Shaders , so I have been using many other resources for learning GLSL and graphics programming in general.  I have found that the best resources are usually just OpenGL books from 5 years ago.  This is an example of a sepia filter from this great book: Shaders For Game Programmers And Artists.  The flag also waves using a simple sin() method on the z coord in the vertex shader.

This is a simple 4-sample blur shader from the above book.

This is my attempt at creating a motion blur shader. It renders the cube to a Frame Buffer Object then interpolates between a previous frame.  I haven’t gotten it to perform the proper blending of the two frames but I am pretty close to getting it to work.

Per-Pixel Lighting

I have been trying to get the per pixel lighting example from the ES 2.0 book to work but unfortunately they only provide the Shaders and a RenderMonkey workspace which leaves out some fairly crucial elements for actually getting it to run in code.

Next up I want to get familiar with all the various lighting effects you can do with shaders.  Shaders provide a much more flexible lighting model than the fixed function lighting options in ES 1.x, but it also makes doing lighting not as straight forward as it was.  After that I would like to put together some scenes and maybe get a simple game engine going with flexible shader options.

Here is a fur shader I made a while ago, I am having a hard time remembering the details of the implementation but it is based off of this post.

* Update: r3 of the Android NDK has been released with OpenGL ES 2.0 support get it here *

The Motorola Droid and the Nexus One are the first Android phones with graphics hardware that support OpenGL ES 2.0.  Developers have not yet had access to the advanced graphics API in the latest Android SDK/NDK , but it looks like official support for ES 2.0 in the Android NDK is imminent as the latest NDK code in the Android Open Source Project includes the libraries needed to access the OpenGL ES 2.0 API.  If you are impatient like I am and would like to dip your toes into the strange world of vertex and fragment shaders,  here is a quick way of getting OpenGL ES 2.0 support up and running in the current release of the Android SDK. ( This has been tested on OS X and a Nexus One, I would imagine it would work with Linux and the Droid too, no idea about Windows)

The first step is to download the latest Android source code from AOSP.  The project we are interested in is in: development/ndk.  Copy the ndk directory wherever you want.  The NDK is  missing the platform specific ARM toolchain binaries so we are just going to get those from the 1.6 release of the NDK which you can find here.  Copy the build/prebuilt/  directory of the 1.6 NDk to the build/ directory of the 2.0 NDK.

The next step is to run the host-setup.sh script in build/

sh build/host-setup.sh

After the set up script runs we are ready to build the sample hello-gl2 that conveniently comes with the new NDK.  This project contains all the code you need to set up the application and native parts to support ES 2.0.

make APP=hello-gl2

This will compile all of the native code and copy the binary to the libs/ directory of the Android project.

After this is finished we can build and install the application found in apps/hello-gl2/project/ onto our Android 2.0+ device and see ES 2.0 in action!

Pretty awesome right?  I will save actual OpenGL ES 2.0 walkthroughs for later as I go through the ES 2.0 book, but the source included in the hello-gl2 project should be enough to get you started.  Obviously this is all unsupported and unofficial and you should more than likely not release apps using these APIs onto the market until the Official SDK is updated.

You certainly wouldn’t want to release a Live Wallpaper using this code because it would probably get 1 star as most users are unimpressed that you got ES 2.0 working

By far the most popular post on this blog is the one regarding using OAuth and Java. At that time OAuth, was still fairly new and I was interested in using the Java implementation with some Android applications I had been working on. The Java reference implementation was new, difficult to build, sparsely documented, and the API was confusing to say the least. Months passed and very little was done to the library. I would probably attribute this to the lack of OAuth enabled web services. Public key signing was added eventually, but when Android upgraded to HttpClient 4.0, it broke compatibility with the original OAuth library. A ported version was eventually added to the repository by Sean Sullivan but the library was still fairly difficult to use. I, like many people, swore that I would eventually get around to eventually writing a Java OAuth library that was straight forward and easy to use.

Fortunately for us, Matthias Kappler has written an excellent library called Signpost that uses the standard Java URL class, and also supports HttpClient requests. Signpost does not attempt to perform both signing and requesting like the original library and focuses solely on token acquisition and request signing, which really should be the key parts of any implementation. There are many examples of using Signpost with a number of services, including Twitter and using the new OAuth 1.0a spec that addresses the vulnerability found in the OAuth spec recently.

You can go to the google code site to check out the library and the basics of token request and authorization (including the new “pin” authorization), but I will show you some quick code to perform a status update request with Twitter. This code assumes that you have a valid access token and secret.

Update the user’s status using URL:

       OAuthConsumer consumer = new DefaultOAuthConsumer(
                "yourappkey",
                "yourappsecret",
                SignatureMethod.HMAC_SHA1);
        OAuthProvider provider = new DefaultOAuthProvider(consumer,
                "http://twitter.com/oauth/request_token",
                "http://twitter.com/oauth/access_token",
                "http://twitter.com/oauth/authorize");
        consumer.setTokenAndSecret(AUTH_TOKEN,TOKEN_SECRET);//load these from a db or file
        URL url = new URL("http://twitter.com/statuses/update.xml?status=" + URLEncoder.encode("test one two three"));
        HttpURLConnection request = (HttpURLConnection) url.openConnection();
        request.setRequestMethod("POST");
        consumer.sign(request);
        request.connect();
        if(request.getResponseCode() == 200)
           return true;
       else
           return false;

Performing a status update using HttpClient, assumes mClient is an already initialized HttpClient and excludes exception handling code:

       OAuthConsumer consumer = new DefaultOAuthConsumer(
                "yourappkey",
                "yourappsecret",
                SignatureMethod.HMAC_SHA1);
        OAuthProvider provider = new DefaultOAuthProvider(consumer,
                "http://twitter.com/oauth/request_token",
                "http://twitter.com/oauth/access_token",
                "http://twitter.com/oauth/authorize");
        consumer.setTokenAndSecret(AUTH_TOKEN,TOKEN_SECRET);//load these from a db or file
            Uri.Builder builder = new Uri.Builder();
            builder.appendPath("statuses").appendPath("update.json")
                    .appendQueryParameter("status", status);
            Uri man = builder.build();
            HttpPost post = new HttpPost("http://twitter.com"  + man.toString());
            consumer.sign( post);
            HttpResponse resp = mClient.execute(post);
            if (resp.getStatusLine().getStatusCode() == 200) {
                    return true;
                } else {
                    return false;
                }

Hopefully you will also find Signpost to be as useful as I did. I was able to migrate my twitter application from using basic authentication to using OAuth with Signpost in an hour compared to the hours of pain spent trying to use the original implementation.

Twitter recently made a streaming API available that allows developers to get real-time status updates using HTTP streaming. You can read about the specifics of the API here. There are a few different levels of streaming that developers can use, most of the more heavyweight streams require explicit permission and some kind of agreement with Twitter. Streams are available in JSON and XML, you can also get a delimited stream which tells you how many bytes each status uses to make I/O a little easier. I am going to show you how to use Apache HttpClient 4.0 and the XPP XML Pull Parser library to write a simple client to consume the publicly available “spritzer” stream.

Setting Up The Client
The first step is to set up the HTTP client. The API uses your twitter username and password with basic authentication to authenticate. We will configure our HttpClient with our twitter user name and password as the credentials for the “stream.twitter.com” scope.

        HttpParams params = new BasicHttpParams();
        HttpProtocolParams.setVersion(params, HttpVersion.HTTP_1_1);
        HttpProtocolParams.setContentCharset(params, "utf-8");

         SchemeRegistry registry = new SchemeRegistry();
        registry.register(new Scheme("http", PlainSocketFactory.getSocketFactory(), 80));

         ThreadSafeClientConnManager manager = new ThreadSafeClientConnManager(params,
                registry);
        DefaultHttpClient client = new DefaultHttpClient(manager, params);

        client.getCredentialsProvider().setCredentials(new AuthScope("stream.twitter.com", 80),
                new UsernamePasswordCredentials("username", "password"));

Requesting And Parsing
Next we will create the Get request for the “spritzer” stream and perform the request. After that we will open a pull parser on the network stream and “pull” the xml from the stream as it comes in.

Each status update comes in the format:

<?xml version="1.0" encoding="UTF-8"?>
<status>
....
</status>

It is important to note that each status has the xml document tag at the beginning.

Most of the parsing code is the result of a lot of trial and error so it is not the prettiest. See the comments towards the bottom for some important comments about the implementation.

        HttpGet get = new HttpGet("http://stream.twitter.com/spritzer.xml");
        try {
            HttpResponse resp = client.execute(get);
            int statusCode = resp.getStatusLine().getStatusCode();

        if (statusCode == 200) {
                InputStream stream = resp.getEntity().getContent();
                XmlPullParserFactory factory;
                factory = XmlPullParserFactory.newInstance();
                XmlPullParser parser = factory.newPullParser();

                parser.setInput(stream, "utf-8");
                while (true) {
                    int event = parser.next();
                    if (event == XmlPullParser.START_TAG) {
                        String name = parser.getName();
                        if (name.equals("status")) {
                            String text = null;
                            String screenName = null;
                            while (true) {
                                event = parser.next();
                                if (event == XmlPullParser.START_TAG) {
                                    name = parser.getName();
                                    if (name.equals("text")) {
                                        text = parser.nextText();
                                    } else if (name.equals("user")) {
                                        String userName;
                                        while (true) {
                                            int eventUser;
                                            eventUser = parser.next();
                                            userName = parser.getName();
                                            if (eventUser == XmlPullParser.START_TAG) {
                                                if (userName.equals("screen_name")) {
                                                    screenName = parser.nextText();
                                                }
                                            } else if (eventUser == XmlPullParser.END_TAG
                                                    && userName.equals(("user"))) {
                                                break;
                                            }
                                        }
                                    }
                                } else if (event == XmlPullParser.END_TAG
                                        && parser.getName().equals("status")){
                                    break;
                                }

                            }
                            //output username and status to console, you will want to parse and dispatch whatever
                            //information you need to something that does something a bit more substantial

                            System.out.println(screenName + ": " + text); //insert money making method here

                            //IMPORTANT HACK
                            //because each stream starts with an <xml/> document tag
                            //we have to reset the input of the parser to the stream
                            parser.setInput(stream, "utf-8");
                        }
                    } else if (event == XmlPullParser.END_TAG
                            && parser.getName().equals("statuses"))
                        break;

                }

            }

        } catch (ClientProtocolException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (XmlPullParserException e) {
            e.printStackTrace();
        }

Here is the entire source you should be able to build it and run it in the console without many problems, but remember never try to actually read the stream.

Android 1.1 was released this week and included a voice search application as part of the update. Like most parts of Android the speech recognition functionality has been abstracted into sub tasks that use intents to perform specific actions. You can now call an intent that will launch the speech recognizer “application” and return to your application a list of results. The Intent and a description of it’s results can be found in the Android source code in the android.speech package. This library is not officially supported by the Android SDK and it should not be used in any consumer facing applications. That said you should also make sure to include “” in your application’s manifest file so that the app cannot be installed on a phone that doesn’t have the 1.1 firmware on it.

Here is the code for launching a simple speech recognition intent:

Intent intent = new Intent("android.speech.action.RECOGNIZE_SPEECH");
startActivityForResult(intent, 0);

The intent launches the voice recognition activity which prompts the user to speak into the phone, your speech is then analyzed and a list of results is returned in a bundle to your activity.

Here is the code for extracting the results:

@Override
	protected void onActivityResult(int requestCode, int resultCode, Intent data) {
		...code for checking resultCode and data intent...
	ArrayList<String> results = data.getExtras().getStringArrayList("results");

	}

As you can see this makes it very easy to add a speech recognition element to an application, although I am not sure whether or not this functionality will be officially supported in a future version of the SDK.

The G1 came out this week and I have been putting it through the paces. I really like the seamless transition between developing with the emulator and developing on the device. I think overall it is a very strong first device for Android, but I think that normal users may not recognize some of the more powerful features of the platform.

The Intent system allows for applications and activities to interact with each other, so that you can have applications using the features of other applications. I think this is a really interesting concept and think it could lead to a less application-centric view of phone operation towards a more feature-centric view. Instead of developing an entire application, developers can develop specific features that perform a very specific task. These features can be used by other applications to create new and interesting functionality.

I think the best example of this concept is Barcode Scanner. Barcode Scanner is the application specific manifestation of ZXing which I blogged about previously. Installing it lets you scan bar and QR Codes and lets you perform search actions or interact with the results(like an e-mail address or phone number). The two shopping applications CompareAnywhere and ShopSavvy use the ZXing library themselves for doing barcode scanning, but they include the ZXing library as part of their application bundle.

In my previous entry I mentioned that I would like to see specific Intents that let you use the encoding and decoding ability of ZXing from other applications and the ZXing team responded that the latest build had this exact functionality! Now all you have to do is install Barcode Scanner on your phone and your applications can take advantage of its features. Specifically, it provides Intents that allow your application to use the encoding and decoding functionality. The Intent mechanism makes it almost too simple to integrate this functionality into your application.

Encoding – “com.google.zxing.client.android.ENCODE”

To encode a string into a QR Code Simply create an Intent with the Decode action specified, two string extras specifying the Type and Data and call startActivity():

Intent intent = new Intent("com.google.zxing.client.android.ENCODE");
				intent.addCategory(Intent.CATEGORY_DEFAULT);
				intent.putExtra("ENCODE_TYPE", "TEXT_TYPE");
				intent.putExtra("ENCODE_DATA","HELLO WORLD");
startActivity(intent);

The string values for the Intents and the extras values can be found in the Intents and Content classes in the ZXing source code.

Decoding – “com.google.zxing.client.android.SCAN”

Bringing up the decoding camera interface is just as easy as encoding with the added step of having it return the decoded value of the barcode to our main application.

Intent intent = new Intent("com.google.zxing.client.android.SCAN");
				intent.addCategory(Intent.CATEGORY_DEFAULT);
				startActivityForResult(tent,0);

The big difference here is that we are using startActivityForResult which will allow the scanning activity to return the results of the scan back to our app. In the Activity that launched the decode intent we can extract the results of the scan in the onActivityResult method by simply accessing the string extra “SCAN_RESULT”.

data.getStringExtra("SCAN_RESULT");

You can now use these features to do all kinds of interesting things. I am currently interested in transferring data between phones by encoding the data in a QR code and having the other phone retrieve it by simply pointing it at the other camera’s screen. You could also encode movie ticket information into a QR code and have it displayed on the phone so it can be scanned at the theater.

I hope this post showed you how useful Barcode Scanner can be for your application and it’s users. Now if someone could do something about the reviewers in the android app store…..