2014 Android design competition

Anybody interested in Android design should have a look at the results of Taylor Lings Android UIUX Redesign Challenge

Last year Taylor ran a similar Challenge and got some really great entries.  This year I decided to sponsor some additional prizes for the winners.

In my mind some of the standout entries are:

 

My Battery Saver

https://plus.google.com/110734967177394893462/posts/BB1tdGCYjts

1

While it is obviously inspired by timely, this entry reminded me that the kind of flat transparent style which timely used hasn’t really taken off much on Android.  It would be great to see more apps taking inspiration from this.

RunPee

https://plus.google.com/+Andr%C3%A9Goersch/posts/8qC8ukjGo7X

runpee_001---IntroThis is a very well thought out re-design of an app obviously in much need to some design love.  A lot of attention has gone into the design and the end result is great.

Dribble

https://plus.google.com/+ChrisBasha/posts/DcQakcBnW3z

Item

This is a very thoughtful design, which makes good use of Android design patterns to produce an elegant app.  Its not ostentatiously showy like some other designs, but the end result is a solid design which would be a pleasure to use.

TweetLanes

https://plus.google.com/+JamesJun/posts/4T7GNCX4veJ

Files

I knew James Jun would produce something special – he seems to have a knack for making crisp clear designs.  I particularly like the use of the 3 tabs in this app replacing the action bar.

Consulting work – Papercloud

In my portfolio I typically feature Android applications I have written.  However in addition to writing apps, I also do Android related consulting and training.  Recently I have been doing a lot of work with a talented digital agency: Papercloud.  Papercloud describe themselves as

… A nimble and entrepreneurial digital product development studio that specialises in mobile app development, backend development, UI/UX design and digital product strategy. We place a strong emphasis on usability and design, while keeping a focus on the commercial benefits of every project.

papercloud

Over the past few months Papercloud have been developing on some great Android applications.  Some of the work I have been doing with them has been coding, such as fixing issues, adding features, etc.  However thats just the tip of the iceberg, during my engagement with Papercloud I have:

  • Helped kick off development on several exciting new projects.  This included providing advice on architecture, libraries, tools, code style, etc.
  • Provided advice on the design of Android apps, including the holo design language and adapting iOS apps to Android.
  • Advised both Papercloud’s digital producers and developers on the technical aspects of taking photoshop designs and transforming them into a responsive application, that can run across the many screen sizes and densities supported by Android.
  • Mentored developers in Android app development and provided code reviews.
  • Advised Papercloud on the Android eco system and strategy.

And finally:

  • Stared in awe at the shiny new 3D printer they have in the office!

All up, its been a busy few months.

Tomas Spacek, the technical director at Papercloud had the following to say:

Luke is excellent. He’s a great communicator, understands projects easily, and to top it off really knows his stuff.

You should head over to Paperclounds portfolio have have a look at some of the excellent work they have been doing, not just on Android, but also on iOS and the web.

What Android devices should I test on?

Customers often ask me for suggestions as to what devices they should buy to test their applications on.  In the iOS world you can have every single device your app will ever run on sitting on your desk.  In the Android world things are not quite so simple – as of early 2014 an app targeting phones and tablets, from 2.3 up will have to run on over 4722 different devices!

Given the number of different devices anybody looking at doing Android development will have to limit themselves to testing on a representative sample.  When looking at on device testing there are typically a few boxes you want to tick:

  • Android version: 2.3, 4.0, 4.1, 4.2, 4.3, 4.4
  • Device size: small, med, large, xlarge
  • Screen density: ldpi, mdpi, hdpi, xhdpi, xxhdpi
  • Device manufacturer: Samsung, HTC, Google, Motorola, etc
  • If at all possible you want to cover the most popular phones such as the S3

Now if you do a bit of naive maths, you might say hang on, thats still 400 devices!  Fortunately you can use one device to tick multiple boxes – for example Samsung Galaxy Y will allow you to test on a 2.3 device, with a small screen size, in ldpi resolution running  Samsung’s version of Android.  Also many combinations don’t exist – good luck finding a 2.3 device, with a xlarge screen in xxhdpi density for example!

I personally own the following devices for testing:

Samsung Galaxy S2 and S3

The Galaxy S2 and S3 are both extremely popular devices with a massive portion of the Android market share.  Just testing on the Galaxy S3 alone will allow you to cover off a large portion of the android device market share.  The S2 allows me to test on an older device with a smaller screen size and density.  The S3 is still one of the most popular Android devices on the market, it features a very common screen size (4.8 inches) and runs in the popular xhdpi density.

Nexus 4, 5 and 7

Googles nexus line of devices allow you to test under googles unmodified stock version of the Android operating system.  Rapid software updates released from google mean you will always be able to test agains’t the newest version of Android.  In addition each of these devices have been very successful in the market place.  The Nexus 5 is probably one of the cheapest ways to get an xxhdpi class display to test your app on.

Samsung Galaxy Tab 2, 10″ model

The samsung galaxy Tab 2, is a now throughly outdated tablet device from Samsung, however it does allow us to cheaply cover off testing at a 10″ tablet size

