Thinking Android? Think Sony!

I’ve used a lot of Android phones over the years starting with the first one ever. The quality of Android phones can often let you down, even the high-end models (I’m looking at you, HTC). I was getting tired of the recent trend in Android devices, mainly that they were getting way too enormous in size to be able to comfortably fit in your hand and pocket. The new Nexus 6 is just ridiculously ginormous:

nexus-6-2821-008
Image from CNET’s Nexus 6 review: http://www.cnet.com/products/google-nexus-6

I set out to find an Android device that would meet my requirements:

  • Comfortable size with a nice display.
  • Good camera.
  • Fast CPU and storage.
  • Good battery life.

Lots of manufacturers struggle to meet even 3 of those requirements. Samsung has the Galaxy S5 mini but its camera is no good. HTC offers the One Mini 2 but it has a much slower CPU and also a lousy camera. Sony is the only one who has put all of these things into one package in the Sony Z3 Compact:

xperia-z3-compact-mandarin-1240x840-6732d63f6eb7dfe080a35e4f4f04c920
Small in size, yet powerful under the hood.

This device has really impressed me. The UI isn’t stock Android, but Sony doesn’t mess it up too badly with their customizations. And besides, Google is offering so many apps in Google Play like Google Now Launcher and Messenger which make it easy to pretty much get back to an experience that is very much like stock Android.

The camera performs really well on the Z3 compact as well. It’s not as mind blowing as you get with something like the iPhone 6, but I typically get sharp photos with little noise and correct color reproduction. All of the recent photo posts on this blog were taken on the device. It struggles a bit in low light, but that’s the only area where I’ve noticed any problems. It can also shoot slow motion video which is really fun.

The battery life is also shockingly good. I can use this device for two full days before needing to connect it back up for more juice. The fact that the device is a 720p display probably helps it use less power when compared to its flagship counterparts.

One issue I’ve had is that Sony is slow to update the software on the device. It is still stuck on Android 4.4, although it appears that they are rolling out the Lollipop update soon.

Hopefully other Android manufacturers will pick up on what Sony has achieved with this device and apply it to their lineup. If Samsung came out with a Galaxy S6 mini with similar specs to the regular S6, that would be hard to resist!

Working with Android Shape Drawables

Recently I’ve been working with Shape Drawables in Android and have found them to be quite handy to utilize for certain areas of your Android UI. Shape drawables are basic shapes that you can define using XML. They’re useful for many reasons:

  • They ‘just work’ with multiple device densities.
  • No need for bitmap resources, which saves space in your app.
  • They’re flexible to any screen size, so you don’t have to deal with those pesky 9-patches.

Over the past few months I’ve been responsible for implementing a redesign of the Notifications view in WordPress for Android. The design included special borders for when you are viewing a comment reply:

comment-reply-shape-drawable-background

The background for the comment needed to meet the following qualifications:

  • Contain a left margin so that the bar on the left appeared indented.
  • Have a thick border on the left, and a thin border at the bottom (but no border on the top and right side).
  • Work with multiple colors, since an unapproved comment will show a yellow background.

So I got to work on the shape drawable. After a few issues getting the borders to line up correctly, this is the XML that I ended up with:

comment_reply_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
    <item
        android:left="@dimen/margin_extra_large"
        android:right="@dimen/margin_extra_large"
        android:top="@dimen/margin_large">
        <shape android:shape="rectangle">
            <solid android:color="@color/blue_light" />
            <padding
                android:bottom="1dp"
                android:left="20dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

The most interesting part of the XML is the second item in the layer-list, which is what takes care of drawing the borders. Note the left, right and top margins that indent the borders. Next, a rectangle is drawn that includes a 1dp padding for the bottom border, and pads by 20dp on the left side which when accounted for @dimen/margin_extra_large (which is 16dp) will give us a visible 4dp border.

The last rectangle shape in the layer-list will fill in the rest of the non-bordered area in with white. Bingo!

Doing the yellow version for unapproved comments was as easy as swapping out the colors and removing the indent because it wasn’t needed for unapproved comments:

comment_reply_unapproved_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>
    </item>
    <item
        android:left="@dimen/margin_extra_large">
        <shape android:shape="rectangle">
            <solid android:color="@color/orange" />
            <padding
                android:bottom="1dp"
                android:left="20dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/orange_light" />
        </shape>
    </item>
