1. Using Action Bar in Android: A Tutorial
http://eglobiotraining.com/
Prof. Erwin M. Globio, MSIT
Android Development Expert
http://eglobiotraining.com
2. Introduction to the ActionBar
What is the ActionBar
The ActionBar is located at the top of the activity. It can display
the activity title, icon, actions which can be triggered, additional
views Views other interactive items. It can also be used for
navigation in your application.
Older Android devices have a hardware Option button which
would open a menu at the bottom of the application once
pressed, i.e. the OptionsMenu. The ActionBar is superior to the
OptionsMenu, in that it is clearly visible, while the OptionsMenu
is only shown on request and the user may not recognize that
options are available.
http://eglobiotraining.com
3. Example
The following picture shows the ActionBar of a
The Google+ Android application with interactive
items and a navigation bar.
http://eglobiotraining.com
4. Using the ActionBar on older devices
The ActionBar has introduced in Android 3.0. The
ActionBar Sherlock library allows to use the ActionBar
on Android devices as of Android 1.6. You find this
library under the following link.
http://actionbarsherlock.com
http://eglobiotraining.com
5. Using the ActionBar
Creating actions in the ActionBar
An activity populates the ActionBar in its
onCreateOptionsMenu() method. We call these entries actions.
The actions for the ActionBar are typically defined in an XML
resource file. The MenuInflator class allows to inflate actions
defined in an XML file and add them to the ActionBar.
The showAsAction attribute allows you to define how the action
is displayed. For example the ifRoom attribute defines that the
action is on y displayed in the ActionBar if there is sufficient
space available.
http://eglobiotraining.com
7. Search an actions in the ActionBar
To search for a menu item in a menu you can use the
findItem() method of the Menu class. This method allows to
search by id.
Reacting to actions selection
If an actions in the ActionBar is selected, the
onOptionsItemSelected() method is called. It receives the
selected action as parameter. Based on this information you
code can decide what to do.
http://eglobiotraining.com
9. Changing the menu
The onCreateOptionsMenu() method is only called once. If
you want to change the menu later you have to call the
invalidateOptionsMenu() method. Afterwards this
onCreateOptionsMenu() method is called again.
http://eglobiotraining.com
10. Customizing the ActionBar
Adjusting the ActionBar
You can change the visibility of the ActionBar at runtime. The
following code demonstrates that.
ActionBar actionBar = getActionBar();
actionBar.hide();
// More stuff here...
actionBar.show();
http://eglobiotraining.com
11. You can also change the text which is displayed
alongside the application icon at runtime. The
following example shows that.
ActionBar actionBar = getActionBar();
actionBar.setSubtitle("mytest");
actionBar.setTitle(“eglobiotraining.com");
http://eglobiotraining.com
12. Assiging a Drawable
You also add a drawable to the ActionBar background via the
ActionBar.setBackgroundDrawable() method.
The ActionBar scales the image therefore it is best practice to
provide a scalable drawable, e.g. an 9-patch or XML drawable.
As of Android 4.2 the drawable for the ActionBar can also be an
animated.
http://eglobiotraining.com
13. Dimming the Android default navigation Buttons
You can also hide the software navigation button in your Android application
to have more space available. If the user touches the button of the screen the
navigation button are automatically shown again.
You can dim the navigation buttons in an activity with the following code.
getWindow().
getDecorView().
setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
http://eglobiotraining.com
14. The following screenshots show an application with and
without the navigation buttons.
http://eglobiotraining.com
15. Further options for the ActionBar
Using the home icon
The action bar shows an icon of your application, this is called the
home icon. You can add an action to this icon. If you select this
icon the onOptionsItemSelected() method will be called with the
value android.R.id.home. The recommendation is to return to the
main activity in your program.
// If home icon is clicked return to main Activity
case android.R.id.home:
Intent intent = new Intent(this, OverviewActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
startActivity(intent);
break;
http://eglobiotraining.com
16. As of Android 4.1 this code is not required anymore, you can
simply set the parentActivityName in the AndroidManifest.xml
file, pointing to the parent activity.
<activity
android:name="com.vogella.android.actionbar.customviews.S
econdActivity"
android:label="@string/app_name"
android:parentActivityName="MainActivity">
</activity>
http://eglobiotraining.com
17. Navigation via the home icon
The home icon can also be used for an "up" navigation in your
application. In practice this is not frequently used by Android
applications and should therefore be avoided.
Enabling the split action bar
You can define that the action bar should be automatically split
by the system if not enough space is available.
You can activate that via the
android:uiOptions="SplitActionBarWhenNarrow" parameter in
the declaration of your application or activity in the
AndroidManifest.xml file.
http://eglobiotraining.com
18. Making the ActioinBar dynamic
Custom Views in the ActionBar
You can also add a custom View to the ActionBar. For this you use the setCustomView
method for the ActionView class. You also have to enable the display of custom views
via the setDisplayOptions() method by passing in the
ActionBar.DISPLAY_SHOW_CUSTOM flag.
For example you can define a layout file which contains a EditText element.
<?xml version="1.0" encoding="utf-8"?>
<EditText xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/searchfield"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="textFilter" >
</EditText>
This layout can be assigned to the ActionBar via the following code. The example
code allow attaches a listener to the custom view.
http://eglobiotraining.com
19. package com.vogella.android.actionbar.customviews;
import android.app.ActionBar;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.TextView.OnEditorActionListener;
import android.widget.Toast;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getActionBar();
// add the custom view to the action bar
actionBar.setCustomView(R.layout.actionbar_view);
EditText search = (EditText) actionBar.getCustomView().findViewById(R.id.searchfield);
search.setOnEditorActionListener(new OnEditorActionListener() {
http://eglobiotraining.com
21. Contextual ActionBar
A contextual action mode activates a temporary ActionBar that overlays the
application ActionBar for the duration of a particular sub-task.
The contextual action mode is typically activated by selecting an item or by
long clicking on it.
To implemented this, call the startActionMode() method on a View or on your
activity. This method gets an ActionMode.Callback object which is responsible
for the lifecycle of the contextual ActionBar.
You could also assign a context menu to a View via the
registerForContextMenu(view) method. A context menu is also activated if the
user "long presses" the view. The onCreateContextMenu() method is called
every time a context menu is activated as the context menu is discarded after
its usage. You should prefer the contextual action mode over the usage of
context menus.
http://eglobiotraining.com
22. Action view
An action view is a widget that appears in the action bar as a substitute
for an action item's button. You can for example use this feature to
replace an action item with a ProgressBar view. An action view for an
action can be defined via the android:actionLayout or
android:actionViewClass attribute to specify either a layout resource or
widget class to use.
This replacement is depicted in the following screenshots.
http://eglobiotraining.com
23. The following activity replace the icon at runtime with an action view which contains
a ProgressBar view.
package com.vogella.android.actionbar.progress;
import android.app.ActionBar;
import android.app.Activity;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends Activity {
private MenuItem menuItem;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getActionBar();
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_HOME
| ActionBar.DISPLAY_SHOW_TITLE | ActionBar.DISPLAY_SHOW_CUSTOM);
} http://eglobiotraining.com
26. The following code shows the layout used for the action view.
<?xml version="1.0" encoding="utf-8"?>
<ProgressBar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/progressBar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ProgressBar>
http://eglobiotraining.com
27. The following code shows the XML files for the menu.
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/menu_settings"
android:orderInCategory="100"
android:showAsAction="always"
android:title="Settings"
/>
<item
android:id="@+id/menu_load"
android:icon="@drawable/navigation_refresh"
android:orderInCategory="200"
android:showAsAction="always"
android:title="Load"/>
</menu>
http://eglobiotraining.com
28. ActionProvider
Overview of ActionProvider
An ActionProvider defines rich menu interaction in a single
component. It can generate action views for use in the
action bar, dynamically populate submenus of a action item,
and handle default action item invocations.
Currently the Android platform provides two ActionProvider
the MediaRouteActionProvider and the
ShareActionProvider.
http://eglobiotraining.com
29. Example: usage of the ShareActionProvider
The following uses the ShareActionProvider to demonstrate
the usage of ActionProviders.
This ActionProvider allows you to use share selected content
using application which have registered the
Intent.ACTION_SEND intent.
To use ShareActionProvider you have to define a special
menu entry for it and assign an intent which contain the
sharing data to it.
http://eglobiotraining.com
33. public void doShare() {
// Populare the share intent with data
Intent intent = new Intent(Intent.ACTION_SEND);
intent.setType("text/plain");
intent.putExtra(Intent.EXTRA_TEXT, "This is a message
for you");
provider.setShareIntent(intent);
}
http://eglobiotraining.com
34. Navigation with the ActionBar
Tab navigation
Fragments can also be used in combination with the
ActionBar for navigation. For this your main activity needs
to implement a TabListener which is responsible for
moving between the tabs.
The ActionBar allows to add tabs to it via the newTab()
method.
The following code shows such an activity. It uses dummy
activities to demonstrate the switch.
http://eglobiotraining.com
36. public class MainActivity extends FragmentActivity implements
ActionBar.TabListener {
/**
* The serialization (saved instance state) Bundle key representing the
* current tab position.
*/
private static final String STATE_SELECTED_NAVIGATION_ITEM =
"selected_navigation_item";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
http://eglobiotraining.com
37. // Set up the action bar to show tabs.
final ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// For each of the sections in the app, add a tab to the action bar.
actionBar.addTab(actionBar.newTab().setText(R.string.title_section1)
.setTabListener(this));
actionBar.addTab(actionBar.newTab().setText(R.string.title_section2)
.setTabListener(this));
actionBar.addTab(actionBar.newTab().setText(R.string.title_section3)
.setTabListener(this));
}
@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
// Restore the previously serialized current tab position.
if (savedInstanceState.containsKey(STATE_SELECTED_NAVIGATION_ITEM)) {
getActionBar().setSelectedNavigationItem(savedInstanceState.getInt(STATE_SELECTE
D_NAVIGATION_ITEM));
}
}
http://eglobiotraining.com
38. @Override
public void onSaveInstanceState(Bundle outState) {
// Serialize the current tab position.
outState.putInt(STATE_SELECTED_NAVIGATION_ITEM,
getActionBar()
.getSelectedNavigationIndex());
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
http://eglobiotraining.com
39. @Override
public void onTabSelected(ActionBar.Tab tab,
FragmentTransaction fragmentTransaction) {
// When the given tab is selected, show the tab contents in the
// container view.
Fragment fragment = new DummySectionFragment();
Bundle args = new Bundle();
args.putInt(DummySectionFragment.ARG_SECTION_NUMBER,
tab.getPosition() + 1);
fragment.setArguments(args);
getFragmentManager().beginTransaction()
.replace(R.id.container, fragment).commit();
}
@Override
public void onTabUnselected(ActionBar.Tab tab,
FragmentTransaction fragmentTransaction) {
}
http://eglobiotraining.com
41. public static class DummySectionFragment extends Fragment {
public static final String ARG_SECTION_NUMBER =
"placeholder_text";
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup
container,
Bundle savedInstanceState) {
TextView textView = new TextView(getActivity());
textView.setGravity(Gravity.CENTER);
textView.setText(Integer.toString(getArguments().getInt(ARG_SEC
TION_NUMBER)));
return textView;
}
}
}
http://eglobiotraining.com
42. Dropdown menu navigation
You can also use a spinner in the action bar for navigation. The
following code demonstrates that.
package com.vogella.android.actionbar.spinner;
import android.app.ActionBar;
import android.app.Fragment;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
http://eglobiotraining.com
43. public class MainActivity extends FragmentActivity
implements
ActionBar.OnNavigationListener {
/**
* The serialization (saved instance state) Bundle key
representing the
* current dropdown position.
*/
private static final String
STATE_SELECTED_NAVIGATION_ITEM =
"selected_navigation_item";
http://eglobiotraining.com
44. @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Set up the action bar to show a dropdown list.
final ActionBar actionBar = getActionBar();
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
final String[] dropdownValues =
getResources().getStringArray(R.array.dropdown);
// Specify a SpinnerAdapter to populate the dropdown list.
ArrayAdapter<String> adapter = new
ArrayAdapter<String>(actionBar.getThemedContext(),
http://eglobiotraining.com
46. @Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
// Restore the previously serialized current dropdown position.
if (savedInstanceState.containsKey(STATE_SELECTED_NAVIGATION_ITEM))
{
getActionBar().setSelectedNavigationItem(savedInstanceState.getInt(STATE_
SELECTED_NAVIGATION_ITEM));
}
}
@Override
public void onSaveInstanceState(Bundle outState) {
// Serialize the current dropdown position.
outState.putInt(STATE_SELECTED_NAVIGATION_ITEM, getActionBar()
.getSelectedNavigationIndex());
}
http://eglobiotraining.com
47. @Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
@Override
public boolean onNavigationItemSelected(int position, long id) {
// When the given dropdown item is selected, show its contents in the
// container view.
Fragment fragment = new DummySectionFragment();
Bundle args = new Bundle();
args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, position + 1);
fragment.setArguments(args);
getFragmentManager().beginTransaction()
.replace(R.id.container, fragment).commit();
return true;
}
http://eglobiotraining.com
48. /**
* A dummy fragment
*/
public static class DummySectionFragment extends Fragment {
public static final String ARG_SECTION_NUMBER = "placeholder_text";
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
TextView textView = new TextView(getActivity());
textView.setGravity(Gravity.CENTER);
textView.setText(Integer.toString(getArguments().getInt(ARG_SECTION_NUMBER)));
return textView;
}
}
}
http://eglobiotraining.com
50. Prof. Erwin M. Globio, MSIT
Managing Director of eglobiotraining.com
Senior IT Professor of Far Eastern University
Mobile: 09393741359 | 09323956678
Landline: (02) 428-7127
Email: erwin_globio@yahoo.com
Skype: erwinglobio
Website: http://eglobiotraining.com/
http://eglobiotraining.com