Samsung Galaxy Y

The Samsung Galaxy Y it an extremely cheep low end device.  It allows apps to be tested under Android 2.3 on a small screen with the LDPI density.  Surprisingly the Galaxy Y is an extremely popular device!  Open Signals June 2013 report showed it was the 3rd most popular Android device, comming just behind the S3 and S2 in terms of market share!  Undoubtedly this is being driven by its price – the Galaxy Y can be picked up for $59 from Coles supermarkets.

Huawei Ascend Y201

The Huawei Ascend is another low end device, this time running android 4.0.3 with an mdpi, 3.5 inch sized display.  This allows me to test under another manufacturers version of Android.  The Ascend can be picked up over the counter at coles supermarkets for just $39 – a sunningly low price for a 4.0 android device.

Future Additions

This library of devices allows me to test under some of the most popular devices, running under some of the most common screen sizes, densities and versions of Android available.  However the Android devices space is constantly evolving and new devices are being being released all the time.  In the future I will be looking to add:

  • Samsung Galaxy S4 – Following in the footsteps of the S2 and S3 the S4 is bound to become one of the most popular android phones on the market
  • A LG and an HTC device – While the nexus 4 and 5 are produced by LG they are not running LG’s version of the Android operating system.  Likewise I have no HTC devices to test against.  I will be looking to add some midrange LG and HTC devices to my library
  • A more modern 10″ tablet – The galaxy tab 2 is definitely starting to show its age.  Perhaps if a new nexus 10 is released, running at a xxhdpi resolution it may be worthwhile adding it to my library

New Apps – Enhancebooth and Leanbooth

Unknown

Get it on Google Play

Unknown-2

Get it on Google Play

Enhancebooth and Leanbooth are a family of apps that allow you to make anything bigger or smaller.  To use:

– Simply take a photo or choose from gallery
– Select desired shape/shapes
– Scale over the area you would like to enhance in the image
– Enhance as big as you like
– Click the “show original” & “show enhanced” to see the difference
– Click the “photo filters” to add different shades to your image
– And then save or share via social media.

Ammasso Apps engaged me early on in Enhance Booths development after their previous developer departed.  I was responsible for taking the existing codebase, cleaning it up and fixing many bugs and issues.  This meant I had to rapidly understand the existing codebase and be productive right away.  I also had to implement many significant missing features to bring the app up to parity with the iOS version.  Enhance Booth makes extensive use of OpenGL and an important part of my work on the project consisted of making sure the graphics processing ran across the broad range of devices which make up the Android ecosystem

Sam Naim, founder of Ammasso apps had the following to say:

We found Luke as we were struggling to get Enhance Booth developed for Android.  We wanted to move into Android to increase our revenue and and support some of the most popular phones available on the market.  Android is a very different platform to iOS and making the leap over can be difficult.   Luke has been a great, reliable partner to work with and his extensive Android experience made it easy.  After release our android apps went straight into the ‘top new paid’ and ‘top new free’ charts and stayed there!  We are really happy with everything he has done for us including customer service and price:)

Unknown-1

After its release Amasso apps promoted Enhance Booth heavily.  The android version of Enhance Booth managed to pick up over 100,000 users in its first month and both the paid and free version spent a long time in their respective top 10 charts, in the play store.  During this time I was responsible for monitoring submitted crash reports, reproducing customer issues and releasing updated versions of the software to the play store.

image image 2

Lean Booth is a re-branded version of the Enhance Booth codebase.  Instead of making things larger Lean Booth makes things thinner.  Lean Booth also adds a number of new filters and effects that can be applied to an image.

Unknown-3

Updated App – Accor directory

An updated version of the Accor directory application has been released which supports phone UIs:

png

 

Get it on Google Play

Since the original version of Accor Directory was built using fragments, it was a straight forward process to produce a version of the UI that work on phone sized devices.  The updated Accor directory app in the google play store is a universal application that uses responsive design to size its self appropriately for whatever device it is running on – be that a 3 inch phone or a 10 inch tablet.

 

Building clean RPN part two – Calling native code using the NDK

This may be a surprise to some people who know me, but I am not particularly excited by the idea of writing my own arbitrary precision RPN parsing engine.  Thus when I started to build the Clean RPN calculator app I decided to reuse the C Mapm library, which already includes an example RPN engine capable of performing arbitrary precision calculations using a wide variety of mathematical functions.

Android has the ability to compile and call native C code via the android NDK, which makes use of the java’s JNI for the actual bridge.  There are many examples available on the internet of how to use the NDK to call into C code.  Unfortunately most of them are of the ‘hello world’ nature and only show how to call through to one C file, which is included in the android project and contains only a few functions.  The Mapm library is much more complex, and includes many header and source files along with its own set of build scripts based on make.  I decided to use the following approach:

  1. Modify the Mapm build to use the NDK toolcain and produce a version of libmam.a suitable for embeding in android apps
  2. Include the mapm header file and RPN calculator engine inside my android project
  3. Write a custom bridge using JNI to call through to the functions I need from mapm

Step 1 – Modify Mapm build

