Action bar

1

Action Bar

Kewang

2

1.App icon (android.R.id.home)2.View control3.Action buttons4.Action overflow

3

Action Bar wants to provide

Identifying the app brandConsistent navigationMake key actions

4

Show Action Bar

<uses-sdk android:minSdkVersion="11" />

<application android:theme="@android:style/Theme.Holo" />

API Level MUST be 11 or greatertheme's android:windowActionBar="true", or theme MUST be Holo or its descendants

5

Hide Action Bar

<application android:theme="@android:style/Theme.Holo.NoActionBar" />

getActionBar().hide();

Manifest.xml (remove Action Bar)

at Activity

6

App Icon for Navigation

●Go to the app "home" activity●Navigate "up" the app's structural hierarchy

7

App Icon for Navigation (Home)

@Overridepublic boolean onOptionsItemSelected(MenuItem item) { if (item.getItemId() == android.R.id.home) { Intent intent = new Intent(this, Main.class);

intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);

startActivity(intent);

return true; }} add FLAG_ACTIVITY_CLEAR_TOP

8

App Icon for Navigation (Up)

BACK navigation

9

UP navigation

App Icon for Navigation (Up)

10

getActionBar().setDisplayHomeAsUpEnabled(true);

App Icon for Navigation (Up)

11

Action Items

12

Action Items

<item android:actionViewClass="android.widget.SearchView" android:icon="@drawable/icon_modify" android:showAsAction="ifRoom" android:title="@string/menu_settings"/><item android:icon="@drawable/icon_status" android:showAsAction="ifRoom|withText" android:title="設定二"/>

MUST define title & id

13

<item android:icon="@drawable/icon_setup" android:showAsAction="never" android:title="設定一"/><item android:icon="@drawable/icon_manual" android:showAsAction="always" android:title="主設定"> <menu> <item android:title="密碼設定"/> <item android:title="檢核戶號"/> </menu></item>

Action Items

14

Action View@Overridepublic boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu);

SearchView v = menu.findItem(R.id.set).getActionView();

v.setOnSearchClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(Main.this, "Search", Toast.LENGTH_SHORT).show(); } });

return true;}

15

Action Bar Custom View

actionBarView = getLayoutInflater().inflate(R.layout.navigation, null);

getActionBar().setCustomView(actionBarView);getActionBar().setDisplayShowCustomEnabled(true);

16

Styling

boolean: android:windowActionBarOverlay

false

true

17

Styling

android:actionButtonStyleandroid:actionBarItemBackgroundandroid:itemBackgroundandroid:actionBarDividerandroid:actionMenuTextColorandroid:actionMenuTextAppearanceandroid:actionBarWidgetTheme

18

ActionView

19

ActionView

<item android:id="@+id/search" android:actionViewClass="android.widget.SearchView" android:showAsAction="ifRoom|collapseActionView" android:title="Search"/>

<item android:id="@+id/search" android:actionLayout="@layout/action_layout" android:showAsAction="ifRoom|collapseActionView" android:title="Search"/>

20

ActionViewpublic boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu);

MenuItem item = menu.findItem(R.id.search); View v = (View) item.getActionView(); // SDK 11+

item.setOnActionExpandListener(new OnActionExpandListener() { boolean onMenuItemActionExpand(MenuItem item) { return true; // trigger by item.expandActionView() }

boolean onMenuItemActionCollapse(MenuItem item) { return true; // trigger by item.collapseActionView() } });

return true;}

only SDK 14+

21

Navigation

22

Navigation

setNavigationMode(int)• ActionBar.NAVIGATION_MODE_STANDARD• ActionBar.NAVIGATION_MODE_TABS• ActionBar.NAVIGATION_MODE_LIST

23

Navigation

STANDARD

24

Navigation

TABS

25

Navigation

LIST

26

Navigation - TABS implementationTab tab = getActionBar().newTab();

tab.setText("這是TAB Name");tab.setIcon(getDrawable(R.drawable.icon_setup));tab.setTabListener(new TabListener() { void onTabUnselected(Tab, FragmentTransaction) {}

void onTabSelected(Tab, FragmentTransaction) { // using tab.getPosition() to do something }

void onTabReselected(Tab, FragmentTransaction) {}});

getActionBar().addTab(tab);

27

Navigation - LIST implementation

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.simple_spinner_item, R.id.text1, new String[] { "aaa", "bbb" });

adapter.setDropDownViewResource(R.layout.simple_spinner_dropdown_item);

getActionBar().setListNavigationCallbacks(adapter, new OnNavigationListener() { boolean onNavigationItemSelected(int position, long id) { // using position to do something

return true; }});

28

「API就是要無腦！

」

29

FragmentFramework

• Action Bar's style• Navigation mode• Fragment's callback at CRUD• App Icon navigation mode• Swipe all fragments• Main fragment settings

30

public abstract class Container { public void addFragment(String, Fragment) public void removeFragment(Fragment) public void showFragment(Fragment) public void hideFragment(Fragment) public void replaceFragment(String, Fragment)

public void onFragmentAdded(FragmentProperty) public void onFragmentRemoved(FragmentProperty) public void onFragmentShown(FragmentProperty) public void onFragmentHidden(FragmentProperty) public void onFragmentReplaced(FragmentProperty)}

Container

31

public abstract class Container { public boolean isSliding(); public int getNavigationMode(); public int getAppIconMode();

public abstract Fragment getMainFragment(); public abstract String getMainFragmentName();}

Container

32

Navigation

public interface ListNavigation { public void setActionBar(ActionBar actionBar); public int getActionBarLayoutId(); public BaseAdapter getNavigationAdapter();

public interface StandardNavigation extends ListNavigation { public int getNavigationWidth(); public int getNavigationDirection(); }} ListNavigation for LIST

StandardNavigation for STANDARD

33

TODO

• TODO standard navigation direction• TODO communication between fragments• TODO bulk fragments on creating• TODO hierarchical fragments• TODO more generic• more...

34