Android Mobile Design Practices (Part 4)
Android is an attractive platform for developers, but not all designers share the same enthusiasm. Making an app look great and feel great across many hundreds of devices with all the different combinations of screen size, pixel density and aspect ratio is not easy. Android’s diversity creates plenty of challenges, but creating apps to run on an entire ecosystem of devices can also be rewarding.
In Part 4 of this this article, we will conclude our list of practical tips and design considerations for you to create Android apps. We will also include something useful whether you’re crafting pixel-perfect graphic assets, trying to find an optimal user flow, or just getting your hands dirty developing XML.
Bringing The App T Play
User experience considerations should not end in the app. It is worth putting a bit of thought in to the Google Play Store listing so you ensure that it’s immediately obvious what the app actually does and why the user should want it.
Layouts, Styles and Themes
Android has a visual layout editor that keeps getting better all the time. However, it’s a fact that many developers still find themselves developing XML layouts by hand. This section will get down to implementation details, and cover some of the best practices for crafting maintainable and performance layouts. Visual designers may want to just skim over this section, but remember that some awareness of implementation details can never hurt.
The most general purpose layouts are RelativeLayout and LinearLayout. RelativeLayout is usually favored for efficiency, while LinearLayout is generally useful for distributing space between views using weights. GridLayout was introduced in Android’s Honeycomb version. It can be useful for creating complex layouts on large screens without nesting. However, nesting layouts can become too deep and that affects performance and code readability alike.
Framework Should Do The Work
The Android framework provides automated resource switching that is based on folder structure. This means you can have separate graphic assets and layouts for the different screen sizes and densities by simply arranging them in the correct folders. But, it goes much further than that. You could switch color resources for different platform versions, or you could even switch animation durations for different screen sizes.
Since Honeycomb, it has also been possible to switch resources on available screen width in density pixels. This is a step away from the bucketed small, normal, large or extra-large screen size switching. It will facilitate responsive design and allow multiple layout switching points, possibly switching to a tablet-optimized layout at 600dpi with another alternative at 800dpi). It is typical to have multiple layout files with different configurations of the same components for several different screen characteristics.
Being state-friendly is easy with list drawables. These allow you to specify different drawables for several different states of a UI component in an XML file. Representing states properly provides important user feedback.
It’s always good practice to keep layout XML clean of explicit colors and dimensions. You can define these separately and reference them within your layouts. Defining colors and dimensions separately will promote visual consistency and makes things easier to change later on. When you extract these values, you allow switching of dimensions on different screen sizes, orientations and the platform versions. This is especially useful for tweaking the padding for small screens or increasing the text size for readability on larger screens, which tend to be held further away from the face.
Styles and Themes
A good technique to keep layout XML maintainable is by separating the styling concern from the positioning concern. All views in a layout need to have at least a width and height attribute. This will result in a lot of boilerplate, which you can then eliminate by inheriting from a set of base parent styles.
Recurring sets of attributes can always be moved into styles. The widget styles that occur almost universally throughout an app can be moved into the theme. If a particular type of button has the same text color and padding all the time, it’s much cleaner to specify the style than duplicate these attributes for each time it’s used.
The include and merge XML tags will allow you to drop reusable sections of UI into your layouts. This minimizes duplicate XML when the same set of views occur in multiple layout configurations.
A relatively new addition to the Android Developer Tools is Lint. Lint scans the resources in a project and creates warnings about any potential performance optimizations and unused or duplicated resources. This can be incredibly useful for eliminating clutter because an app changes over time, and it’s certainly worth checking Lint regularly for any warnings during your development process.
Sometimes, layouts just don’t turn out exactly how you expected. It can be hard to spot bugs among all those angle brackets. This is where Hierarchy Viewer comes into play. This tool allows you to inspect the layout tree of an app you like that’s running in the emulator. You then inspect the detailed properties of each view.
Inspect your layout trees with Hierarchy Viewer. The colored dots can tell you about your layout performance.
Hierarchy Viewer has a couple of neat tricks for visual designers too. It will allow you to inspect screens in zoomed pixel perfect mode, and then export the layers of a layout as a PSD.
So now that you’ve been introduced to the Android platform and the tools, what’s next? The most satisfying app designs all have a few things in common. These are platform consistency, attention to detail and a clean visual design. The first two can be picked up by using and analyzing existing Android apps.
Android has come a long way in the last few years, and it’s going to go further still. The platform and the apps are becoming gradually more and more refined, and functionality is getting stronger as well. With over a million Android apps out there already, users want polish and a dedicated mobile experience. The KEY to your success with Android is to continue getting a feel for it each day as it continues to mature.
Suzy is currently working as a blogger in Key Difference. Her major interests lie in SEO, SMO and various other trending technology topics. She’s passionate about writing compelling and informative articles, and sharing them with the web world.