Note: This article is not primarily related to Android development. I know this weblog is mainly targeted to developers and deal with UI/UX, optimizations, etc. from an Android developer point of view. However, I believe reading articles like this one may help you to apprehend some do’s and don'ts in Android application development
I completely agree with you! Yes I do! This post’s title means almost nothing. You are probably wondering how a nationality can describe the quality of an Android application? The answer to that question takes place in London … Being in the United Kingdom capital for the Droidcon UK 2011, I have heard of lot of things about being French. Frenchies are supposed to lose at rugby (which is totally false … I’m sure the English rugby team is currently in a plane to Europe at the time of the writing). The Froggies (just for your information, I have never eaten a frog in my life … but I do love snails) are also known as spending half of their time complaining and the other half being on strike. To be honest, I kinda agree with this. My only issue regarding this prejudice is it doesn’t completely describe me. I have never been (and I think I will never be) on strike. As a result, I have no other choice than spending 100% of my time complaining! In other words, this post describes how French I am.
Last week I received a brand new version of the Android Market (build 3.1.5). Let’s be clear about this new version: I’m very disappointed about it and I wanted to give you some precise explanations. The following review being pretty much a list of “I like” and “I don’t like”, I have decided to present the rest of this post as a list made of two obvious sections: “What’s good” and “What’s bad”. Let’s start by the negative side of the review.
Notice: Everybody in my circles know I’m a huge fan of Google and its services in general. I’m also a daily user of Android & the Android Market application. Blaming an operating system and/or an application you are using everyday and actively promoting during international events may seem odd. However I’m strongly convinced criticism is the path to improvement so I assume this complete review of the new version of the Android Market will help you not fall into those traps when developing. Hopefully, it may also be used by the Android Market developers to enhance the next version of the application. The Android Market is probably one of the most used app on Android devices. Making it perfect is a necessity. I do think Google has to take care more of the Android Market!
My biggest disappointment with the new Android Market is how poorly responsive, smooth, fast the application is. Google is releasing new versions quite often with the overall purpose to enhance the usability by refreshing the UI. Unfortunately, I strangely have the feeling the application is getting slower much faster than getting fancier and usable! The current version is so laggy, it is almost unusable on some devices. The content may take a lot of time to be entirely loaded. Moreover, most of the application animations are not smooth or even worse look like frozen sometimes. I sincerely think having un-fluid scrolling/flinging animations with widgets such as
ViewPager, etc. is not acceptable on a decent device like mine (Nexus S). A great tip to prevent lags due to background threads loading content is to reduce their priority. This can easily be done using
android.os.Processclass and its
setThreadPriority(int)method. In general, reducing the impact on the UI thread to a minimum will keep the application smooth and responsive.
Android Market has a lack of consistency compared to the other Google-provided Android applications especially regarding the menu icon style. I’m pretty sure the differences lie in the fact the new Android Market is Ice Scream Sandwich-ready. In ICS, Drawables from the menu will be used both in the ActionBar (use the
MenuItem.showAsAction(int)method) and in the menu. The image below shows the difference between a menu icon from the GMail app and one from the new Android Market.
- Sometimes elements are not centered in their parent. Android makes it easy to center content either using
android:gravity. Centering elements makes UI symetrical … which is pretty natural and user-friendly. Be also careful not over-centering.
I love the workspace UI pattern. It lets you switch very quickly between different types of content in your application. The Android Market uses this UI pattern intensively. Unfortunately the workspace from the Android Market (I don’t know if the application uses the
ViewPagerfrom the Android Compatibility Package but it looks like Google+ has the same problem) is not polished at all. The widget acts weirdly regarding user finger movements. It has a very annoying behavior: when swiping the page a little bit it always goes to the next page regardless of the scroll-distance or the velocity of your finger. The correct behavior would be to scroll back to the original position (as you can see on the launcher, the news application or the GreenDroid’s
PagedView). Even worse, the widget used in the application screenshot gallery to mimic the worspace UI pattern has a correct behavior. Is Google developing internally the same kind of widgets over and over again, reducing, at the same time, source code consistency?
Transitions between screens are not consistent with Android itself. I assume Android Market uses the new
FragmentAPI and this is the reason why translation animations are replaced by alpha animations. Unfortunately, those new animations are not in accordance with the transition animations of the rest of the applications. When developing an Android application try to focus on the future of your application which will prevent you from following a path you would regret in the future. Personally, my motto is “do less but do it great”.
The Android Market application sometimes uses resources which original density is not in accordance with the screen density. Starting API 4 (Android 1.6), Android supports multiple screen densities: ldpi, mdpi, hdpi, xhdpi (the latter has been introduced in Gingerbread). The framework helps the developer selecting the correct resources by defining a set of qualifiers. As a result, you can put hdpi images in the
res/drawable-hdpidirectory. This is very important as your images will look sharper on high density screens. The image shows you some exemples of Android Market screens not using appropriate images
- Layouts may look different depending on orientation (landscape & portrait). Given “as it”, it is not an actual problem. The problem comes from the fact some functionalities are not accessible depending on the current screen orientation. Developing such a layout will force the user to rotate his device which is, let’s be honest, far from being intuitive.
- Error screens are nor attractive nor accessible. The screenshot below compares error screens from the Android Market and from the desktop version of Safari. It is clear that the Safari error screens are more graphical, hence easier to understand at a glimpse. Most of the time, you should use a regular
ImageViewrepresenting the current state (error and/or empty) of the screen in addition to a
TextViewdescribing literally the issue. The loading state should be represented in the same manner using an indeterminate
ProgressBarand a “Loading”
- The “Featured” screen is not consistent with the rest of the application. If you look attentively at the entire application you will notice a margin is never added at the top of the screens (between the content of the screen and the
ViewPagerselector). The “Featured” screen strangely has one at the top … but none at the bottom
- The search screen displays a header giving the number of results for the current search. Unfortunately, when scrolling it fades away into the white color. I usually enjoy the fading edge effect with dark colors but I have to admit it is not that great with light colors. As you can see, in this case, it is even worse. A great solution would be to remove it through the application by adding
android:fadingEdge="none"to the default
ListViewstyle. Another solution would have been to put the list and the header in a
LinearLayoutwhich would have made the header fixed and prevent a visible but useless divider between the header and the first actual itemview. You can also play with the
- Having an
ActionBarcompletely uncorrelated with the content of the application helps the user understand the
ActionBaris not part of the content. It is also a way to demonstrate the
ActionBaris a container for the navigation and/or action buttons. The Android Market application sometimes features a shadow below the
ActionBarwhich acts as the limit between the navigation/actions and the content. Sometimes it does not:
- When performing a search, results are given in a
ListViewwhich itemviews always have the same height. Doing so is okay when the content of each itemviews is similar. The following screenshots give you an example of a search result. It is clear that some itemviews contain a lot a space (especially those that have not been rated yet). This is actually a consequence of using fixed-height itemviews. Android allows developers to use dynamic layouts in
ListViews either using the framework provided layouts (
ViewGroup) or creating a custom
ViewGroup. However, when doing so, keep in mind having a close minimum and maximum heights is preferable. Indeed having very variable height in a
ListViewmakes the scrollbars height vary, which looks awful.
The “Categories” screen is pretty rough. To my mind, it is probably the ugliest screen in the entire Android Market app. The ListView is using dividers made of 3 pixels in height lines (on an hdpi device) which makes the UI unpolished. A divider is not supposed to be part of the content. It should be as unobtrusive as possible. Prefer using 1dp tall lines as dividers for all densities (1px for (l,m,h)dpi and 2px for xhdpi). Moreover, add a
Drawablefor each category whenever possible as the Settings application does (an icon representing the category, the icon of the most downloaded application of that category, etc.)
Some itemviews contain useless dividers. If you look at the result of an Android Market search or at your installed applications, you’ll notice a grey line on the right. Making sure your UI is pixel-perfect can be easily done using Hierarchy Viewer and its Pixel Perfect perspective.
- Reflect the pressed and focused states. This is usually done by changing the appearance of the background. For instance, the Android Market changes the background to a blue color when an itemview is pressed. In the “Featured” screen, the application acts differently by adding a blue overlay. Responding to user actions is a good practice as it indicates the application is responsive. However, make sure the appearance changes do not interfere with the application usability. The screenshot below gives you an example of a pressed itemview being almost unreadable (look at the globe icon). In order to prevent such a behavior, you can use classes like
- The new Android Market shows applications in a “block-manner”. As a result,
ListVieware made of blocks, each block representing an application. In portrait mode, each line is made of two blocks (3 in landscape). There are some situations where the actual number of blocks per line is different from the possible number of blocks per line. This makes the
ListViewlike “broken” which is disturbing for a user. A solution would have been either to make sure lines are complete or to create a block representing the empty state.
- If you go to the “My apps” screen (via the menu), you will notice application icons are loaded asynchrounously. Loading images (from the network or the filesystem) from a background
Threadis often the good way to go as it prevents blocking the main thread (this thread is used to dispatch drawing events, touch events, etc.). Unfortunately the first time an icon is loaded in the “My apps” screen, it is displayed at a small size. If you scroll enough to make the icon disappear and scroll back to the original position, the icon size will have changed. Very weird, isn’t it?
ListViews are not
ListViews but rather true scrollable content! The complete redesign gives a new innovative look to the application. Whenever possible, try to design your itemviews to get away from the regular title/subtitle pattern. The Android Market made it awesome by creating blocks in which important information (title, icon) are more attractive (black over lightgrey) than secondary information (author, rating).
I love the new detail screen. It is clear, simple and contains everything you need to get a quick overview of the application information.
The new Android Market uses a lot of images. The best example is probably the “Featured” screen which is very attractive and eye-candy.
When updating an application that require new permissions, the application now shows the differences between those permissions. This is a very great feature that was previously missing (thanks to @foxykeep for pointing me out this addition)
As a very demanding user and developer, I think Android Market contains a lot of features that make the application innovative. I won’t give you an explanation of those features here but you can have a look at the excellent blog of Kirill Grouchnikov (an engineer working on the Android Market application at Google). Among those features: reflections, synchronized scrolling, images cross-fading, swipey tabs, etc.
I think that’s all folks! I hope you will follow the advices I have given in this post while developing your applications. As usual feel free to leave a comment below if you are want to discuss about some of the points.