</layer-list>

Shape drawables certainly don’t work for every element in your Android UI, but they are very handy when they do. Keep them in mind as you are constructing the UI in your app!

If you’re interested in seeing other examples of shape drawables, there’s plenty more in the WordPress for Android repo on GitHub.

Android Developers: Take the Low-End Device Challenge

As a developer I’ve always been lucky enough to have access to fast, high-end devices that provide the best experience that you can get with Android. Recently I’ve been using a low-end device to see what things are like on the other side of the fence, and I’ve learned quite a few lessons that I think can help me create better experiences for all users.

Firstly, here’s a wee bit of background. About a month ago, I had the unfortunate experience of dropping my Galaxy S4 on the pavement, shattering its screen and rendering it useless. I needed to replace the device quickly but getting a device during the mid-summer generally isn’t a great idea as a lot of new devices come out in the early fall.

I had a look at some analytics for Simplenote and saw that one of the more popular devices was the Moto G, a fairly new device that you can pick up for $199 off-contract.

Looks nice enough, right?
Looks nice enough, right?

I ordered one from Amazon and it arrived in two days (yay for Prime!). I popped my SIM and SD cards in and started using it right away. Overall the device felt fine at first, a bit clunky in size and weight but you can’t expect much at that price point. After using it for a few weeks now as my ‘daily driver’, it has really helped me get a better understanding of what pain points users of these low-end devices face.

Everything is Slower

The first thing I noticed was that this device was much slower at doing things I expected would be fast on most Android devices. The app switcher is especially slow, but there is also a huge delay when returning to the launcher from any app. It looks to me like the launcher is being restarted because due to lack of memory:

home-screen-delay
It takes 6 seconds to show the home screen after a home button tap.

I found myself leaving/uninstalling apps that were taking too long to load. As a user I find this frustrating, and it has motivated me to make sure that the apps I’m building can respond quickly, no matter what.

Crappy Camera Kills Creativity

I really love snapping photos from my phone so that I can share them with friends and family on my blog and Instagram. Since getting the Moto G, I haven’t done hardly any of that because the camera is completely awful.

IMG_20140818_174111
Focus? Nope. Sharpness? See problem with focus. Color reproduction? Awful.

Pictures are dull, usually out of focus, and overall just something that you wouldn’t want to share with anyone. Not even the fancy post-processing that Google+ Photos applies could save any of the photos. The only hope was to apply filters in Instagram to try and salvage the shots.

The camera was so bad that I simply stopped taking pictures. I wonder as a developer how many users of low-end devices are expecting filters in all of the apps they use because of the poor results they get from a stock camera app shot. I’m thinking some filters might be nice to add to WordPress for Android.

LTE Doesn’t Equal Fast

The G has the same LTE capabilities as my shattered S4, but comparing page loads in the browser were significantly slower in the Moto G. Even outside of the browser in other apps it felt like I was tapping my foot more than I used to waiting for content to load.

Optimizing network performance is a must if you want users of your app to stick around. Content placeholders (Like the ‘Fetching posts’ animation you see when first loading the WordPress Reader) seem even more important after using this device.

Take the Challenge!

If you are an Android developer, I challenge you to switch to a low-end device for at least two weeks. The Moto G isn’t even the lowest of the totem-pole. You can even pick up prepaid devices for around $40 if you are feeling brave! I promise you’ll learn a lot.

I’m looking forward to September arriving which will most likely be when I upgrade back up to a high-end device. The Moto X+1 is looking nice 😉

Have you already taken the challenge or use a mid to low range device? Let me know your thoughts!

Android Apps, GPS, and Google Play

Here’s a little tip if your Android app makes use of location based services but doesn’t require them. We were getting a few emails from users that the app wasn’t available in Google Play on their devices. Most of the devices were more obscure tablets and low-end phones that didn’t have GPS functionality.

It seemed to be related to the fact that our app uses GPS and/or network location in order to geotag posts. This is not a required feature so we had this line in our AndroidManifest.xml file:

<uses-feature
        android:name="android.hardware.location"
        android:required="false" />

Turns out this was not good enough, as you need to be a bit more detailed about what your app is using but is not required:

<uses-feature
        android:name="android.hardware.location"
        android:required="false" />
