The Action Bar: Front to Back

26
Copyright © 2011 CommonsWare, LLC The Action Bar: Front to Back

description

Presentation from the 2011 Android Open conference

Transcript of The Action Bar: Front to Back

Page 1: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

The Action Bar:Front to Back

Page 2: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Action Bar and System Bar

Action Bar

System Bar

Page 3: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Targeting Honeycomb● <uses-sdk android:targetSdkVersion=“11”>

● Effects– Action bar added– Options menu hoisted from status bar soft

button to normal action bar “overflow” position– Holographic theme for widgets

Page 4: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Toolbar Buttons

● Toolbar Buttons = Options Menu Items● Add android:showAsAction to <item> in

menu resource– ifRoom to indicate it can remain an options

menu item if there is no room– withText if you want icon & title

● Backwards-compatible automatically– Attribute ignored on older Android versions

Page 5: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Page 6: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Page 7: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Toolbar Widgets

● Substitute Own Inflated Layout for Standard Toolbar Button– Add android:actionLayout to <item> in

menu resource– Call getActionView() on MenuItem to

configure at runtime● New method in API Level 11● Requires special care to remain backwards-

compatible

Page 8: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Page 9: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Page 10: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Home Affordance

● Fancy Term for “Icon On The Left”– Default = activity icon– Optional android:logo in <application> to

supply alternative image● Virtual menu choice: android.R.id.home

– Handle in onOptionsItemSelected()● setDisplayHomeAsUpEnabled()

– Adds arrowhead

Page 11: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Navigation Modes

● Tabs– Replacement for TabHost– Use setNavigationMode() to enable tabs– Call addTab() on ActionBar for each tab

● Supply a TabListener

– Process tab events● Selected● Unselected● Reselected

Page 12: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Page 13: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Page 14: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Page 15: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Navigation Modes

● “List”– Puts Spinner in navigation area of action bar– Call setNavigationMode() to enable this

mode– Call setListNavigationCallbacks() to

supply SpinnerAdapter and an OnNavigationListener

– Respond to selection events

Page 16: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Page 17: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Page 18: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Page 19: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Navigation Modes

● setCustomView()

– You supply your own View or layout resource ID– Used in the navigation space on the action bar,

instead of tabs or Spinner– Example: AutoCompleteTextView for browser– getCustomView() to retrieve inflated layout for

runtime configuration

Page 20: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Action Modes

● Alternate Action Bar for Contextual Actions– Operations on multiple selections– Replacement for context menu

Page 21: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Action Modes

● DIY Action Mode– Call startActionMode() with

ActionMode.Callback– Configure ActionMode in onCreateActionMode()– onActionItemClicked() if user clicks a toolbar

button– finish() the ActionMode when done

Page 22: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Action Modes

● Automatic Multiple-Choice Action Mode– CHOICE_MODE_MULTIPLE_MODAL and an appropriate

row layout– Long-press checks item, enables remaining

checkboxes, toggles on action mode with your supplied MultiChoiceModeListener callback

● Serves as ActionBar.Callback, plus onItemCheckedStateChanged() for check/uncheck events

Page 23: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Page 24: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Styles and Themes

● Theme.Holo / Theme.Holo.Light– Standard themes, standard color scheme

● Can Style the Action Bar– Lightly-documented– Nick Butcher blog post: http://goo.gl/wUSxN

● Does not work – cannot inherit from private theme● Carlos Sessa workaround: http://goo.gl/TNN0S

Page 25: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

What About the Phone?

● ActionBarSherlock– Modified Android Compatibility Library with

backwards-compatible action bar● Ice Cream Sandwich

Page 26: The Action Bar: Front to Back

Copyright © 2011 CommonsWare, LLC

Source Code

● http://github.com/commonsguy/cw-android– Menus/InflationBC project

● http://github.com/commonsguy/cw-advandroid– Honeycomb/* projects