Gautham NSOne touch expenser
Android UI patterns What? Why? How?
Gautham NS
What are covered?
● Action bar● Drag & Drop sorting● Swipe to dismiss
Gautham NS
Action Bar
Dedicated space at the top of each screen.
Introduced in Android 3.0 (Honeycomb).
Alternative to the menu button.
Gautham NS
Action Bar
● Actions● Navigation● Branding
● One of the most important design elements● Consistency with core and other Apps.● Every modern Android app should have it.
Absolutely no exception.
Gautham NS
Knowing is not enough.
● My own example.● Not using Action Bar
correctly.● Actions and
navigation in the content area.
Gautham NS
Better
Gautham NS
General Organization
1. App icon
2. View control
3. Action buttons
4. Action overflow
Gautham NS
Action buttons
● Prioritize your actions using FIT scheme. (Frequent, Important, Typical).
● If either F, I or T apply, then action bar. Otherwise, action overflow.
● Action overflow: Provides access to less frequently used actions.
Gautham NS
Split Action Bar
1. Main Action bar
2. Top bar
3. Bottom bar
Be careful. Can be overwhelming.
Note: You cannot have actions both on top and bottom.
Gautham NS
Split Action bar
Do not use it for navigation please.
Gautham NS
View Controls
Three different controls to allow users to switch between data in different views.– Tabs
– Spinners
– Drawers
Gautham NS
Tabs
● To switch views frequently.● To be highly aware of the alternate views.● Fixed tabs● Scrollable tabs
Always allow swiping left or right for switching between tabs.
Gautham NS
Tabs
Fixed tabs Scrollable tabs
Gautham NS
Spinners
● Drop down menu.● User switching
between views of same data set or sets of the same type.
Gautham NS
Drawers
● Slide-out menu.
● Direct navigation to a number of views without direct relationships between each other.
● Topmost level of app's hierarchy.
● Opened by Up caret & edge swipe or swipe from anywhere.
Gautham NS
Branding
● Branding does not stop at ActionBar.
● Use Android Holo Colors Generator.( android-holo-colors.com )
Gautham NS
Branding done right
Gautham NS
ActionBar Implementation
● Available for Android 3.0 and above.● Use ActionBarSherlock for 2.x and up.● ActionBarSherlock uses native implementation
for 4.0+ and custom implementation for previous versions.
Gautham NS
ActionBarSherlock implementation
● Extend SherlockActivity or SherlockFragmentActivity.
● getSupportActionBar() (instead of getActionBar()).
● SherlockFragment and SherlockListFragment if you want menu related methods in fragments.
Gautham NS
Swiping between tabs
● Always allow the user to navigate between views by swiping left or right on the content area.
● Use ViewPager in conjunction with the ActionBar tabs
● Use fragments as tabs.
● http://developer.android.com/training/implementing-navigation/lateral.html
● Bug in Android system in landscape when swiping
Gautham NS
Drawers (Slide-out menu)
● New pattern becoming very popular for navigation.
● Lot of debate in the Android community about its behaviour.
● Popular library: SlidingMenu by Jeremy Feinstein. ( https://github.com/jfeinstein10/SlidingMenu )
Gautham NS
Drag. And drop. Any.do style
● Sorting list view with the help of drag and drop.
● Useful for todo list, favorites, music playlists, groceries list etc.
● Easy and intuitive rearranging of list items.
● Remember, Not every list needs drag and drop.
● App should sort for the user based on the usage patterns.
Gautham NS
Drag. And Drop.
● Let the users know they can drag and drop.● One way is by showing drag drop image.
Gautham NS
Swipe to dismiss
● As the name suggests, swipe to remove an item.
● Actions can also be mark completed, archive, etc.
● Used in android core UI (dismissing notifications).
Gautham NS
Swipe to dismiss
● Swipe from which side? Preferably both.● Not suitable for all apps.● Few downsides
– Difficult to discover.
– Swipe also used for navigation between tabs.
– Accidental swiping can happen. Should allow for recovering data.
Gautham NS
Implementation
● Library: DragSortListView by Carl A. Bauer.● Supports drag and drop sorting and swipe to
dismiss.● DragSortListView an extension of Android
ListView.● Allows both click to remove and fling to
remove.
Gautham NS
Example xml
<com.mobeta.android.dslv.DragSortListView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:dslv="http://schemas.android.com/apk/res/org.blrdroid
.expenseapp" android:id="@android:id/list"
android:layout_width="fill_parent" android:layout_height="wrap_content"
---------------
dslv:track_drag_sort="false" dslv:use_default_controller="true" />
Gautham NS
Java code:
mDslv = getListView();
DragSortController controller = new DragSortController(mDslv);
mDslv.setFloatViewManager(controller);
mDslv.setOnTouchListener(controller);
mDslv.setDropListener(mDropListener);
mDslv.setRemoveListener(mRemoveListener);
Recommended