Code Zen

One of the most commonly overlooked parts of building Android applications is touch feedback. While some views like Buttons have touch feedback built into them, thats not the case when using custom views.

The Android Design Guidelines explicitly talk about the UX part of touch feedback and it was also discussed a while back on the Android Design In Action YouTube series:

The problem is that there are no clean standard hooks in the Android framework to implement these. The only implementations I have found have been:

• FrameLayouts have a foreground property that can be used
• ViewGroups like the ListView that extend the AbsListView class have a property called “drawSelectorOnTop” that can be used to draw the background selector on top of your custom item renderer.

Given the lack of default apis in most of the common layouts, one approach that you jump to (like I did) was to listen to touch events and change background on touch down  and up. This is hard to implement perfectly because a touch event can be canceled in a bunch of ways. For example, a user may be swiping across your view and you may still end up showing touch feedback which would be wrong. In our app, we often ended up with views stuck in an incorrect state.

The Android framework’s selector system (or rather the StateListDrawable class) handles a bunch of these situations appropriately already. The best approach therefore is to create a selector and the apply that to your view. Setting that selector as your view’s background though will draw that under all the views on top which doesn’t work either. To fix that, the best approach is overriding the dispatchDraw method and then after calling super, calling your new drawable’s draw method within the bounds of the View, something like:

@Override
protected void dispatchDraw(Canvas canvas){
super.dispatchDraw(canvas);
touchFeedbackDrawable.setBounds(0,0,getWidth(), getHeight());
touchFeedbackDrawable.draw(canvas);
}


The one gotcha here is that the base ViewGroup does not invalidate custom drawable invalidated automatically, so this is something you have to do by overriding a different method:

@Override
protected void drawableStateChanged() {
if (touchFeedbackDrawable != null) {
touchFeedbackDrawable.setState(getDrawableState());
invalidate();
}
super.drawableStateChanged();
}

Props to Rich Ratmansky for solving this quirk.

The final result looks something like this:

I have created a sample project to show the experience. You can find the project on Github. This works well, but as you can see it does require a custom ViewGroup class. If anyone from the Android framework team is reading this, having a “touchFeedbackDrawable” property would probably be really useful extension to the framework.

[Update] Had an interesting discussion on this on Google+, whether touch feedback should be shown in a view’s background or foreground. The consensus seems to be background as long as the background is fairly prominent/visible. For opaque content like say images, foreground feedback is pretty much required.

Most developers know about the different ways to specify dimensions of visual elements in Android. While setting dimensions for visual elements is usually done in “device independent pixels”, it is recommended to use “scale independent pixels” (sp) for type. The Android OS provides a setting (under the Display category on stock Android) where users can set the default minimun font size of all applications to small, normal, large or huge, an important accessibility feature for users with poor eyesight. Any text fontSize set in sp’s will scale up or down to respect this setting.

That said, you may want your textView to not scale up or down with the settings. Setting the TextView value to some sp value in the layout.xml file will do that. However if you are setting the text size in code, remember that even if you do read the dimensions from a dimen.xml file with values set in dp, the value returned cannot be used in textView.setTextSize (value) since it will interpret those values as sp’s regardless. To set dp values, use the other setTextSize method that takes an additional parameter: how to interpret the numbers being read.

TL;DR: Use setTextSize(TypedValue.COMPLEX_UNIT_DIP, xx) to set dp values to textviews

I installed the first installable image of Ubuntu Touch for Android devices today, and it was a little tricky since the install instructions seem to assume an audience already running Ubuntu. Either way, I wanted to do a quick review of it but figured a video might do a better job explaining what I was talking about than trying to write em out. The video is embedded below:

The performance of the build isn’t very good but thats expected. I feel the UX is relying a little too heavily on gestures, way too many of them and a lot of “half-gestures” (swipe halfway for action-1 and all the way for action-2). Also the home screen feels too much like an app store and less like a launch board. Pixels wise the UI looks nice and has some nice animations at times (like clicking on a thumbnail of a movie to see the larger image). Will definitely be interesting to see how this evolves.

 

In the last couple of months, a few of my friends have moved to Android from iPhones. Some of them reached out to me on advice on devices and apps they should install on their new phones. The Android app ecosystem is pretty rich and while there are a bunch of apps that can replicate the functionality of iOS apps, there are a lot more that I find interesting because of how they leverage the unique strengths of the Android platform. I won’t mention the basic apps that I use like Foursquare, Flipboard, GroupMe or the Google apps like Maps and GMail that you can pretty much get on either platform. This post lists some of the apps that I use that make me a big fan of the Android platform.

