Android AppBar, ToolBar, ActionBar with , Java Xml Language
This Tutorial Android AppBar ToolBar Design

Prev Tutorial Android Interpolators with Spinner

Next Tutorials
TUTORIALS V - Optimizing Your Android App For Distribution

First Tutorial Introduction - Keystore, App Metrics, App Monetization, App Stores

If you are just arriving at this page; and you are not familiar with with creating Android Apps, we suggest you begin with our tutorials: Coding Android App Pages and How To Create a Simple App in Android

From there follow along with each tutorial lesson.


We are using AIDE(a mobile coding environment using language java/xml), to create these tutorial apps on our
tablet(7" screen) that has android version 5.0.
Once we build and RUN our app; we then install the app on this same tablet; and the app is also installed on a smart phone that has android version 6.
AIDE can be installed on any android version from 4 - 8.
We are using the AIDE coding editor to code our pages; and then to Create - RUN our apps. AIDE is a SDK coding environment for android devices like a tablet or smartphone. AIDE has a free and paid version. Once you create your apps code pages, you need to RUN the app to build your apk package; then you INSTALL it on your tablet or smartphone. For info on using AIDE, gohere

You can also create; RUN your apps using the code in these tutorials, with Android Studio. Android Studio is for desktop computers. Choose Java XML as the programming language. Android Studio is free to install and use for your android app development. Although not as convenient as testing your app on an actual android device; you can test your newly created app in Android Studio using its' android emulator.

Complete Example Codes are available for each of our tutorials. With these example codes you can make a functioning android app in either AIDE or Android Studio.

Android AppBar ToolBar Design


First, create a java/xml android template app using AIDE, (or Android Studio). Then you can get the code for this app from the EXAMPLE CODE section on this page. Replace the code on the pages you need to(with our tutorial code); in order to create this app.
Sometimes, new pages have to be created.
All the other coded pages in your app can remain as they are; they don't need to be changed.

This is the App Photo - AppBarToolBar
Menu item names are added to the right side of the appbar

AppBar with Menu Items, App Photo

Where - How - Why To Use AppBar - ToolBar

AppBar, ToolBar, ActionBar Are three names commonly used to describe the ToolBar code class widget, which is a basically an app bar that sits at the top of your view, that can contain the app name as well as a Menu containing whatever items you want to add to it.

If you add more items then can be visually displayed in the views space, then they are added to the overflow Menu, also known as Action Items, or Toolbar Menu Items, which you can access by clicking the three little buttons on the far right side at the top of the view.

Beginning with android version 3, api level 11, it was known as the 'action bar'. Now with the new Material Design, android version 5.0 api level 21, it is known as the 'appbar' or 'toolbar'.

Essentially, appbar, toolbar, or actionbar, all mean the bar that is at the top of the view to which you can add a Menu and items to the menu. It has become a standard for app development, and app bars are seen often in the UI design of apps. The default app bar which is included with an apps default theme, contains just the app bar and app name.

With the new 'Toolbar of Material Design' you can add additional functionality and customize your app bar with new code class attributes, and you can put the Toolbar anywhere you want in the view, not just at the top.

For this tutorial, we are going to code a basic app bar design. This will have the app bar at the top of the view, with a Menu containing action or menu items. The app name is on the left and the menu items are on the right side of the app bar.

For additional reading on AppBar Toolbars, From Android Developer Website
Implementing App Bar Toolbar
Adding Menu Actions

Creating The Menu Folder

We need to create a menu folder, and then within the menu folder create our xml page; name it as you like, for this app tutorial, we named it myappbar.xml

The menu folder is located at res/menu of your app project.

Coding Your Menu Items

In the myappbar.xml file, you will code your menu items. You can add as many items as you want. For this tutorial we added four menu items.

The menu element is used, and each item is put in a itemattribute. In this code we add:


The id is whatever you want to use to name your id for the item; it can be same name as the title as we have coded or whatever name you want to give it.
Our first menu item name is:
Search, coded as

item android:id="@+id/action_search"

We named our id as action_search, and also our @string name as the same action_search. The @string means that the text for this menu item is at the string named 'action_search'.
Look at the string file to see the menu item name we gave: Search

Each menu item name is coded in the strings.xml file in this manner.
Our second menu item is 'record video', our third menu item is 'videos', and our last menu item is 'photos'. This is the code.
code for app bar toolbar menu items
The 'title' is the name of your menu item that is displayed in your app bar menu as an item.
For 'showAsAction', you can use 'ifRoom, Always, Never'. Using ifRoom is common, that is what we used. It means if there is room in the views space then the item name will display. IF your view display doesn't have enough space then the item gets put into the side overflow menu.

Whether your items get displayed in the view or overflow menu depends on your device size and number of items in your menu. We coded on a 7" tablet, so in portrait mode, all items but one, Photos, show in the app bar display.

However, when we turn our tablet to horizontal, all items are displayed in the appbar because now the apps view has more space to display all menu items.
This image shows app in Horizontal: all menu items appear in the appbar
AppBar Photo Horizontal Menu Items Displayed
This image shows app in Vertical: all but one menu item 'Photos", appears in appbar
AppBar with Menu Items, App Photo
So if you code on a tablet smaller than 7", then probably one of more items will go to the side overflow menu, and holding your device horizontally you can see more of the menu items in the app bar.

And, if you were coding on a larger size tablet 9, 10 then probably all menu item will display in the app views. Since every device can be different and also how many items your adding to your menu; whether they display or go to overflow menu is depending on those factors.

MenuInflater To Inflate our Menu Items

We have coded each menu item into our myappbar.xml page's code. Now we must write some java code so that the menu items will display in our view. This is done using the Menu Inflater code class. In our file we add this code:, to attach the menu to our app view bar, and also the code for the menu inflater to inflate our menu items.

Material Design Theme

For each template android/gradle/java/xml app you create:

By default;

The res/values-v21 styles.xml file has the code for the material design theme name: Theme Material Light; for devices using android version 5.0, Api 21 or latest.

The res/values styles.xml file has the code for the theme name: Theme Holo Light, which is for devices that are pre material design platforms; ie less than android version 5.0 Api 21.

For this app tutorial, we want to use the
Theme Material

This theme has a dark colored view with a dark colored action bar. The action bar is at the top of the app view, where you can see the app name.
The code for this is shown in this image.

We need to change the code to read Theme.Material, in our styles.xml file located at res/values-v21 of the app project.

For devices using android 5.0 Api 21, or later versions, they will now see the Theme.Material

For users of devices that are pre or before android 5.0 Api 21, they will have the Theme.Holo.Light as their theme. If you want them to have the same theme colors as Material.Theme, then we need to change the theme to read Theme.Holo at the res/values/styles.xml file.

You can copy paste the code for these themes at the Example Code section on this page.

Creating - Naming Your App Using AIDE

When creating your app,(from left menu) choose:
Create New Project;
Then, choose
New Android App(gradle, android Java/xml)
Hello World App Java/xml
if your using the original version of AIDE

You can name your app whatever you like; if your using the name as shown in our example code use;

AppBarToolBar for the App Name and,
for the package name(next line) use:

The Coded Pages

For this app you will use these coded pages:

LAYOUT File 1 layout file, main.xml; this page has the code for our layout TextView which as the text for our app view; located at res/layout/main.xml, already created, just replace the code on this page with the code from our Example Code section and save the page.

1 myappbar.xml file; this file has the code for the app bar menu and menu items we added.

Just create a folder named 'menu' at res/menu, then create a new page, for the code, name it myappbar.xml. Add the copy from our Example Code section. Save the page.

JAVA File 1 java class page;; located at app/src/java/ This page has the code that will attach our menu page, myappbar.xml, to our app bar in the view, and inflate our menu items using the menu inflater code class. This is the code.

AppBar Java Code, Menu Inflater Code
Import Codes

We also add our import codes to our file. Because we are adding additional coding classes we need to add additional import code for those. So, we added these to our import code.

import android.view.Menu;
import android.view.MenuItem;
import android.view.MenuInflater;

These are required in order for the code to implement properly.
Each code class you code has a corresponding import, that has to be coded in your apps java file. The default java page created for our template android app is named This is where we put the import codes.
If you were to add additional pages to your app, then you would code any additional java pages with the import code or codes for whatever code classes your implementing.

Each android template app we create codes the common required 'import' for us, like:

import android.os;
import android.view.view;

These are the most common ones; as all apps have one page, one view, and an os.

These are coded at the top of the java class page.

When we add additional layout elements or java code classes to our app as we have done for this app; like our Menu, MenuItem, and MenuInflater; then we need to add the import codes for those in our java code page. If we don't have the import code added or it is added improperly then our app code won't compile.

You can copy paste the code from the Example Code section for this java page to replace the code; save the page.

STRINGS.XML File 1 strings.xml file; This file has the strings that contains the app_name - AppBarToolBar, and our views text - This is example AppBar also known as Toolbar.

And, we put the names of each menu item(action_name) into our strings.xml file.

AppBar Strings Code

BUILD.GRADLE file, this page has the code for the Sdk min and target versions and our support libraries code if we need to add any to our app. The support libraries code is added at the 'dependencies' section in the build.gradle file, and the Sdk versions are added at the 'defaultConfig' section in the build.gradle file.

This file has been created for us and coded with the proper Sdk min 14, and target version 21; so we don't have to code those. And, for this app we don't need to add any support libraries, so we do not need to edit this page.
For this app, the build.gradle file is located at; AppProjects/AppBarToolBar/app/src.

ANDROIDMANIFEST.XML File The androidmanifest.xml file is where you can code your 'app theme' name, code your 'intent filters', and add other necessary codes if your app requires them. You can also code your Sdk min and target versions here that your app needs; but since they are already coded in the build.gradle file they do not need to be coded here.

Some Common Errors When Coding Android

When you code with AIDE or Android Studio, you will no doubt from time to time get error messages. The import code is a good place to look for errors, because you may have not coded a certain required import for the code classes or widgets your implementing or coded it improperly. And, the error message or messages may not be indicative of the actual error which is why you may need to look in different code areas to try and find the error.

Here we list some common coding errors:

File names that don't match the corresponding code in another file

Android Manifest file for AppTheme correctly spelled or missing

Android Manifest file for code required like InternetPermissions,SDK min and Target versions, or Intent filters for additional app pages names from layout file that don't match to the name in the java file, misspelled or capped

Capitalized words versus small capped words

Java pages not camel cased; all java page names must be camel cased like: - correct spelling is

Drawables - all images, drawables must be small letters only, not capped, and no dashes, underscores allowed.

SDK target and min versions not matching the code implemented - check your APi level for a code your implementing

Images/xml pages put in wrong folder, example, for frame animation all images and xml files go in the res/drawable folder, however for view animation the xml files must go in the anim folder, and images go in the drawable folder.

Coding For Compatibility

The Material Design platform was introduced in android 5.01 which is api 21, for coding purposes Sdk version 21. Each android platform build version has a API assigned to it.
View the Android Platform Versions and API Levels here. You can find the android platform version of your android device at: Settings, AboutPhone.

For most apps you build you will need to have the proper Sdk version coded in either the build.gradle file or the AndroidManifest.xml file.

Android devices at this time support several different platforms. The platforms range from 2 to the most current version being 8.0(oreo api level 27).
At this time users on platforms 5,6,7, and 8 have about 80% of the market and users on platforms 4 and previous to 4 have less than 10% of the market(May 2019 stats).
Android Platforms Market Distribution

In order to provide support to make the apps you create compatible for all the different android platforms; android uses support libraries also known as dependencies, and coded as such in your build.gradle file.
To make the apps you build compatible, you should at this time, use at least min Sdk version 14(for any added support libraries), and for target version Sdk version 21 to 26. Doing so will make your app compatible with more android device platforms.
In addition to adding the Sdk min and target versions, you also need to add the 'support libraries' code for any code class you add to your app that requires them like the CardView code class from Material Design.

Support libraries are used to make code compatible across the different android platforms, and adding them will make your app more compatible to more users.

Additionally, android uses support libraries for certain code classes that are new or that simply require a support library in order to be implemented; like in Material Design. Several code classes or widgets from Material Design require a support library in order for the code to perform as it should in your app and for the different platforms as well. Some examples are the CardView, RecyclerView, SnackBar, Fab buttons, and UI Designing Widgets.

How To add a 'support library' to your code:
Basically, you add a line or few lines of code to your build.gradle file at the 'dependencies' section. For example, any UI design widgets or features you want to add from the Material Design coding classes requires the 'design' library to be added.
This is the code;
compile ''

Android Developer website has the latest versions of these support libraries.

EXAMPLE CODE - Code For This Tutorial

JUST USE YOUR MOUSE to copy the code for this tutorial App Name is 'AppBarToolBar' - located at AppProjects/AppBarToolBar in AIDE, open the AIDE app, then open App Projects, THEN select the 'AppBarToolBar' app from your files hierachy(left menu); then click on any file from the app, like strings.xml Make sure at top of page, the app name AppBarToolBar is there next to AppProjects like so: AppProjects/AppBarToolBar , then you know you have the proper App.

Once a file is in the editor, you can edit, save it, then RUN your APP, Install, and Open your app.

Make sure you SAVED EACH PAGE,(or choose automatic saving in AIDE settings) before you RUN your code. SAVE, RUN, INSTALL, OPEN, your App. Once it has been installed on your tablet, you can open it Simply by Clicking on the Android little green App Icon,with the wording 'AppBarToolBar' on your tablet. It will be with your other installed apps.

If you make further changes to this App, you need to SAVE, RUN, UPDATE, INSTALL, OPEN the app.

Example Code App - AppBarToolBar :
Use Mouse To Copy Paste the Code

This free script provided by
JavaScript Kit

Share This Page

AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid - with Free, create java/xml android template apps, and there is a couple free android coding lessons.
With paid, create java/xml android template apps, and you can create a 'keystore' for your app, so you can publish your apps to the marketplaces like Google Playstore and Amazon.
GoTo Aide

ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
GoTo Android Studio Learn more - Android Studio

The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.

You May Like:
Sushi Rolls Make Sushi at Home | Taste World Wines Flavours and Aromas

Java XML
The Coded Pages

Beginners Article

About Our Tutorials

Coding androidmanifest.xml




Coding main.xml

Coding strings.xml

Coding drawables

Java XML
Learning To Code

Create A Simple
Android App

Change App Icon

Add Text and Style

Add Buttons To App

Placing Text in

Change View
Background Color

Change Screen

Add Image to
Activity View

Add Horizontal
Scroll View

Add a Frame Layout

How to Add Themes
To Your App

How To Code
Customized Styles

Code a Toast Message

Coding Resource


Java XML
Adding Features,

Coding Shape
Drawable - Lines

Coding A WebView

Coding A Timed
Screen Splash

Coding A Gradient

Coding Fragments

Coding A
ListView Fragment

Coding a
Tabbed Fragment

Share Intent
for Text

Share Intent
for Images

Media Player
with Audio

Coding A
Video Player

Localize Your App
World Languages

Coding a Simple ListView

ListView with Toast Message

Android Sliding Drawer

Sliding Drawer
with ListView

Java XML

What is Material

Coding a Material
Design Theme

Coding a Layer List
With Elevation

Shape Drawables
Elevate - Rotate

Scrollable Elevated
Topic Cards

Photo Containers
With Shadowed Container

Simple CardView

View Animator
with Photo Array

View Animator
With Views

Simple Frame Animation

Frame Animation
With Buttons

View Animation
Rotate, Scale, Translate

Android Interpolators
with Spinner

Android AppBar
ToolBar Design

TUTORIALS V - Services/Tools
Optimizing Your Android App For Distribution

Introduction Optimizing Your App For Distribution

Follow Us On Twitter


for android tablets

Android Studio
For desktop computers


Code Canyon Paid From $1 Free and Paid From $1


App Distribution
Launching Your Android App
How To Be Successful

Android App Libraries
What are they and how
to implement them

How To Implement

View All Articles

Coding Tools

Android Studio
Course - Paid

Java Programming
Course - Free

Git Hub Course

About Our Images

All images on this page are copyrighted material.
You can use the images included with each tutorial for the purpose of creating your android app. These images are not to be distributed or sold.


How To Add Your Google Key
To Manifest.xml
Web Article

How To Sign Your APK Web Article

Google Developer Console
Create Account Submit Your App
Web Article

Amazon App DRM - APK KEY
Amazon Developer Portal
Create Account - Submit Your App



Google's In-App Billing for App monetization.

Monetizing Your App
How Tos

from the Web
Add Clickable Button
To textView

Image Button with

Linear Layout with
weight attribute

OnClick Displays

Screen Density
Coding Practices