Developer Tips for Android

Use XML Drawables. Wherever you can use XML drawables instead of bitmaps. XML drawables won’t let you do everything, but I was surprised by how flexible they are. Android developer docs have a full overview, but here’re some tasters:

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<corners
android:bottomRightRadius="14dp"
android:bottomLeftRadius="14dp"
android:topLeftRadius="14dp"
android:topRightRadius="14dp"/>

<gradient
android:startColor="@color/off_white"
android:endColor="@color/pale_yellow"
android:angle="270"
android:type="linear"/>

<stroke
android:width="4dp"
android:color="@color/osm_darkerblue"/>

</shape>

This defines a rectangle with rounded corners, a border (darker blue) and a gradient. In layout files you can set it whatever width you like and it will look crisp on any screen. Ideal for buttons.

Use more XML Drawables.  Just to get you a bit more excited about XML drawables, the radar background below is a rather more complex example:

No bitmaps were harmed in the making of this UI (except the icons).

For the lightbulb we used two PNGs: icon_magnitude_min (an empty lightbulb) and icon_magnitude_max (one filled with light) and we dynamically cropped the latter. To set this up I used:


<layer-list xmlns:android="http://schemas.android.com/apk/res/android">


<item
android:drawable="@drawable/icon_magnitude_min"
/>

<item >

<clip
android:clipOrientation="vertical"
android:drawable="@drawable/icon_magnitude_max"
android:gravity="top"
/>


</item>

</layer-list>


In the java I get I reference to the clipdrawable and control its level based on light intensity.

Create custom views by overriding onDraw(). There are some things XML just isn’t so great at, we draw a lot of graphs in OpenSignal and WeatherSignal and there are libraries for this, but we coded our graphs custom. It’s kind of fun. You might never need to do it, but to make graphics that are highly dynamic and custom it is often the only way to go.

Use SVG where you can’t use XML. Sometimes overriding onDraw() and painstakingly coding up all the lines and arcs you need to draw your custom view is overkill. After all, there is a language for vector graphics, it’s called … Scalable Vector Graphics. It’s what powers one of the coolest Android apps ever – Androidify. In fact they built the library just for that app, and they released it here:  SVG for Android It’s what we used to draw the dashboard in OpenSignal.

GZip your SVG files. Makes them smaller and they parse quicker.

The SVG library doesn’t support everything. In particular some alpha channels don’t seem to work, you may even have to edit them out in the code.

The ActionBar and many animation styles didn’t exist pre Honeycomb, use ActionBarSherlock and NineOldAndroids instead. Jake Wharton’s Android libraries are a tour de force of backwards compatibility. As a bonus, itABS also gives you more power of customising the ActionBar.