• Save
Coding for modern UI  - BlrDroid
Upcoming SlideShare
Loading in...5

Coding for modern UI - BlrDroid






Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://ams.activemailservice.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Coding for modern UI  - BlrDroid Coding for modern UI - BlrDroid Presentation Transcript

  • 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. 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 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 apply, then action bar. Otherwise, action overflow.● Action overflow: Provides access to less frequently used actions. Gautham NS
  • 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
  • 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– 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
  • TabsScrollable tabs Fixed 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 apps 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-nav igation/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.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
  • 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 Gautham NS