Android App Development - 05 Action bar

ActionBar
The Action Bar is the graphical component of each application
that identifies the navigated section, provide the user with the
possible actions for that section and defines the type of
navigation.
Action Bar
1. Icon that identifies the application
2. Available Shares
3. Menu overflow to other actions

ActionBar
The ActionBar has been added with Android 3.0. To make its
functionality available for all versions of Android, you must:
● Integrate the support library v7 and use:
import android.support.v7.app.ActionBar;
instead of:
import android.app.ActionBar;
● Extend ActionBarActivity class
● Declare a compatible theme for the Activity:
<activity android:theme="@style/Theme.AppCompat.Light" >
You can show or hide the ActionBar using:
getSupportActionBar().show();
getSupportActionBar().hide();
Support Action Bar

ActionBar
In order to add actions on the Action Bar actions must be defined
in /res/menu folder with an .xml file:
<menu
xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@+id/action_search"
android:icon="@drawable/ic_action_search"
android:title="@string/action_search"/>
<item android:id="@+id/action_compose"
android:icon="@drawable/ic_action_compose"
android:title="@string/action_compose" />
</menu>
In Activity class you must override the onCreateOptionMenu()
method:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.actions, menu);
return true;
}
Action Items

ActionBar
The management of the actions and their visibility are entrusted
to the system which calculates the available space and adds
them according to the definition of the xml file. Adding the
showAsAction attribute in the menu you can manage the actions:
●
never:it is never shown
●
ifRoom: it's shown if there is enaough space available,
otherwise it is added to the overflow
●
always: it's always shown
<item
android:id="@+id/action_compose"
android:icon="@drawable/ic_action_compose"
android:showAsAction="ifRoom"/>
Action Items

ActionBar
When the user interacts with the Action Items the
Activity.onOptionsItemSelected() method is invoked :
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_search:
openSearch();
return true;
case R.id.action_compose:
composeMessage();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
Action Items Selection

ActionBar
If the space for action is not enough, you can bring up an
extension on the bottom of the display in which Action Items are
shown.
To do so, you must add the following attribute to the Activity in the
Manifest:
android:uiOptions="splitActionBarWhenNarrow"
Split Action Bar

ActionBar
You can enable the up navigation by enabling the user to return to
a higher level of navigation. To do this, in onCreate() method it
must be entered:
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
This enables clicking on the home icon and show the arrow.
Pattern: up the navigation and click on the back of the system do
not always get the same result:
●Back navigation: it shows the order in reverse chronological
navigation
●Up navigation: it shows hierarchically the higher level navigation
Up Navigation

ActionBar
In order to define the result of the up navigation through Activity,
there are 2 alternatives:
● You can defines the ParentActivity in Manifest for each
Activity:
android:parentActivityName="com.example.myfirstapp.MainActivity"
● You can override:
@Override
public Intent getSupportParentActivityIntent() {
return super.getSupportParentActivityIntent();
}
Up Navigation

ActionBar
The Action View is a widget that replaces the icon when the user
interacts with it. In order to declare an Action View you must add
the following in the menu file:
● android:actionLayout="@layout/search_view"
● android:actionViewClass="android.support.v7.widget.Sea
rchView"
Action View

ActionBar
An Action Provider as a ActionView replaces the button, but it has
complete control of the behavior of the Action.
To insert a Action Provider on the Action Bar You must add the
following attribute inside the menu xml file (there are predefined
by the ActionProvider platform, as ShareActionProvider):
android:actionProviderClass="android.support.v7.widget.ShareActionProvider"
To define a custom Action Provider you must extend
ActionProvider. In these cases it is not necessary to enter the
event management in Activity.onOptionsItemSelected(), but you
can use the ActionProvider.onPerformDefaultAction().
Action Provider

ActionBar
In a Custom Action Provider you must:
● Pass the Context to the costructor:
public CustomActionProvider(Context context) {
super(context);
}
● Define the Action View:
@Override
public View onCreateActionView() {
LayoutInflater inflater = LayoutInflater.from(getContext());
View view = inflater.inflate(R.layout.activity_main, null);
return view;
}
● Define the action:
@Override
public boolean onPerformDefaultAction() {
Intent intent = new Intent(Intent.ACTION_SEND);
getContext().startActivity(intent);
return true;
}
Action Provider

