Android ActionBar Navigation reloaded

14,093 views

Published on

Android ActionBar Pattern in depth, presented during Mobile Tech Con 2012 / Android Expert Day

0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
14,093
On SlideShare
0
From Embeds
0
Number of Embeds
1,416
Actions
Shares
0
Downloads
0
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Android ActionBar Navigation reloaded

  1. 1. Dominik Helleberg | inovex GmbH Christian Meder | inovex GmbHNavigation reloaded:Das ActionBar Pattern
  2. 2. Dominik HellebergMobile DevelopmentAndroidHTML5 http://dominik-helleberg.de/+ http://twitter.com/_cirrus_
  3. 3. Christian MederLinuxWebJavaCloudAndroidCTO @ inovex Christian Meder
  4. 4. Agenda• Historie• Action Bar• Code Samples• Portierung• Diskussion
  5. 5. Historie
  6. 6. Google I/O 2010 (Froyo, 2.2)
  7. 7. Google I/O 2010 (Froyo, 2.2)• http://www.google.com/events/io/2010/sessions/android-ui-design-patterns.html
  8. 8. Action Bar “How can I do <common action> quickly?” • Dedicated real estate at top of the screen to support • navigation and frequently used operations • Replaces title bar • Best for actions common across your app • Search, Refresh, Compose (new) • Can provide a quick link back to dashboard • (or other app home) http://www.google.com/events/io/2010/sessions/android-ui-design-patterns.html
  9. 9. Android UI Design Patterns• http://www.androiduipatterns.com• Juhani Lehtimaki• Sammlung von Patterns• Analyse von Apps auf Patterns• Beispiele und Anti-Beispiele
  10. 10. Action Bar (Problem, 2010) „Mobile application screen real estate is very limited. Generally an application can have multiple actions available for users on a single screen. Introducing buttons for each action can use a lot of space. On top of the space problem buttons can also cause consistency problems between screens and applications.“http://www.androiduipatterns.com/p/android-ui-pattern-collection.html
  11. 11. Action Bar (Solution, 2010) „Action bar is a branded top bar of the application that provides easy access to relevant actions on the screen and a shortcut to applications home screen. The action bar can also be used to indicate uses location in the application.“http://www.androiduipatterns.com/p/android-ui-pattern-collection.html
  12. 12. Action Bar (Consequences, 2010) • „Very easy and fast access to relevant action on current screen. • Easy access to applications home screen by clicking the application logo at left. This paradigm is already well known from web sites. • opportunity to provide branding to the application. • Helps user in navigation by indicating his / her current location in app.“http://www.androiduipatterns.com/p/android-ui-pattern-collection.html
  13. 13. Action Bar (Reference, 2010) UI Pattern Referenz von Googlehttp://www.androiduipatterns.com/2010/11/action-bar.html
  14. 14. Action Bar (Reference, 2010) Google Developer Day Apphttp://www.androiduipatterns.com/2010/11/action-bar.html
  15. 15. Action Bar (Antipattern, 2010) Dictionaryhttp://www.androiduipatterns.com/2010/12/action-bar-anti-pattern-gallery.html
  16. 16. Action Bar (Antipattern, 2010) Tweet Deckhttp://www.androiduipatterns.com/2010/12/action-bar-anti-pattern-gallery.html
  17. 17. Action Bar (2011) „Android Action Bar is a well established UI pattern on Android phone UI design. It is the single most powerful visual tool to make an app look like an Android app. In their tablet version of the Android OS Google decided to support the pattern on API level. In Honeycomb implementing a standard looking Action Bar is easier than ever before.“http://www.androiduipatterns.com/2011/06/tablet-ui-patterns-action-bar.html
  18. 18. Action Bar (2011)• Honeycomb (3.x)• API level• Tablets• Standard• look like an Android App
  19. 19. Action Bar (Features, 2011) • Actions • Navigation • Search • Contextual actions • Overflow menu • Branding • Home screen access • Consistency between phone and tablet appshttp://www.androiduipatterns.com/2011/06/tablet-ui-patterns-action-bar.html
  20. 20. Action Bar (Konsistenz, 2011)http://www.androiduipatterns.com/2011/06/tablet-ui-patterns-action-bar.html
  21. 21. Action Bar (Konsistenz, 2011)http://www.androiduipatterns.com/2011/06/tablet-ui-patterns-action-bar.html
  22. 22. Action Bar
  23. 23. • Main action bar • View control • Content area • Split action barhttp://developer.android.com/design/get-started/ui-overview.html
  24. 24. Action Bar• „one of the most important design elements to implement“• make important actions prominent and accessible in a predictable way• consistent navigation and view switching• action overflow for rarely used actions• a dedicated space for identity• consistency with core appshttp://developer.android.com/design/patterns/actionbar.html
  25. 25. Main Action Bar• App icon• View control• Action Buttons• Action overflowhttp://developer.android.com/design/patterns/actionbar.html
  26. 26. App icon• Up vs Back• Home (minimum)http://developer.android.com/design/patterns/actionbar.html
  27. 27. Navigation• Up: hierarchical relationship• Back: historyhttp://developer.android.com/design/patterns/navigation.html
  28. 28. Back navigation• dismisses floating windows• dismisses contextual Action Bar• hides onscreen keyboardhttp://developer.android.com/design/patterns/navigation.html
  29. 29. app-to-app navigationhttp://developer.android.com/design/patterns/navigation.html
  30. 30. system-to-app navigationhttp://developer.android.com/design/patterns/navigation.html
  31. 31. Main Action Bar• App icon• View control• Action Buttons• Action overflowhttp://developer.android.com/design/patterns/actionbar.html
  32. 32. Scrollable Tabs • large number • dynamic • configurable • swipinghttp://developer.android.com/design/patterns/actionbar.html
  33. 33. Fixed Tabs• always visible• fixed• swipinghttp://developer.android.com/design/patterns/actionbar.html
  34. 34. Collapsed Tabs (aka spinner) • infrequent switches • save screen spacehttp://developer.android.com/design/patterns/actionbar.html
  35. 35. Main Action Bar• App icon• View control• Action Buttons• Action overflowhttp://developer.android.com/design/patterns/actionbar.html
  36. 36. Action Buttons• order by importance• standard icons for standard actions (share, refresh, delete, ...)• Frequent, Important, Typical• Download icon packhttp://developer.android.com/design/patterns/actionbar.html
  37. 37. Action Buttons F - Frequent I - Important T - Typical• 7 out of 10 times • cool • typical first-class action• several times in a row• rare but needs to • surprised if buried in• extra step burdensome effortless overflow http://developer.android.com/design/patterns/actionbar.html
  38. 38. Main Action Bar• App icon• View control• Action Buttons• Action overflowhttp://developer.android.com/design/patterns/actionbar.html
  39. 39. Action Overflow • buttons on main action bar not more than 50% width • smaller than 360 dp = 2 icons • 360-499 dp = 3 icons • 500-599 dp = 4 icons • 600 dp and larger = 5 icons • overflow icon only without hardware menu buttonhttp://developer.android.com/design/patterns/actionbar.html
  40. 40. Action Overflowhttp://developer.android.com/design/patterns/actionbar.html
  41. 41. Split Action Bar • Main action bar • Top Bar ● navigation • Bottom Bar ● Actions ● Overflowhttp://developer.android.com/design/patterns/actionbar.html
  42. 42. Contextual Action Barhttp://developer.android.com/design/patterns/selection.html
  43. 43. Contextual Action Bar • Text • Multi-Selection • temporary • dynamichttp://developer.android.com/design/patterns/actionbar.html
  44. 44. Google TV
  45. 45. Action Bar (Antipattern, 2012) Google Currents
  46. 46. Not a real Action Barhttp://www.androiduipatterns.com/2012/03/readability-yet-another-ios-app-on.html
  47. 47. Not a real Contextual Action Barhttp://www.androiduipatterns.com/2012/03/readability-yet-another-ios-app-on.html
  48. 48. Not a real Share Intenthttp://www.androiduipatterns.com/2012/03/readability-yet-another-ios-app-on.html
  49. 49. CodeSamples
  50. 50. @Overridepublic boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.dummymenu, menu); return true;}
  51. 51. <?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android“> <item android:id="@+id/menu_help" android:icon="@drawable/ic_menu_help" android:title="Help (al)" android:showAsAction="always"/></menu>
  52. 52. <activity android:name="DemosNewActivity“ android:uiOptions= "splitActionBarWhenNarrow"></activity>
  53. 53. <?xml version="1.0" encoding="utf-8"?><menu xmlns:android= "http://schemas.android.com/apk/res/android"> <item android:id="@+id/menu_search" android:title="Customview" android:icon="@drawable/ic_menu_search" android:showAsAction="always" android:actionLayout="@layout/actionview" /></menu>
  54. 54. <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <ProgressBar android:id="@+id/progressBar1" style="?android:attr/progressBarStyleHorizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:indeterminate="true"/> <Switch android:id="@+id/switch1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Switch" /></LinearLayout>
  55. 55. <?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/menu_search" android:title="Customview" android:icon="@drawable/ic_action_name" android:showAsAction="always" android:actionViewClass="android.widget.SearchView" /></menu>
  56. 56. @Overridepublic boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.viewbar, menu); SearchView searchView = (SearchView) menu.findItem(R.id.menu_search).getActionView(); return true;}
  57. 57. @Overridepublic boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.viewbar, menu); MenuItem menuItem = menu.findItem(R.id.menu_search); menuItem.setOnActionExpandListener(new OnActionExpandListener() { @Override public boolean onMenuItemActionCollapse(MenuItem item) { return true; // Return true to collapse action view } @Override public boolean onMenuItemActionExpand(MenuItem item) { return true; // Return true to expand action view } }); return true;}
  58. 58. <item android:id="@+id/menu_share" android:title="Share" android:showAsAction="always" android:actionProviderClass= "android.widget.ShareActionProvider" />
  59. 59. this.mAdapter = new ArrayAdapter<String> (this, R.layout.spinner_item, ITEMS);ActionBar actionBar = getActionBar();actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);actionBar.setListNavigationCallbacks(mAdapter, this);
  60. 60. view.setOnLongClickListener(new View.OnLongClickListener() { @Override public boolean onLongClick(View v) { mActionMode = startActionMode(mActionModeCallback); v.setSelected(true); return true; } });
  61. 61. private ActionMode.Callback mActionModeCallback = new ActionMode.Callback() { public boolean onCreateActionMode(ActionMode mode, Menu menu) { // Inflate a menu resource providing context menu items MenuInflater inflater = mode.getMenuInflater(); inflater.inflate(R.menu.modemenu, menu); return true; } // Called when the user selects a contextual menu item @Override public boolean onActionItemClicked(ActionMode mode, MenuItem item) { switch (item.getItemId()) { case R.id.menu_share: mode.finish(); // Action picked, so close the CAB return true; default: return false; } }
  62. 62. ActionBar aBar = getActionBar();aBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);//be aware, this will trigger a onTabSelected Call!aBar.addTab(aBar.newTab() .setText("Tab 1") .setTabListener(new DemoTabListener()));aBar.addTab(aBar.newTab() .setText("Tab 2") .setTabListener(new DemoTabListener()));
  63. 63. class DemoTabListener implements TabListener{ @Override public void onTabReselected(Tab tab, FragmentTransaction ft) } @Override public void onTabSelected(Tab tab, FragmentTransaction ft) { Log.v(TAG, "on Tab selected :"+tab.getText()); } @Override public void onTabUnselected(Tab tab, FragmentTransaction ft) }}
  64. 64. Tipps & Tricks• Tabs vs. ViewPager vs. SwipeTabs• Fragment vs. Activity Control• Icon Maker• Compatiblity
  65. 65. Swipe Tabs?// Unfortunately when TabHost changes the current// tab, it kindly// also takes care of putting focus on it when not// in touch mode.// The jerk.// This hack tries to prevent this from pulling// focus out of our// ViewPager.
  66. 66. Fragment vs. Activity Control
  67. 67. Fragment vs. Activity Control Tab ActionBar click Fragment Fragment Activity
  68. 68. Fragment vs. Activity Control Tab ActionBar click Fragment Fragment Activity
  69. 69. Fragment vs. Activity ControlWie kommuniziert das Fragment mit der Activity?• Eigene Interfaces• Intents
  70. 70. Icon Set Creator
  71. 71. Compatibility?
  72. 72. Android Compat ModesTarget Max Sdk Sdk 10 11-13 14
  73. 73. Android Compat Modes Target Max Sdk Sdk 10 11-13 14
  74. 74. Android Compat Modes Target Max Sdk Sdk 10 11-13 14
  75. 75. Context-Menu -> Action Mode
  76. 76. Options Menu -> ActionBar
  77. 77. Tabbed Activity -> Tabbed AB
  78. 78. Compat Lib• Fragments• NavUtils• Notification• Grid Layout• Loader• View Pager• LocalBroadcast
  79. 79. Compat Lib android.app.Fragment MyFragment getFragmentManager()
  80. 80. Compat Lib android.app.Fragment android.support.v4.app.Fragment MyFragment getSupportedFragmentManager()
  81. 81. ActionBarSherlock• ActionBar für 2.x / 3.x Geräte
  82. 82. ActionBarSherlock android.app.Activity MyActivity getActionBar()
  83. 83. ActionBarSherlock android.app.Activity com.actionbarsherlock.app.SherlockActivity MyActivity getSupportedActionBar()

×