The first step is to modify the mapm build to use the android NDK toolchain.  The NDK contains a complete C/C++ toolchain suitable for runing on MacOS, inside the android-ndk-r8b/toolchains/arm-linux-androideabi-4.6/prebuilt/darwin-x86/ folder

The mapm library uses make and comes with several handmade build files, which are relatively simple to modify.  I created a copy of makefile.osx which is provided the mapm zip, and renamed it to makefile.android.  At the top of the makefile a variable is defined with the location of the c compiler.  I change this to point to the absolute path of the NKD’s c compiler and set the –sysroot parameter.

CC = /Applications/android-sdk-mac_86/android-ndk-r8b/toolchains/arm-linux-androideabi-4.6/prebuilt/darwin-x86/bin/arm-linux-androideabi-gcc --sysroot=/Applications/android-sdk-mac_86/android-ndk-r8b/platforms/android-8/arch-arm

Later in the make file comes the step which builds the actual mapm lib. This also needs modifying to use the NDK’s toolchain:

libmapm.a: $(OBJS)
	rm -f libmapm.a
	/Applications/android-sdk-mac_86/android-ndk-r8b/toolchains/arm-linux-androideabi-4.6/prebuilt/darwin-x86/bin/arm-linux-androideabi-ar rc libmapm.a $(OBJS)
	/Applications/android-sdk-mac_86/android-ndk-r8b/toolchains/arm-linux-androideabi-4.6/prebuilt/darwin-x86/bin/arm-linux-androideabi-ranlib libmapm.a

Running:

make -f makefile.android

at the command line will now produce a libmamp.a which is suitable for use in an Android project.

If mapm had made use of autotools it may have been simpler to use a tool such as Androgenizer to bridge the gap between autotools and the android NDK build process.

 

Step 2 – Include mapm headers and RPN calculator

To make use of C code and libraries in an android project the relevant code needs to be placed in a /jni folder in your project.  In this case there were 3 things that I copied across:

  1. The libmamp.a produced by the modified build.
  2. The mamp header file – m_apm.h
  3. The a modified version of calc.c from mamp which implements the RPN parser.

 

Step 3 – JNI bridge

So far there has been no JNI code written, which means there is no way to call into the mamp library from java.  To keep the JNI specific code out of the mapm sources a separate file called native_interface.c was created.  This file is maped to a ‘native’ method in a java class using JNI.  native_inferface uses JNI to convert an array of java strings into a  c array of c string, passes this into the modified version of calc.c from mapm to perform the actual calculation then converts the result from a c string back to a java string:

#include 
#include 
#include <android/log.h>
#include 
#include "m_apm.h"

/*  prototypes from calc_modified  */
char* runCalc(int argc, char *argv[]);

JNIEXPORT jstring JNICALL Java_au_com_lukesleeman_rpn_MainActivity_doMath(JNIEnv * env, jobject this, jobjectArray stringArray)
{

	// Convert our java array of strings into a c array of cstrings
	int stringCount = (*env)->GetArrayLength(env, stringArray);
    char *args[stringCount];
    args[0] = "calc";

	int i;
    for (i=0; i<stringCount; i++) {         jstring string = (jstring) (*env)->GetObjectArrayElement(env, stringArray, i);
        const char *rawString = (*env)->GetStringUTFChars(env, string, 0);
        args[i+1] = rawString;
        // Don't forget to call `ReleaseStringUTFChars` when you're done.
    }

    // Run the calculations
    char * out = runCalc(stringCount + 1, args);

	// Copy result into a java string
	jstring result = (*env)->NewStringUTF(env, out);

    // cleanup
    free(out);

    for (i=0; i<stringCount; i++) {         jstring string = (jstring) (*env)->GetObjectArrayElement(env, stringArray, i);

        (*env)->ReleaseStringUTFChars(env, string, args[i+1]);
    }

    return result;

}

On the java side, we hava a class called au.com.lukesleeman.rpn.MainActivity with a single  native method:

private native String doMath(String [] maths);

An android.mk file needs to be written to tell the NKD how to compile the code:

LOCAL_PATH:= $(call my-dir)
include $(CLEAR_VARS)

LOCAL_SRC_FILES := calc_modified.c , native_interface.c 

LOCAL_LDLIBS += libmapm.a -llog 
LOCAL_MODULE := mapm

include $(BUILD_SHARED_LIBRARY)

The last step is to run the NDK build tool from within eclipse following the process described here.  This will compile the JNI code and link it to the existing libmamp.a.

Conclusion

By splitting out the native C code from JNI specific C code we were able to use the existing mapm build system to compile libmamp.  It was simple to modify the build system to use the NDK toolchain to compile the library.  This allowed us to quickly integrate an existing C RPN calculation engine into the clean RPN app.

Don’t use splash screens – Make app launching gorgeous

Link

Cyril Mottier has a good write up of how to improve the experience of users when they launch your app:

http://cyrilmottier.com/2013/01/23/android-app-launching-made-gorgeous/

Essentially it comes down to theming your application properly, instead of using code to style it.  This will mean your app window appears with the correct styles, colours, etc before your code starts running.