Designing For Android Tablets
The following will assistance designers spin informed with Android inscription app settlement by bargain a differences between a iPad iOS user interface and Android 3.x “Honeycomb” UI conventions and elements. We will also demeanour during Honeycomb settlement patterns and blueprint strategies, and afterwards examination some of a best Android inscription apps out there.
Note that while Android 2.x apps for smartphones can run on tablets, Android 3.0 Honeycomb was designed and launched privately for tablets. Future updates guarantee to pierce Honeycomb facilities to smartphone devices, as good as make it easier to settlement and build for mixed shade types.
For many of us, a initial bearing to tablets was around a iPad. For this reason, it’s reasonable to start comparing a dual user interfaces. By comparing, we can align what we’ve schooled about tablets and start to concentration on a pivotal differences between a two, so that we can accommodate a singular UI needs of Android users. Not customarily will this assistance us get adult to speed, though it becomes generally critical when conceptualizing an Android inscription app from an existent iPad one.
It’s Just Like The iPad, Right?
While a Android inscription and iPad knowledge share many similarities (touch gestures, app launch icons, modals, etc.), designers should be wakeful of a many differences before creation assumptions and sketch adult screens.
Screen Size and Orientation
The biggest disproportion between a dual platforms is a form factor. Layouts for a iPad are totalled during 768 × 1024 earthy pixels, and a iPad uses mural mode as a default observation orientation.
With Android tablets, it’s a bit some-more complicated, due to a mixed device makers. In general, there are 7- and 10-inch Android tablets shade sizes (measured diagonally from a top-left dilemma to a bottom-right), with sizes in between. However, many tablets are around 10 inches.
What does this meant in pixels? A good baseline for your layouts is 1280 × 752 pixels (excluding a complement bar), formed on a 10-inch shade distance and regulating landscape (not portrait) as a default orientation. Like on a iPad, calm on Android tablets can be noticed in both landscape or mural view, though landscape mode is customarily preferred.
The mural perspective on a customary 10-inch Android inscription (left) and on a iPad (right).
The landscape perspective on a customary 10-inch Android inscription (left) and on a iPad (right).
However, with Android, shade distance is customarily a half of it. Android tablets also come in conflicting “screen densities” — that is, a array of pixels within a given area of a screen. Without going into too many detail, designers have to ready all production-ready bitmaps for 3 conflicting shade densities, by scaling any bitmap to 1.5×and 2× a strange size. So, a bitmap set to 100 × 100 pixels would also have copies during 150 × 150 and 200 × 200. By creation 3 batches of graphics scaled during these sizes, we will be means to broach your bitmaps to medium, high and extra-high firmness inscription screens though losing picture quality.
For some-more information on shade densities and scheming graphics for Android devices, impute to my previous essay on conceptualizing for Android.
While iOS creates minimal use of a complement bar, Android Honeycomb expands a distance to embody notifications and soothing navigation buttons. There is a “Back” button, a home symbol and a “Recent apps” button.
The Android Honeycomb complement bar.
Android Honeycomb’s complement bar and buttons are always benefaction and seem during a bottom of a shade regardless of that app is open. Think of it like a permanent UI fixture. The customarily difference is a “Lights out” mode, that dims a complement bar to uncover immersive content, such as video and games.
While a bulkiness and life of a Honeycomb complement bar competence seem an barrier to designers, it does giveaway adult a genuine estate that is typically taken by a “Back” symbol in iPad apps. The “Back” symbol in Honeycomb’s complement bar works globally conflicting all apps.
The “Back” symbol in a complement bar.
The bulk of a UI differences between platforms is found in a tip transformation bar. Android suggests a specific arrangement of elements and a specific visible format for a transformation bar, including a chain of a idol or logo, a navigation (e.g. drop-down menu or tabs) and common actions. This is one of a many unifying settlement patterns conflicting Android Honeycomb apps, and familiarizing yourself with it before attempting customizations or something iPad-like would be worthwhile. More on a pervasive transformation bar later.
The transformation bar.
New to iPad users will be Android’s widgets. As a name implies, these are tiny display and shortcuts collection that users can set to seem on their launch screen. Widgets can be designed to uncover smoke-stack views, grid views and list views, and with Android 3.1, they are now resizable.
Several widgets on a launch screen.
While iOS’ notifications complement pushes elementary alerts to your launch screen, Honeycomb offers abounding notifications that cocktail adult (“toast” we used to call them) in a bottom-right area of a screen, many like Growl on Mac OS X. Custom layouts for notifications can be anything from icons to ticker calm to actionable buttons.
A display on Android.
Access to settings in an iPad app are customarily presented in a pop-over, triggered by an “i” button; and settings categories are damaged adult into tables for easy visible identification. Honeycomb has a conflicting convention. It looks some-more like a iOS’ “General Settings” screen, where a user navigates categories on a left and views sum on a right. This is a elite (and some-more elegant) approach to benefaction mixed settings in Honeycomb.
The settings settlement pattern in a Calendar app.
As we can imagine, Android goes to good lengths to do all conflicting from a aspirant (that’s called differentiation!). Honeycomb has a possess UI conventions, and it now has a new “holographic UI” visible denunciation for such slight actions as picking a time and date, selecting an option, environment a volume, etc. Understanding this UI denunciation is critical to building shade flows and formulating layouts.
A sampling of UI elements, taken from a slip in a Google I/O 2011 presentation.
How many fonts does iPad 4.3 make available? The answer is fifty-seven.
How many does Android? Just three.
Yep, those 3 are Droid Sans, Droid Serif and Droid Sans Mono. But there is an upside. While customarily these 3 boat with a platform, developers are giveaway to gold any other fonts with their apps.
Anything a Same?
Luckily for designers who are already informed with a iPad, a dual platforms have some similarities.
Tap, double-tap, flick, drag, pinch, stagger and corkscrew during will.
Split View and Multi-Pane UI
The separate perspective is one of a many common layouts for tablets. It consists of dual corresponding panes. Of course, we can supplement panes for some-more formidable layouts.
Ustream’s split-view layout, with categories on a left and calm on a right.
Both platforms concede embedded audio, video and maps.
The YouTube app, with an embedded video player.
For duplicating and pasting information into and out of applications.
Drag and Drop
Both platforms have drag-and-drop capabilities.
The drag-and-drop underline in a Gmail app.
Honeycomb continues many of a design patterns introduced in Android 2.0 and expands on them. In box you’re not informed with settlement patterns, they are, as tangible in Android, a “general resolution to a repeated problem.” Design patterns are pivotal UI conventions designed by Android’s maintainers to assistance harmonize a user knowledge and to give designers and developers a template to work from. They are also customizable, so no need to fret!
As mentioned, a transformation bar is a many distinguished Android UI member and is a one we’ll concentration on here.
The transformation bar highlighted in a Calendar app.
Icon or Logo
The transformation bar starts with an idol or trademark on a distant left. It is actionable; by drumming on it, a user is destined to a app’s home screen.
The Calendar app icon.
Next, we’ll typically find some form of navigation, in a form of a drop-down or add-on menu. Honeycomb uses a triangle striking to prove a drop-down menu and a array of underlines for tabs, that typically take adult many of a transformation bar’s genuine estate.
A left arrow symbol competence also seem to a left of a idol or trademark or a label, for navigating behind or cancelling a primary action.
Three conflicting kinds of transformation bar navigation.
Common actions, as a name implies, gives user such things as search, share and an crawl menu. They are always positioned to a right of a transformation bar, divided from any tabs.
Common actions in a Calendar app.
The crawl menu is partial of a common actions organisation and is infrequently distant by a straight rule. It is a place for diverse menu items, such settings, assistance and feedback.
An crawl menu.
Search is also a partial of a common actions group. Unique to hunt is a enhance and fall action. Tap on a hunt idol and a hunt box expands out, vouchsafing we enter a query. Tap a “x” to cancel, and it collapses to a single-button state. This is a space saver when many actions or tabs need to be shown.
The hunt duty collapsed (top) and stretched (bottom). Tapping a magnifying potion opens a hunt box, while drumming a “x” closes it.
Contextual actions change a format of a transformation bar when an object is selected, divulgence options singular to that item. For example, if a print app is displaying thumbnails, a transformation bar competence change once an picture is selected, providing contextual actions for modifying that sold image.
To exit a contextual transformation bar, users can daub possibly “Cancel” or “Done” during a distant right of a bar.
The contextual transformation bar is triggered when drumming and holding an email in a Gmail app.
Tablet Layout Strategies
Using Fragments and Multi-Pane Views
The building blocks of Honeycomb settlement are “Fragments.” A Fragment is a self-contained blueprint member that can change distance or blueprint position depending on a screen’s march and size. This serve addresses a problem of conceptualizing for mixed form factors by giving designers and developers a approach to make their shade blueprint components effervescent and stackable, depending on a shade restraints of a device that is regulating a app. Screen components can be stretched, stacked, stretched or collapsed and shown or hidden.
The Fragments horizon gives designers and developers several options for progressing their layouts conflicting shade sizes and march modes.
What creates Fragments so special? With a harmony library, developers can pierce this functionality to Android smartphones going behind to chronicle 1.6, permitting them to build apps regulating a one-size-fits-all strategy. In short, it enables designers and developers to build one app for everything.
While Fragments competence be a tenure used some-more by developers, designers should still have a simple bargain of how capsules of calm can be stretched, stacked, stretched and dark during will.
The many common arrangement of Fragments is a separate view. This blueprint is common in news apps and email clients, where a list is presented in a slight mainstay and a minute perspective in a wider one.
The separate perspective used by USA Today
Another approach to benefaction a separate perspective is to spin it on a side. In this case, a laterally list Fragment becomes a carousel, navigating horizontally instead of vertically.
While Fragments are good for requesting one settlement to mixed shade sizes, they are also useful for environment march strategies. Your shade settlement competence demeanour good in landscape view, though what will we do with 3 columns in a slight mural view? Again, we have a choice to stretch, smoke-stack or censor content. Think of Fragments like a garland of elastic nonplus pieces that we can pierce around, figure and discharge as needed.
A Word About Animation
The Honeycomb horizon allows designers and developers to use a accumulation of animation effects. According to a Android 3.0 Highlights page, “Animations can emanate fades or transformation between states, loop an charcterised picture or an existent animation, change colors, and many more.” Honeycomb also boasts high-performance mechanisms for presenting 2-D and 3-D graphics. For a good overview of what Honeycomb is able of, check out this video.
Learning from Example
Android inscription apps are still a comparatively new space, and some brands are customarily commencement to exam a waters. Below is a list of apps for inspiration. You can download any of them from a Android Market or Amazon.
Naturally, Google’s YouTube app for Honeycomb is exemplary, showcasing all of a settlement patterns and UI elements discussed above. To get a good feel for Honeycomb, download this app initial and take it for a spin.
The CNN app creates good use of hold gestures (including flicking to perspective some-more content), a separate perspective and fonts! A tradition rise (Rockwell) is used for news headlines.
Another good news app, with animation (the batch ticker tape) and abounding graphics and gradients. CNBC has one of a many visually constrained apps.
With a three-column layout, Plume is a good instance of how layouts competence need to be altered dramatically from landscape to mural views.
A data-heavy app finished elegantly. Includes good maps, pointed animation and customary Honeycomb UI elements.
What else can we say: it’s Pulse for Android tablets! But comparing a Android and iPad versions, that are matching in roughly each way, is still fun anyway.
This was one of a initial Honeycomb apps in a Android Market. It creates good use of maps and of a holographic UI for display cinema from continue cams.
Kindle flattering many sticks to a book in regulating settlement patterns and Honeycomb UI elements. The outcome is elegant, while staying loyal to Android’s best practices.
- USA Today
- Google Earth
- Think Space
- Designing and Implementing Android UIs for Phones and Tablets, Google I/O 2011
- Android 3.0 Honeycomb animation demo
- Designing and Implementing Android UIs for Phones and Tablets, Google I/O 2011 (PDF)
- Tablet UI Patterns
- Supporting Multiple Screens
- Icon Design
- Android 3.0 Platform Highlights