Toolbar Widget
Toolbar
is fully supported in AppCompat and has feature and API parity with
the framework widget. In AppCompat,Toolbar
is implemented in the android.support.v7.widget.Toolbar
class. There are two ways to use Toolbar:- Use a
Toolbaras an Action Bar when you want to use the existing Action Bar facilities (such as menu inflation and selection,ActionBarDrawerToggle, and so on) but want to have more control over its appearance. - Use a standalone
Toolbarwhen you want to use the pattern in your app for situations that an Action Bar would not support; for example, showing multiple toolbars on the screen, spanning only part of the width, and so on.
Toolbar
supports a more focused feature set than ActionBar. From
start to end, a toolbar may contain a combination of the following
optional elements:
- A navigation button
- A branded logo image
- A title and subtitle
- One or more custom views
- An action menu
Things
to do remind while Implementing ToolBar
IllegalStateException (windowActionBar)
java.lang.RuntimeException:
Unable to start activity ComponentInfo{}:
java.lang.IllegalStateException: This Activity already has an action
bar supplied by the window decor. Do not request
Window.FEATURE_ACTION_BAR and set windowActionBar to false in your
theme to use a Toolbar instead.
Solution:
add
<item name="windowActionBar">false</item>
Apply Styles for Version above API level 14+
<color name="holo_blue_light">#ff33b5e5</color>
<color name="green">#36A245</color>
<color name="ripple_material_light">#40000000</color>
<style name="AppBaseTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="colorPrimary">@color/holo_blue_light</item>
<item name="colorPrimaryDark">@color/green</item>
<item name="colorAccent">@color/ripple_material_light</item>
</style>
Above 21+
<style name="AppBaseTheme" parent="android:Theme.Material.Light">
<item name="windowActionBar">false</item>
<item name="colorPrimary">@color/ripple_material_light</item>
<item name="colorPrimaryDark">@color/green</item>
<item name="colorAccent">@color/holo_blue_light</item>
</style>
Styling of ToolBar:
Styling
of
Toolbar
is
done differently to the standard action bar, and is set directly onto
the view. <android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.Light" />
ThemeOverlay.AppCompat.Light
: Changes the Toolbar title text
color to Black.
ThemeOverlay.AppCompat.Dark.ActionBar
: Changes the Toolbar title text
color to White.
Usage of inflateMenu in Toolbar:
If
you're using setSupportActionBar(toolbar);
then
inflateMenu
of toolbar cannot be used, because Toolbar is acting like Actionbar.
So, all the menu related callbacks are default.
The
only time you need to call
toolbar.inflateMenu()
is
when you are using the Toolbar as a standalone widget. In this case
you need to manually populate the Toolbar with content/actions. For
instance, if you want it to display actions, you need to inflate a
menu into it:
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
// Set an OnMenuItemClickListener to handle menu item clicks
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.searchItem:
Toast.makeText(getApplicationContext(), "Search", Toast.LENGTH_SHORT).show();
break;
case R.id.filterItem:
Toast.makeText(getApplicationContext(), "Filter", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
});
// Inflate a menu to be displayed in the toolbar
toolbar.inflateMenu(R.menu.toolbar_menu);
res/xml/toolbar_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" >
<item
android:id="@+id/searchItem"
android:icon="@android:drawable/ic_menu_search"
android:title="Search"
app:showAsAction="always"/>
<item
android:id="@+id/filterItem"
android:icon="@android:drawable/ic_menu_info_details"
android:title="Info"
app:showAsAction="always"/>
</menu>
Navigations in Toolbar:
Here
we can see how toolbar navigation works and this is similar to the
action of setDisplayHomeAsUpEnabled(true)
in
the actionbar.
Toolbar
toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
toolbar.setTitle("Second
Activity");
toolbar.setNavigationIcon(R.drawable.ic_up);
toolbar.setNavigationOnClickListener(new
View.OnClickListener() {
public
void
onClick(View view) {
NavUtils.navigateUpTo(SecondActivity.this,
IntentCompat.makeMainActivity(new
ComponentName(SecondActivity.this,
SecondActivity.class)));
}
});
Customize Toolbar:
The customization of the toolbar here is to center align the title text and it is as follows.<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:singleLine="true"
android:text="Toolbar Title"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
Source Code
You can download the source code by clicking here: ToolBarMaterialComp Source Code. This project is built using eclipse IDE. Unzip and import the project into Eclipse, it’s a good idea to use the Project by clean and rebuild from the project menu. It works in all API levels above 2.3.
As always, thanks for reading :)
Don't forget to +1 this blog and share this post on Google+ if you found it interesting!
Have something to add to this post? If you have any other quick thoughts/hints that you think people will find useful? Share it in the comments & feedback's are welcome.
Have something to add to this post? If you have any other quick thoughts/hints that you think people will find useful? Share it in the comments & feedback's are welcome.
