Jan23

Designing an Android Mobile Application? Learn Easy Navigation Tips

Developing straightforward navigation is a critical aspect to designing an accessible Android mobile application.  Today, mobile app users expect apps to show more information with fewer clicks, so how does your trusty Android developer accommodate?  One of the first steps to design an application is to outline the flow map: in other words, configure the piece of information a user wants to view and what they want to do.

Once you determine your overall design structure, it’s time to consider functionalities you’d like to include. We’ll discuss some popular navigation design patterns that can be a great starting point for common functions.

Swipe Page ViewPager

Swipe page provides an option to navigate a screen horizontally with screen gesture.  It allows the user to efficiently move from item to item using a simple swipe gesture (similar to someone flipping pages through a book). Swipe page accesses the information faster, more fluently and is enjoyable for the user as it provides an effective browsing experience.

Swipe Image 1

Android compatibility package, also known as Support Library, provides an option to implement horizontal view pager user interface. Data associated to each page is managed by an adapter called PagerAdapter.

Below is ViewPager declaration in xml file:

<android.support.v4.view.ViewPager
android:id="@+android:id/myviewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>

 

For additional resources, Android ViewPager training offers step-by-step instructions and tutorials.

Swiss-Army-Knife Navigation

This navigational pattern helps users to explore experimental trends. The navigation option hides in the background, allowing the user to focus more on the screen . In this implementation, the menu options were already created while generating the screen, but it will be hidden until it gets selected. Navigation menu options appearing on the screen can be customized with sliding effects, Fade-in, and Fade-out.

Facebook application implements Swiss-Army-Knife navigation pattern

Facebook SwissArmyKnife Image

Android provides various implementation options to achieve this navigation pattern, but two popular choices are Notification Manager and Navigation Drawer

Here’s another example of Swiss-Army-Knife Navigation

ArmySwissKnife Example Image 1

 

Apply App Widgets

Many users organize their mobile devices to easily access their favorite apps and avoid unnecessary navigation clicks. To help facilitate, developers need to create effortless navigation options.  One example is to provide a widget which always stays at the home screen and periodically gets updated asynchronously. App Widget enables users to access brief information and controls. It also allows app access with one click, which helps users to avoid app locate time.

Below is a sample Android App Widget screen for a weather app

Weather App Image for Widget Example

Android does provide App Widgets to support this functionality.  Using the App Widget below, a developer can provide an option to install the app at the user’s home screen, presenting a small layout with minimal information and a click handler. Users also can navigate directly to the app by clicking the widget from the device home screen.

Widget provider tag:

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
     android:minWidth="40dp"
     android:minHeight="40dp"
     android:updatePeriodMillis="86400000"
     android:previewImage="@drawable/preview"
     android:initialLayout="@layout/example_appwidget"
     android:configure="com.example.android.ExampleAppWidgetConfigure" 
     android:resizeMode="horizontal|vertical"
     android:widgetCategory="home_screen|keyguard"
     android:initialKeyguardLayout="@layout/example_keyguard">
 </appwidget-provider>

Visit the Android developer site to learn how to implement App Widget.

When considering potential navigation functionality for an Android Mobile Application, the most important factor is to carefully think about what your users are looking to accomplish and let that guide your designs.

Have you built a mobile app before and have some recommendations? If so, let us know your best practices in the comments section below.

 

Leave a Comment

Your email address will not be published. Required fields are marked *