ActionBar
The Action Bar allows you to define a 3-tier Application
Navigation:
● Navigation Tabs: the user navigates between sections with
horizontal swype
● Drop-Down Menu: the user selects the title of the Action Bar
and a drop down menu appears with a list of available
sections
● Navigation Drawer: the user selects the application icon on
the Action Bar and an additional menu appears to the left
where the developer can put any type of View.
Navigation

ActionBar
The graphical management of the placement of the Tab is given
to the system that decides whether to include them as part of the
Action Bar or in a separate space.
Navigation - Tabs
To integrate the Activity with this type of navigation:
● Declare the Tab Navigation in Activity.onCreate():
getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

ActionBar
Navigation - Tabs
● Implement ActionBar.TabListener interface:
@Override
public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
}
@Override
public void onTabSelected(Tab arg0, FragmentTransaction arg1) {
}
@Override
public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
}
● Add Tabs to the Action Bar in Activity.onCreate():
Tab tab = getSupportActionBar().newTab().setText(R.string.example)
.setTabListener(this);
getSupportActionBar().addTab(tab);

ActionBar
Navigation – DropDown Menu
The DropDown menu (or Spinner) is used when it is not
frequently change the contents of the Activity.

ActionBar
Navigation – DropDown Menu
In order to integrate it:
● Declare List Navigation in Activity.onCreate():
getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
● Create a SpinnerAdapter:
SpinnerAdapter mSpinnerAdapter = ArrayAdapter.createFromResource(this,
R.array.action_list,
android.R.layout.simple_spinner_dropdown_item);
● Implements ActionBar.OnNavigationListener:
@Override
public boolean onNavigationItemSelected(int position, long itemId) {
return true;
}
● Set the callbacks to handle Action Bar click:
getSupportActionBar().setListNavigationCallbacks(spinnerAdapter,
navigationCallback);

ActionBar
Navigation – Drawer
The Navigation Drawer is a panel that appears to the left as the
user selects the icon for the Action Bar and shows you the
navigation options.

ActionBar
In order to integrate it:
● Insert a DrawerLayout as Activity layout root:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start" />
</android.support.v4.widget.DrawerLayout>

ActionBar
● Retrieve Activity DrawerLayout and ListView:
DrawerLayout mDrawerLayout = (DrawerLayout)
findViewById(R.id.drawer_layout);
ListView mDrawerList = (ListView) findViewById(R.id.left_drawer);
● Set an Adapter to the list:
mDrawerList.setAdapter(new ArrayAdapter<String>(this,
R.layout.drawer_list_item, mPlanetTitles));
● Handle the on item clicks of the list:
mDrawerList.setOnItemClickListener(this);
It is possible to handle the Navigation Drawer opening/closing
events:
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this,
mDrawerLayout, R.drawable.ic_drawer, R.string.drawer_open,
R.string.drawer_close) {
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
}
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);

ActionBar
Action Bar Style
In order to customize the Action Bar you can use styles in
/res/values file.
<resources>
<style name="CustomActionBarTheme" parent="@style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">@style/TabTextStyle</item>
<item name="android:actionMenuTextColor">@color/actionbar_text</item>
<item name="actionBarStyle">@style/MyActionBar</item>
<item name="actionBarTabTextStyle">@style/TabTextStyle</item>
<item name="actionMenuTextColor">@color/actionbar_text</item>
</style>
<style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar">
<item name="android:titleTextStyle">@style/TitleTextStyle</item>
<item name="android:background">@drawable/actionbar_background</item>
<item name="android:backgroundStacked">@drawable/actionbar_background</item>
<item name="android:backgroundSplit">@drawable/actionbar_background</item>
<item name="titleTextStyle">@style/TitleTextStyle</item>
<item name="background">@drawable/actionbar_background</item>
<item name="backgroundStacked">@drawable/actionbar_background</item>
<item name="backgroundSplit">@drawable/actionbar_background</item>
</style>
<style name="TitleTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_text</item>
</style>
<style name="TabTextStyle" parent="@style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">@color/actionbar_text</item>
</style>
</resources>

Android App Development - 05 Action bar

More Related Content

What's hot (20)

Similar to Android App Development - 05 Action bar (20)

More from Diego Grancini (12)

Android App Development - 05 Action bar