• Save
Android ActionBar Navigation reloaded
Upcoming SlideShare
Loading in...5

Android ActionBar Navigation reloaded



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

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



Total Views
Views on SlideShare
Embed Views



2 Embeds 1,417

http://firety.com 1416
http://www.firety.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

    Android ActionBar Navigation reloaded Android ActionBar Navigation reloaded Presentation Transcript

    • 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 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
    • Android UI Design Patterns• http://www.androiduipatterns.com• Juhani Lehtimaki• Sammlung von Patterns• Analyse von Apps auf Patterns• Beispiele und Anti-Beispiele
    • 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
    • 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
    • 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
    • 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.html
    • 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
    • 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 access • Consistency between phone and tablet appshttp://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 (Konsistenz, 2011)http://www.androiduipatterns.com/2011/06/tablet-ui-patterns-action-bar.html
    • Action Bar
    • • Main action bar • View control • Content area • Split action barhttp://developer.android.com/design/get-started/ui-overview.html
    • 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
    • Main Action Bar• App icon• View control• Action Buttons• Action overflowhttp://developer.android.com/design/patterns/actionbar.html
    • 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.android.com/design/patterns/navigation.html
    • 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/actionbar.html
    • Scrollable Tabs • large number • dynamic • configurable • swipinghttp://developer.android.com/design/patterns/actionbar.html
    • Fixed Tabs• always visible• fixed• swipinghttp://developer.android.com/design/patterns/actionbar.html
    • Collapsed Tabs (aka spinner) • infrequent switches • save screen spacehttp://developer.android.com/design/patterns/actionbar.html
    • Main Action Bar• App icon• View control• Action Buttons• Action overflowhttp://developer.android.com/design/patterns/actionbar.html
    • 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
    • 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
    • Main Action Bar• App icon• View control• Action Buttons• Action overflowhttp://developer.android.com/design/patterns/actionbar.html
    • 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
    • Action Overflowhttp://developer.android.com/design/patterns/actionbar.html
    • Split Action Bar • Main action bar • Top Bar ● navigation • Bottom Bar ● Actions ● Overflowhttp://developer.android.com/design/patterns/actionbar.html
    • Contextual Action Barhttp://developer.android.com/design/patterns/selection.html
    • Contextual Action Bar • Text • Multi-Selection • temporary • dynamichttp://developer.android.com/design/patterns/actionbar.html
    • 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(R.menu.dummymenu, menu); return true;}
    • <?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>
    • <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 android:id="@+id/menu_search" android:title="Customview" android:icon="@drawable/ic_menu_search" android:showAsAction="always" android:actionLayout="@layout/actionview" /></menu>
    • <?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>
    • <?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>
    • @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;}
    • @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;}
    • <item android:id="@+id/menu_share" android:title="Share" android:showAsAction="always" android:actionProviderClass= "android.widget.ShareActionProvider" />
    • this.mAdapter = new ArrayAdapter<String> (this, R.layout.spinner_item, ITEMS);ActionBar actionBar = getActionBar();actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);actionBar.setListNavigationCallbacks(mAdapter, this);
    • view.setOnLongClickListener(new View.OnLongClickListener() { @Override public boolean onLongClick(View v) { mActionMode = startActionMode(mActionModeCallback); v.setSelected(true); return true; } });
    • 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; } }
    • 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()));
    • 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) }}
    • 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 it when not// in touch mode.// The jerk.// This hack tries to prevent this from pulling// focus out of our// ViewPager.
    • Fragment vs. Activity Control
    • Fragment vs. Activity Control Tab ActionBar click Fragment Fragment Activity
    • Fragment vs. Activity Control Tab ActionBar click Fragment Fragment Activity
    • 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 10 11-13 14
    • 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 getSupportedFragmentManager()
    • 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 getSupportedActionBar()