Android ActionBar VS ToolBar

ActionBar is action control bar or navigation bar you usually see at the top of an app, it usually has an app logo icon on the left, name of the current screen next to the logo, and other menu list on the right. To use actionbar, you don’t have to define an actionbar in the layout file which is handy but it deosn’t give you much flexibilities when you want to do some customizations in the actionbar, such as adding background image, animations, place the actionbar on the bottom instead on the top.

Toolbar does evertying you can do with ActionBar, and gives you the freedom to do customiztions that you can’t do easily with ActionBar.

A typical action bar implementation

1. In the onCreate method of your activity, you just have to add these few lines.

		ActionBar actionBar = getActionBar();
		actionBar.setDisplayShowTitleEnabled(false); // Hide the action bar title
		actionBar.setDisplayHomeAsUpEnabled(true);
		actionBar.setIcon(R.drawable.ic_action_list);

2. To add menu option items on the right, inflate the menu layout in the onCreateOptionsMenu method.
res/menu/activity_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/btn_edit"
        android:title="Edit"
        android:icon="@android:drawable/ic_menu_edit"
        android:showAsAction="ifRoom"/>
    <item android:id="@+id/btn_save"
        android:title="Save"
        android:icon="@android:drawable/ic_menu_save"
        android:showAsAction="ifRoom"/>
    <item android:id="@+id/btn_help"
        android:title="Help"
        android:icon="@android:drawable/ic_menu_help"
        android:showAsAction="ifRoom"/>
</menu>

onCreateOptionsMenu method in your activity class.

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		MenuInflater inflater = getMenuInflater();
		inflater.inflate(R.menu.activity_menu, menu);
		return super.onCreateOptionsMenu(menu);
	}

3. To react on menu item clicks, add onOptionsItemSelected method in your activity class.

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
			case android.R.id.home:
				setActionText("actionbar home button clicked!");
				break;
			case R.id.btn_edit:
				setActionText("edit button clicked!");
				break;
			case R.id.btn_save:
				setActionText("save button clicked!");
				break;
			case R.id.btn_help:
				setActionText("help button clicked!");
				break;
			default:
				super.onOptionsItemSelected(item);
				break;
		}
		return true;
	}

A typical tool bar implementation

1. In your application theme style, you need to specifiy NoActionBar like this.

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

2. In your activity layout file, you need to add toolbar view like this. This is where the flexibility comes with toolbar, since you are now putting the toolbar yourself in the layout file, you can place the toolbar anywhere you like in the layout file as well as adding other things in the toolbar.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"/>

</LinearLayout>

3. In the onCreate method of you activity class. First get the toolbar from the layout file. Then call the setSupportActionBar with the toolbar and getSupportActionBar method to get the actionbar for using features from a regular actionbar. In your activity class, you can still have the onCreateOptionsMenu to inflate the menu on the right and onOptionsItemSelected method for react to the menu item clicks.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //Get the toolbar from the layout and set the actionbar with it.
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setTitle(getTitle());

    //Here you get actionbar features if you 
    setSupportActionBar(toolbar);
    ActionBar actionBar = getSupportActionBar();
    actionBar.setHomeAsUpIndicator(R.drawable.icon_menu);
    actionBar.setDisplayHomeAsUpEnabled(true);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == R.id.home) {
    	//do somthing
    } else if (id == R.id.edit) {
    	//do something else
    }
    return super.onOptionsItemSelected(item);
}

Should you replace ActionBar with ToolBar? YES and NO. YES if you want the flexibilities that comes with the Toolbar, NO if you don’t need those flexiibilities. By flexibility, you can do things like adding background image, animations, place the actionbar on the bottom instead on the top.

Search within Codexpedia

Custom Search

Search the entire web

Custom Search