Your SlideShare is downloading. ×
Dominik Helleberg | inovex GmbH     Christian Meder | inovex GmbHNavigation reloaded:Das ActionBar Pattern
Dominik HellebergMobile DevelopmentAndroidHTML5      http://dominik-helleberg.de/+      http://twitter.com/_cirrus_
Christian MederLinuxWebJavaCloudAndroidCTO @ inovex        Christian Meder
Agenda• Historie• Action Bar• Code Samples• Portierung• Diskussion
Historie
Google I/O 2010 (Froyo, 2.2)
Google I/O 2010 (Froyo, 2.2)•    http://www.google.com/events/io/2010/sessions/android-ui-design-patterns.html
Action Bar “How can I do <common action> quickly?” • Dedicated real estate at top of the screen to   support • navigation ...
Android UI Design Patterns• http://www.androiduipatterns.com• Juhani Lehtimaki• Sammlung von Patterns• Analyse von Apps au...
Action Bar (Problem, 2010)    „Mobile application screen real estate is very    limited. Generally an application can have...
Action Bar (Solution, 2010)     „Action bar is a branded top bar of the     application that provides easy access to     r...
Action Bar (Consequences, 2010) • „Very easy and fast access to relevant action on current   screen. • Easy access to appl...
Action Bar (Reference, 2010)    UI Pattern Referenz von Googlehttp://www.androiduipatterns.com/2010/11/action-bar.html
Action Bar (Reference, 2010)    Google Developer Day Apphttp://www.androiduipatterns.com/2010/11/action-bar.html
Action Bar (Antipattern, 2010)      Dictionaryhttp://www.androiduipatterns.com/2010/12/action-bar-anti-pattern-gallery.html
Action Bar (Antipattern, 2010)        Tweet Deckhttp://www.androiduipatterns.com/2010/12/action-bar-anti-pattern-gallery.h...
Action Bar (2011)    „Android Action Bar is a well established UI    pattern on Android phone UI design. It is the    sing...
Action Bar (2011)• Honeycomb (3.x)• API level• Tablets• Standard• look like an Android App
Action Bar (Features, 2011) • Actions • Navigation • Search • Contextual actions • Overflow menu • Branding • Home screen ...
Action Bar (Konsistenz, 2011)http://www.androiduipatterns.com/2011/06/tablet-ui-patterns-action-bar.html
Action Bar (Konsistenz, 2011)http://www.androiduipatterns.com/2011/06/tablet-ui-patterns-action-bar.html
Action Bar
• Main action bar                             • View control                             • Content area                   ...
Action Bar• „one of the most important design elements to  implement“• make important actions prominent and accessible in ...
Main Action Bar• App icon• View control• Action Buttons• Action overflowhttp://developer.android.com/design/patterns/actio...
App icon• Up vs Back• Home (minimum)http://developer.android.com/design/patterns/actionbar.html
Navigation• Up: hierarchical relationship• Back: historyhttp://developer.android.com/design/patterns/navigation.html
Back navigation• dismisses floating windows• dismisses contextual Action Bar• hides onscreen keyboardhttp://developer.andr...
app-to-app navigationhttp://developer.android.com/design/patterns/navigation.html
system-to-app navigationhttp://developer.android.com/design/patterns/navigation.html
Main Action Bar• App icon• View control• Action Buttons• Action overflowhttp://developer.android.com/design/patterns/actio...
Scrollable Tabs                                        • large number                                        • dynamic    ...
Fixed Tabs• always visible• fixed• swipinghttp://developer.android.com/design/patterns/actionbar.html
Collapsed Tabs (aka spinner)                                   • infrequent                                     switches  ...
Main Action Bar• App icon• View control• Action Buttons• Action overflowhttp://developer.android.com/design/patterns/actio...
Action Buttons• order by importance• standard icons for standard actions  (share, refresh, delete, ...)• Frequent, Importa...
Action Buttons  F - Frequent               I - Important          T - Typical• 7 out of 10 times        • cool            ...
Main Action Bar• App icon• View control• Action Buttons• Action overflowhttp://developer.android.com/design/patterns/actio...
Action Overflow                            • buttons on main action bar not more                              than 50% wid...
Action Overflowhttp://developer.android.com/design/patterns/actionbar.html
Split Action Bar                              • Main action bar                              • Top Bar                    ...
Contextual Action Barhttp://developer.android.com/design/patterns/selection.html
Contextual Action Bar                                         • Text                                         • Multi-Selec...
Google TV
Action Bar (Antipattern, 2012)             Google Currents
Not a real Action Barhttp://www.androiduipatterns.com/2012/03/readability-yet-another-ios-app-on.html
Not a real Contextual Action Barhttp://www.androiduipatterns.com/2012/03/readability-yet-another-ios-app-on.html
Not a real Share Intenthttp://www.androiduipatterns.com/2012/03/readability-yet-another-ios-app-on.html
CodeSamples
@Overridepublic boolean onCreateOptionsMenu(Menu menu) {    MenuInflater inflater = getMenuInflater();    inflater.inflate...
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android“> <item         andr...
<activity  android:name="DemosNewActivity“  android:uiOptions=  "splitActionBarWhenNarrow"></activity>
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android=   "http://schemas.android.com/apk/res/android">    <item androi...
<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    andro...
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <item android:i...
@Overridepublic boolean onCreateOptionsMenu(Menu menu) {   MenuInflater inflater = getMenuInflater();   inflater.inflate(R...
@Overridepublic boolean onCreateOptionsMenu(Menu menu) {    getMenuInflater().inflate(R.menu.viewbar, menu);    MenuItem m...
<item android:id="@+id/menu_share"         android:title="Share"         android:showAsAction="always"         android:act...
this.mAdapter = new ArrayAdapter<String>          (this, R.layout.spinner_item, ITEMS);ActionBar actionBar = getActionBar(...
view.setOnLongClickListener(new View.OnLongClickListener() {   @Override   public boolean onLongClick(View v) {       mAct...
private ActionMode.Callback mActionModeCallback = new ActionMode.Callback() {        public boolean onCreateActionMode(Act...
ActionBar aBar = getActionBar();aBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);//be aware, this will trigger a onT...
class DemoTabListener implements TabListener{   @Override   public void onTabReselected(Tab tab, FragmentTransaction ft)  ...
Tipps & Tricks• Tabs vs. ViewPager vs. SwipeTabs• Fragment vs. Activity Control• Icon Maker• Compatiblity
Swipe Tabs?//   Unfortunately when TabHost changes the current//   tab, it kindly//   also takes care of putting focus on ...
Fragment vs. Activity Control
Fragment vs. Activity Control      Tab           ActionBar            click   Fragment                     Fragment       ...
Fragment vs. Activity Control      Tab        ActionBar         click   Fragment                  Fragment                ...
Fragment vs. Activity ControlWie kommuniziert das Fragment mit der Activity?• Eigene Interfaces• Intents
Icon Set Creator
Compatibility?
Android Compat ModesTarget        Max   Sdk        Sdk         10            11-13   14
Android Compat Modes Target                         Max    Sdk                         Sdk      10               11-13   14
Android Compat Modes                               Target        Max                                  Sdk        Sdk     1...
Context-Menu -> Action Mode
Options Menu -> ActionBar
Tabbed Activity -> Tabbed AB
Compat Lib•   Fragments•   NavUtils•   Notification•   Grid Layout•   Loader•   View Pager•   LocalBroadcast
Compat Lib                      android.app.Fragment             MyFragment             getFragmentManager()
Compat Lib                        android.app.Fragment      android.support.v4.app.Fragment     MyFragment     getSupporte...
ActionBarSherlock• ActionBar für 2.x / 3.x Geräte
ActionBarSherlock            android.app.Activity             MyActivity             getActionBar()
ActionBarSherlock                   android.app.Activity   com.actionbarsherlock.app.SherlockActivity          MyActivity ...
Android ActionBar Navigation reloaded
Android ActionBar Navigation reloaded
Upcoming SlideShare
Loading in...5
×

Android ActionBar Navigation reloaded

13,143

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
13,143
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Transcript of "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()

×