An integrated music experience with Google Music, Last.fm, Gigbeat and LyricsPlayer
One of my favorite parts of Android is how applications interplay with each other. The music experience is a great example of this.

I use Google Music to store my music in the cloud. However I have a bunch of applications that listen to song events and provide different functionality when a song is playing. For example take a look at my notification shade when I have a song playing:
I can control song playback right from the notification shade (Rich Notifications ftw). Additionally, as I play a song, Last.fm scrobbles the song to my Last.fm account. Additionally the LyricsPlayer app offers me a one click link to the lyrics of the song currently playing while Gigbeat searches for upcoming tour dates for the artist.

The photo experience with Panoramas, Photospheres and Instant Uploads
I really love the Android camera app, it was fine before but the recent addition of PhotoSpheres has me completely hooked. I feel it captures the essence of an event or a location so much more. Take a look at my PhotoSphere of the Venetian hotel in Las Vegas when I was there recently for CES (click on the image for the PhotoSphere).
Again, like music playback, taking photos sends a system level event in Android. This enables apps like Dropbox and Google+ to allow instant photo upload services that are pretty useful. I haven’t manually uploaded pictures from my device in ages. Whenever I am ready to share my pictures or view them on a different device, they are just there.
The official Flickr app for Android is pretty mediocre but if you use Flickr, Glimmr for Flickr is an excellent replacement.

AddressBook extensions with LinkedIn, Last.fm and HaxSync
The Android address book (recently renamed to the People App) is really remarkable. It allows applications to annotate user data on the address book with additional information. For example, the LinkedIn application automatically sets a contact’s most recent job title right in the Contact details view. Similarly Last.fm synchronizes your contacts with their Last.fm profiles.

The people app also allows applications to publish recent status updates right to the app that is available in the contact details as well. This feature is kinda nice, though its a little buried so I don’t use it as much. There are a couple of apps on the Play Store like Current Caller Id that show contact social updates when they call, but they don’t tap into the contact app data. Hopefully the native dialer app will use this data in a future version of the OS. Android doesn’t come with native Facebook or Twitter integration, but you can get Facebook updates in your People app using HaxSync.

Managing files with Astro FileManager, AirDroid and DropSync
A big difference between Android and iOS is that Android devices do let you browse the local file system as well as create folders and files there like a regular computer. You can browse the folders on your PC when the device is connected, but you can also use apps like Astro File Manager to browse the local file system. Another pretty useful app to browse your phone’s content is AirDroid that lets you connect to your device wirelessly as well. The biggest thing I use local file systems for is for auto syncing certain folders among my different devices via Dropbox using DropSync. For example, I have one “Wallpaper” folder that syncs across my Mac, tablet and phone. A different app, the Wallpaper changer, then automatically swaps out my wallpapers once every few hours (again, unlike iOS, Android has a wallpaper api). I also have a dropbox folder called currently-reading that has a bunch of pdfs that sync with a folder my pdf-reader app uses as a source for readable files.

Other notable mentions:

Location based information with FieldTrip: Love this app, it indexes a bunch of news and information against location points and shows them when you are around. I use it more when I am traveling to find random interesting trivia.

Twitter with Tweetdeck or Falcon: Falcon is the new kid on the block for Android Twitter clients, and its pretty nicely done, but I am still stuck on Tweetdeck for Android even though it hasn’t been updated in ages. The fact that it polls for Twitter data in the background means I never have to hit “load” on the app. Its pretty nice and minimal.

Managing Podcasts with DoggCatcher: Lots of features and no need to sync to a device. Never had any trouble with it.

Browser: Chrome / Firefox: I like Chrome on my phone but lately have been trying Firefox and it almost seems faster than Chrome at times. I feel the Firefox UI has a little bigger tappable buttons so it seems a little easier to use, it also has a sync across devices feature and allows for plugins!

Keyboard: I am currently running Swiftkey Beta for Android. Its really well done and I do enjoy using it. Additionally I have been using Google voice a lot for dictation and it works surprisingly well. Bonus points for it working offline.

Google Now is neat

The DoubleTwist Alarm app is my default alarm app. It has some nice features like power nap alarms, etc but I like it mostly for the UI.

