Coding modern UI - Actionbar, Drag & Drop, Swipe to dismiss

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);

Gautham NS

Finally,Questions?

@gauthamnsgauthamns@onetouchexpenser.com