Hello Guys,
This is my first article. I hope that you guys will like my posts and benefit from them.
In this article I’ll be showing you how to create a toolbar for android apps. I will only be using Android studio for this.
What is a toolbar?
You can consider the Toolbar as a customizable Actionbar where you can change its width, height, color, text colour, padding and gravity. Just as in an Actionbar, you can add actions and icons to the Toolbar. A Toolbar is much better than an Actionbar, for it gives the developer more access to control his App Design .
Toolbar types
As I said, everything in a Toolbar can be customized. These pictures provided by Google show how a Toolbar can be customized.
Android Floating ToolBar example
Android ToolBar example
for more, click here.
How to add a toolbar to our app
Now lets see how to add a Toolbar to our app. All you need is Android Studio or Eclipse (I am using Android Studio).
What will we do?
- Use the Theme.AppCompat.Light.NoActionBar to prevent the system from showing the action bar.
- Define the app_bar.xml that has the ToolBar.
- Use <include> in your layout to show the toolbar.
- Instantiate the ToolBar by adding findViewById in your Activity.
- You need to call setSupportActionbar() and add your toolbar inside to replace the ActionBar with ToolBar.
So lets start!
- First, you need to prevent the system from showing the Actionbar in your app. So go to ‘Styles.xml’ and change the theme to
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
- Second, we need to create a new Toolbar layout file for the toolbar dimensions, color, and id.
To create a layout file, under layout directory, right click it >>new>>layout resource file and name it as ‘app_bar’ and change the root element to Toolbar. Now, you may get an error in your ‘app_bar.xml’ at <Toolbar ….>. To fix this, replace ‘<Toolbar>’ with ‘<android.support.v7.widget.Toolbar …>’ and change the ending part to ‘</ android.support.v7.widget.Toolbar >’. Now clean project by pressing CTLR+ALT+L and the error should be fixed.
- Third in app_bar.xml, be sure that the width to ” match_parent ” and height to “wrap_content” .
- Fourth In activity_main.xml, we must add the toolbar to our activity ,to do that add the following
<include> layout="@layout/app_bar" android:id="@+id/app_bar" </include>
and hit CTRL+ALT+L to clean your preoject
- Now lets move to our MainActivity
In MainActivity.Java we need to tell android that “Hey! I am not using your Actionbar anymore. Rather, I am using my own ToolBar!”. To do that you must make a variable for the toolbar. So add private Toolbar toolbar; .
Now under OnCreate Method write the following:
toolbar = findViewById(R.id.app_bar); setSuppotActionBar(toolbar);
To customie your ToolBar you can change its color by changing the background color in the app_bar.xml,also you can add icons and components in the ToolBar(the ToolBar i considered as any other component so you can put stuffs above it or anywhere.
Errors that you may face:
So by this we completed our Tutorial and you got your Actionbar working. Here is a list of errors you may face when adding Toolbar:
1. When creating toolbar layout resource file you may get an error in your app_bar.xml at <Toolbar ….> , to fix this replace “<Toolbar> ” with ” <android.support.v7.widget.Toolbar …>” and change the end to “</ android.support.v7.widget.Toolbar > “ . Now clean project by pressing CTLR+ALT+L and the error should be fixed.
2. When adding
toolbar = findViewById(R.id.app_bar); setSuppotActionBar(toolbar);
to MainActivity.Java you may get an error. To solve it import the toolbar to your project by adding this:
import android.support.v7.widget.Toolbar;
Complete!
Now your ToolBar should be working perfectly.I hope you guys liked this Android ToolBar tutorial and found it helpful. Please be sure to follow our website. Peace!
