1. Android UI patterns
What? Why? How?
Gautham NS
One touch expenser

2. What are covered?
● Action bar
● Drag & Drop sorting
● Swipe to dismiss
Gautham NS

3. Action Bar
Dedicated space at the top of each screen.
Introduced in Android 3.0 (Honeycomb).
Alternative to the menu button.
Gautham NS

4. 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

5. Knowing is not enough.
● My own example.
● Not using Action Bar
correctly.
● Actions and
navigation in the
content area.
Gautham NS

6. Better
Gautham NS

7. General Organization
1. App icon
2. View control
3. Action buttons
4. Action overflow
Gautham NS

8. 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

9. 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

10. Split Action bar
Do not use it for
navigation please.
Gautham NS

11. View Controls
Three different controls to allow users to
switch between data in different views.
– Tabs
– Spinners
– Drawers
Gautham NS

12. 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

13. Tabs
Scrollable tabs Fixed tabs
Gautham NS

14. Spinners
● Drop down menu.
● User switching
between views of
same data set or
sets of the same
type.
Gautham NS

15. 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

16. Branding
● Branding does not
stop at ActionBar.
● Use Android Holo
Colors Generator.
( android-holo-colors.com )
Gautham NS

17. Branding done right
Gautham NS

18. 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

19. ActionBarSherlock implementation
● Extend SherlockActivity or
SherlockFragmentActivity.
● getSupportActionBar() (instead of
getActionBar()).
● SherlockFragment and SherlockListFragment
if you want menu related methods in
fragments.
Gautham NS

20. 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-nav
igation/lateral.html
● Bug in Android system in landscape when swiping
Gautham NS

21. 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

22. 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

23. Drag. And Drop.
● Let the users know they can drag and drop.
● One way is by showing drag drop image.
Gautham NS

24. 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

25. 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

26. 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

27. 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

28. Java code:
mDslv = getListView();
DragSortController controller = new
DragSortController(mDslv);
mDslv.setFloatViewManager(controller);
mDslv.setOnTouchListener(controller);
mDslv.setDropListener(mDropListener);
mDslv.setRemoveListener(mRemoveListener);
Gautham NS

29. Finally,
Questions?
@gauthamns
gauthamns@onetouchexpenser.com
Gautham NS