Thats most of my suggestions. Let me know if there are any other apps that you use that you find really interesting.

In my previous post, I had written a bit about creating custom Layouts for Android. However to make a truly reusable layout there are a few more things we’d probably need:

1. Some unique properties that you may want to assign to it via XML (Like LinearLayout has an orientation property unique to it)
2. Custom LayoutParams object that you can assign to the children of the Layout to assign them properties that the layout can inspect when its laying the children out.
3. For bonus points, package this container in an external library project so you can reuse the class in a bunch of projects (this will also force you to write truly decoupled code)

Creating custom properties:

Since most often we use XML to define our layouts, it makes sense that we would like to assign configuration properties in the XML file as well. The way you do this is by creating a bunch of declare-styleable nodes in your /res/values/attr.xml file. For example:

<resources>
    <declare-styleablename="MyCustomLayout">
        <attrname="mynewproperty"format="string"/>
        <attr name="mynewproperty2" format="string"/>
    </declare-styleable>
</resources>

The name property of the declare-stylable node should reflect the class-name of your custom View/ViewGroup. The attr node inside references the actual property you are trying to create, You can create a bunch of these properties here. The format of the property can be of the following types:

• reference
• string
• color
• dimension
• boolean
• integer
• float
• fraction
• enum
• flag

Once you have created the declare-stylable, you have to ensure that those values are visible from the XML document. This is done by adding a new namespace to your application. For example

<com.arpitonline.flint.containers.MyCustomLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:arpitonline="http://schemas.android.com/apk/res/com.arpitonline.mycoolapp"
... >

The new namespace is just your application package appended to the end of “http://schemas.android.com/apk/res/”. Now any property specified there will be retrievable in the constructor of your custom Layout which you can retrieve like so:

public MyCustomLayout(Context context, AttributeSet attrs) {
     super(context, attrs);

     TypedArray arr = context.obtainStyledAttributes(attrs, R.styleable.MyCustomLayout);
     CharSequence o = arr.getString(R.styleable.MyCustomLayout_mynewproperty);

          // do something here with your custom property     

     arr.recycle();
}

Note that its good practice to have getters and setters for the property that you are assigning via XML so that the layout can be instantiated just as completely via code. The method described above can be used as is for custom Views as well. For a more detailed explanation see this link.

Creating Custom LayoutParams

As you create custom layouts, you may want to assign properties to the children that the layout may contain. For example, RelativeLayout has properties like layout_centerHorizontally etc that aren’t relevant for children of LinearLayout ViewGroups.

First, you need to create the attributes in the declare-stylable nodes just as mentioned in step 1 usually with the convention MyCustomLayout_LayoutParams. These will be read by your custom LayoutParams object and kept as properties.

The next step is to create a public inner class named (by convention) LayoutParams that extends ViewGroup.LayoutParams. Additionally in the main ViewGroup class, you have to override 3 methods:

1. public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs)
2. protected boolean checkLayoutParams(ViewGroup.LayoutParams p);
3. protected ViewGroup.LayoutParams generateDefaultLayoutParams ()

The way this works is if there are custom layout attributes in the children, you get the attributes when the framework calls generateLayoutParams method and its up to you to generate the LayoutParams object based on the values coming in and return it.

Once that is done, there is a call made to checkLayoutParams which seems to give you one last chance to see if the object you created is something you still want to use to determine layout information. This can be done by looking at the class of the LayoutParams object for example. If you return false here, your generateDefaultLayoutParams method will get called which should return a default layout object that you can use anyway.

The layoutparams object will now be magically available during your onLayout pass and can be looked up by calling the view.getLayoutParams() method which you can then use to size and position that particular view.

External Library Projects

Its convenient to package all your custom code in an external Library Project that your app can reference. Doing so is easy, just create a new Android application and check the isLibrary checkbox in the wizard. Then add the library project to your project by right clicking on your application project and going to Preferences > Android screen and clicking the Add… button.

Note that for a long time it wasn’t possible to add custom attrs in Library Projects, this was fixed in SDK 11

The only gotcha here is that everything you have done in your library project may be in the namespace of your library project but when referencing it in your main application, they are referenced with the namespace of the main application project.

I have started a new project on Github where I’ll post some custom layouts/classes that may be helpful. Its pretty early right now but you can see the above code in action at least at the repository.