Android UI patternsWhat? Why? How?            Gautham NS            One touch expenser
What are covered?●   Action bar●   Drag & Drop sorting●   Swipe to dismiss                          Gautham NS
Action BarDedicated space at the top of each screen.Introduced in Android 3.0 (Honeycomb).Alternative to the menu button. ...
Action Bar●   Actions●   Navigation●   Branding●   One of the most important design elements●   Consistency with core and ...
Knowing is not enough.              ●   My own example.              ●   Not using Action Bar                  correctly. ...
Better Gautham NS
General Organization1. App icon2. View control3. Action buttons4. Action overflow                     Gautham NS
Action buttons●   Prioritize your actions using FIT scheme.    (Frequent, Important, Typical).●   If either F, I or T appl...
Split Action Bar1. Main Action bar2. Top bar3. Bottom bar Be careful. Can be overwhelming. Note: You cannot have actions b...
Split Action barDo not use it fornavigation please.                     Gautham NS
View ControlsThree different controls to allow users toswitch between data in different views.–   Tabs–   Spinners–   Draw...
Tabs●   To switch views frequently.●   To be highly aware of the alternate views.●   Fixed tabs●   Scrollable tabs    Alwa...
TabsScrollable tabs                Fixed tabs                  Gautham NS
Spinners●   Drop down menu.●   User switching    between views of    same data set or    sets of the same    type.        ...
Drawers●   Slide-out menu.●   Direct navigation to a    number of views without    direct relationships between    each ot...
Branding       ●   Branding does not           stop at ActionBar.       ●   Use Android Holo           Colors Generator.  ...
Branding done right       Gautham NS
ActionBar Implementation●   Available for Android 3.0 and above.●   Use ActionBarSherlock for 2.x and up.●   ActionBarSher...
ActionBarSherlock implementation●   Extend SherlockActivity or    SherlockFragmentActivity.●   getSupportActionBar() (inst...
Swiping between tabs●   Always allow the user to navigate between views by    swiping left or right on the content area.● ...
Drawers (Slide-out menu)●   New pattern becoming very popular for    navigation.●   Lot of debate in the Android community...
Drag. And drop. Any.do style●   Sorting list view with the help    of drag and drop.●   Useful for todo list, favorites,  ...
Drag. And Drop.●   Let the users know they can drag and drop.●   One way is by showing drag drop image.                   ...
Swipe to dismiss●   As the name    suggests, swipe to    remove an item.●   Actions can also be    mark completed,    arch...
Swipe to dismiss●   Swipe from which side? Preferably both.●   Not suitable for all apps.●   Few downsides    –   Difficul...
Implementation●   Library: DragSortListView by Carl A. Bauer.●   Supports drag and drop sorting and swipe to    dismiss.● ...
Example xml <com.mobeta.android.dslv.DragSortListViewxmlns:android="http://schemas.android.com/apk/res/android"xmlns:dslv=...
Java code:mDslv = getListView();DragSortController controller = new  DragSortController(mDslv);mDslv.setFloatViewManager(c...
Finally,   Questions?                   @gauthamnsgauthamns@onetouchexpenser.com        Gautham NS
Upcoming SlideShare
Loading in …5
×

Coding for modern UI - BlrDroid

1,018 views
915 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,018
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Coding for modern UI - BlrDroid

  1. 1. Android UI patternsWhat? Why? How? Gautham NS One touch expenser
  2. 2. What are covered?● Action bar● Drag & Drop sorting● Swipe to dismiss Gautham NS
  3. 3. Action BarDedicated space at the top of each screen.Introduced in Android 3.0 (Honeycomb).Alternative to the menu button. Gautham NS
  4. 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. 5. Knowing is not enough. ● My own example. ● Not using Action Bar correctly. ● Actions and navigation in the content area. Gautham NS
  6. 6. Better Gautham NS
  7. 7. General Organization1. App icon2. View control3. Action buttons4. Action overflow Gautham NS
  8. 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. 9. Split Action Bar1. Main Action bar2. Top bar3. Bottom bar Be careful. Can be overwhelming. Note: You cannot have actions both on top and bottom. Gautham NS
  10. 10. Split Action barDo not use it fornavigation please. Gautham NS
  11. 11. View ControlsThree different controls to allow users toswitch between data in different views.– Tabs– Spinners– Drawers Gautham NS
  12. 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. 13. TabsScrollable tabs Fixed tabs Gautham NS
  14. 14. Spinners● Drop down menu.● User switching between views of same data set or sets of the same type. Gautham NS
  15. 15. Drawers● Slide-out menu.● Direct navigation to a number of views without direct relationships between each other.● Topmost level of apps hierarchy.● Opened by Up caret & edge swipe or swipe from anywhere. Gautham NS
  16. 16. Branding ● Branding does not stop at ActionBar. ● Use Android Holo Colors Generator. ( android-holo-colors.com ) Gautham NS
  17. 17. Branding done right Gautham NS
  18. 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. 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. 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. 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. 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. 23. Drag. And Drop.● Let the users know they can drag and drop.● One way is by showing drag drop image. Gautham NS
  24. 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. 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. 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. 27. Example xml <com.mobeta.android.dslv.DragSortListViewxmlns: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. 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. 29. Finally, Questions? @gauthamnsgauthamns@onetouchexpenser.com Gautham NS

×