Action Bar in Android

Using Action Bar in Android: A Tutorial
http://eglobiotraining.com/
Prof. Erwin M. Globio, MSIT
Android Development Expert
http://eglobiotraining.com

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.

Example
The following picture shows the ActionBar of a
The Google+ Android application with interactive
items and a navigation bar.

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

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.

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.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.menuitem1:
Toast.makeText(this, "Menu Item 1 selected",
Toast.LENGTH_SHORT)
.show();
break;
case R.id.menuitem2:
Toast.makeText(this, "Menu item 2 selected",
Toast.LENGTH_SHORT)
.show();
break;
default:
break;
}
return true;
} http://eglobiotraining.com

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.

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();

You can also change the text which is displayed
alongside the application icon at runtime. The
following example shows that.
actionBar.setSubtitle("mytest");
actionBar.setTitle(“eglobiotraining.com");

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.

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);

The following screenshots show an application with and
without the navigation buttons.

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;

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>

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.

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.

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);
// 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() {

@Override
public boolean onEditorAction(TextView v, int actionId,
KeyEvent event) {
Toast.makeText(MainActivity.this, "Search triggered",
Toast.LENGTH_LONG).show();
return false;
}
});
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM
| ActionBar.DISPLAY_SHOW_HOME);
}
}

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.

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.

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.Activity;
import android.os.AsyncTask;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends Activity {
private MenuItem menuItem;
@Override
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_HOME
| ActionBar.DISPLAY_SHOW_TITLE | ActionBar.DISPLAY_SHOW_CUSTOM);
} http://eglobiotraining.com

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
case R.id.menu_load:
menuItem = item;
menuItem.setActionView(R.layout.progressbar);
menuItem.expandActionView();
TestTask task = new TestTask();
task.execute("test");
break;
default:
break;
}
return true;
}

private class TestTask extends AsyncTask<String, Void, String> {
@Override
protected String doInBackground(String... params) {
// Simulate something long running
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
return null;
}
@Override
protected void onPostExecute(String result) {
menuItem.collapseActionView();
menuItem.setActionView(null);
}
};
}

The following code shows the layout used for the action view.
<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>

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:title="Settings"
/>
<item
android:id="@+id/menu_load"
android:icon="@drawable/navigation_refresh"
android:title="Load"/>
</menu>

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.

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.

@Override
getMenuInflater().inflate(R.menu.activity_main, menu);
// Get the ActionProvider
provider = (ShareActionProvider)
menu.findItem(R.id.menu_share)
.getActionProvider();
// Initialize the share intent
Intent intent = new Intent(Intent.ACTION_SEND);
intent.setType("text/plain");
provider.setShareIntent(intent);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item)
{
case R.id.menu_share:
doShare();
break;
default:
break;
}
return true;
}

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);
}

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.

package com.vogella.android.actionbar.tabs;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.support.v4.app.FragmentActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

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

// 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));
}
@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));
}
}

@Override
public void onSaveInstanceState(Bundle outState) {
// Serialize the current tab position.
outState.putInt(STATE_SELECTED_NAVIGATION_ITEM,
getActionBar()
.getSelectedNavigationIndex());
}
@Override
return true;
}

@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,
}

@Override
public void onTabReselected(ActionBar.Tab tab,
}
/**
* A dummy fragment representing a section of the app
*/

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;
}
}
}

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.Fragment;
import android.support.v4.app.FragmentActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;

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";

@Override
// 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(),

android.R.layout.simple_spinner_item, android.R.id.text1,
dropdownValues);
adapter.setDropDownViewResource(android.R.layout.simple_
spinner_dropdown_item);
// Set up the dropdown list navigation in the action bar.
actionBar.setListNavigationCallbacks(adapter, this);
// Use getActionBar().getThemedContext() to ensure
// that the text color is always appropriate for the action
bar
// background rather than the activity background.
}

@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());
}

@Override
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;
}

/**
* 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;
}
}
}

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/

Action Bar in Android

More Related Content

What's hot

Viewers also liked

Similar to Action Bar in Android

More from Prof. Erwin Globio

Recently uploaded

Action Bar in Android