Wednesday 19 October 2016

HOW TO: ANDROID TOOLBAR TUTORIAL

  04:57:00
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 Floating ToolBar example

Android 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?

  1. Use the  Theme.AppCompat.Light.NoActionBar  to prevent the system from showing the action bar.
  2. Define the app_bar.xml that has the ToolBar.
  3. Use <include> in your layout to show the toolbar.
  4. Instantiate the ToolBar by adding findViewById in your Activity.
  5. You need to call setSupportActionbar() and add your toolbar inside to replace the ActionBar with ToolBar.

So lets start!


  1. 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">

  1. 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.
  1. Third in app_bar.xml, be sure that the width to ” match_parent ” and height to “wrap_content” .
  1. 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
  1. 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!