<uses-feature
        android:name="android.hardware.location.gps"
        android:required="false" />
<uses-feature
        android:name="android.hardware.location.network"
        android:required="false" />

After we published that change to the manifest file, the app was available to 160 more devices. Woo!

10 Tips for Developing Android Apps

Over the course of developing WordPress for Android there have been a lot of speed bumps along the way of various issues.  After figuring out how to resolve them I’ve typically thought about how nice it would have been to have known that when I started out developing for Android.  If you’re an Android beginner, here’s a list of these things so you don’t have the same problems!

1. Use a Global Theme

Using a theme can save you from having to change styles for every Activity in your app.  Depending on the look and feel for your app, you should at least use the built in Light or Dark themes.  For WordPress for Android, we use the Light theme and tweak some of those styles in sub-activities if needed:

<application android:icon="@drawable/app_icon" android:theme="@android:style/Theme.Light"
 android:label="WordPress" android:name="WordPress">

2. Design Flexible Layouts

Android can run on multiple screen sizes these days. Make sure to use layout designs that stretch their content to fit the screen. Use “fill_parent” and “wrap_content” in the layout xml where appropriate to adapt the content of your application to the screen size automatically. Here’s the comment view of WordPress on different screen sizes:

Check out row.xml to see how the content is set up to expand in the comment view row.

3. runOnUiThread() is Your Friend

If you’re running threads in your application and need to display something to the user, you’ll discover that the application won’t actually display anything unless it is called from the main thread. You can use runOnUiThread() to ensure that your code is run in the UI.

4. Use Selectors as View Backgrounds, Not Images

A common mistake when coming from the web world is to set the background for buttons and lists with an image file. Since Android has multiple states for views, you should create a custom selector in xml that details what should display when the view is at different states:

xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"
        android:drawable="@drawable/menu_button_bg" />
    <item android:state_pressed="true" android:state_selected="false"
        android:drawable="@drawable/menu_button_bg" />
    <item android:state_selected="false"
        android:drawable="@android:color/transparent" />
</selector>

5. Handling Device Rotation

If you do nothing in your activity to handle device rotation, Android will default to restarting your activity. This is especially annoying if you are running a ProgressDialog while the application is working on something. You can override onConfigurationChanged() to have your activity stay alive when the device is rotated:

@Override
public void onConfigurationChanged(Configuration newConfig) {
  //ignore orientation change
  super.onConfigurationChanged(newConfig);
}

and in your manifest xml:

<activity android:name="selectCategories" android:configChanges="orientation|keyboardHidden"></activity>

6. Test on all Compatible Android Versions

We target Android 1.6 with WordPress for Android, but it is compatible with 1.5 or higher. I typically dev and build on my G1 with 1.6 installed on it. One time I was testing on the device as well as a 2.0 emulator, but forgot to check it on a 1.5 emulator. Some of the listview layouts were displaying incorrectly on the 1.5 device even though it looked fine on all of the later versions. Whoops! Now I have 4 emulators up at once, to test each version the app can run on (currently 1.5, 1.6, 2.0 and 2.1).

7. Optimize Your ListViews for Smooth Scrolling

Wrap your ListView rows in a container class for faster loading and scrolling. StackOverflow has a good example.

8. Use DIP instead of PX

A wise man once said: “May your dips be dips, and your pixels be pixels.” To ensure that your margins and padding appears the same on different screen sizes and resolutions, make sure to use ‘dip’ instead of ‘px’ so that Android adjusts accordingly for the device:

<button id="@+id/example_button"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textSize="20dip"
             android:text="Use Dips!"/>

9. Android is Already Fragmented

Because Android is so open, device manufacturers have run with it and changed a lot of the Android core. This can cause oddities to occur in your application. For example, take a look at how WordPress appears on the Motoblur platform:

Ahg, those black buttons! Motorola replace the default Android buttons with black ones to fit their ‘dark’ theme for motoblur. In order to correct this we are going to have to create our own buttons for the app.

10. Use the Dev Tools Application

Google created an excellent application that is installed by default in the emulators, but you can also install it on your device. My favorite tool in the app is the ‘Monitor CPU Usage’ option, which will put a few bars at the top of your device that show how much CPU your app is using in real-time! Learn more about the Dev Tools here.

There we go! Android is a great platform to develop for, and I hope this article helps you get started!