Next
TUTORIALS V
App Launch How Tos
Prev Page
View All Tutorials
This is the App Photo - AppBarToolBar
Menu item names are added to the right side of the appbar
With a menu, 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 AppBar 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 the 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
The menu folder is located at res/menu of your app project.
Coding Your Menu Items
In the myappbar.xml, 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:
android:id
android:title
android:showAsAction
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"
android:title="@string/action_search"
android:showAsAction="ifRoom"
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 strings.xml, 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.
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
This image shows app in Vertical: all but one menu item 'Photos", appears in appbar
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 MainActivity.java, we add this code: R.menu.myappbar, 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.
Create New Project;
Then, choose
New Android App(gradle, android Java/xml)
or
Hello World App Java/xml
if your using the original version of AIDE
You can name your app, use;
AppBarToolBar for the App Name and,
for the package name(next line) use:
com.aac.exampleappbar
Layout 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.
myappbar.xml, 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 class, 1 java class page; MainActivity.java; located at app/src/java/MainActivity.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.
Import Codes
We also add our import statement codes to our MainActivity.java. 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 implement has a corresponding import, that has to be coded in your apps' java class file. The default java page created for our template android app is named MainActivity.java. This is where we put the import codes.
If you were to add additional java pages to your app, then you would add the import statements for any 'code class' you included.
Note:Additional java pages must also be declared in the manifest. Additional Fragment java pages do not have to be declared; as they are considered as included in the MainActivity.java.
Each android template app we create codes the common required 'import' for us, like:
import android.app;
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 MainActivity.java to replace the code; save the page.
Strings 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.
Build Gradle, 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 SDK min 14, and target version 21; these are suitable for our Menu code class.
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
Manifest The androidmanifest.xml file is where you can add or change your 'app theme' name, code your 'intent filters', add and change individual 'page titles or logos', declare 'additional java class' pages, and add 'internet permissions' if required.
You can also code your SDK min and target versions here that your app requires; but since they are already coded in the build.gradle file they do not need to be coded here.
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.
And, for some apps we develop, we have to add 'support libraries'. To learn about setting your SDK versions, and adding support libraries (dependencies), goto
Tutorial 1 - AndroidManifest and Build Gradle
TUTORIALS V
App Launch How Tos
Prev Page
View All Tutorials
Android AppBar ToolBar Design
This is the App Photo - AppBarToolBar
Menu item names are added to the right side of the appbar
HowTo Use AppBar - ActionBar
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 and; and also contain Menu items if you want to add them.With a menu, 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 AppBar 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 the 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.xmlThe menu folder is located at res/menu of your app project.
Coding Your Menu Items
In the myappbar.xml, 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:
android:id
android:title
android:showAsAction
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"
android:title="@string/action_search"
android:showAsAction="ifRoom"
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 strings.xml, 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.
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
This image shows app in Vertical: all but one menu item 'Photos", appears in appbar
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 MainActivity.java, we add this code: R.menu.myappbar, 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)
or
Hello World App Java/xml
if your using the original version of AIDE
You can name your app, use;
AppBarToolBar for the App Name and,
for the package name(next line) use:
com.aac.exampleappbar
The Coded Pages
For this app you will use these coded pages:Layout 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.
myappbar.xml, 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 class, 1 java class page; MainActivity.java; located at app/src/java/MainActivity.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.
Import Codes
We also add our import statement codes to our MainActivity.java. 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 implement has a corresponding import, that has to be coded in your apps' java class file. The default java page created for our template android app is named MainActivity.java. This is where we put the import codes.
If you were to add additional java pages to your app, then you would add the import statements for any 'code class' you included.
Note:Additional java pages must also be declared in the manifest. Additional Fragment java pages do not have to be declared; as they are considered as included in the MainActivity.java.
Each android template app we create codes the common required 'import' for us, like:
import android.app;
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 MainActivity.java to replace the code; save the page.
Strings 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.
Build Gradle, 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 SDK min 14, and target version 21; these are suitable for our Menu code class.
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
Manifest The androidmanifest.xml file is where you can add or change your 'app theme' name, code your 'intent filters', add and change individual 'page titles or logos', declare 'additional java class' pages, and add 'internet permissions' if required.
You can also code your SDK min and target versions here that your app requires; but since they are already coded in the build.gradle file they do not need to be coded here.
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.
Summary, SDK - Dependencies
For most apps you build, you will need to have the proper SDK min and target version coded in either the build.gradle file or the AndroidManifest.xml page. At this time, it is added at Build gradle for the 'template' apps we create.And, for some apps we develop, we have to add 'support libraries'. To learn about setting your SDK versions, and adding support libraries (dependencies), goto
Tutorial 1 - AndroidManifest and Build Gradle
EXAMPLE CODE - Code For This Tutorial
JUST 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.
JUST 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, then OPEN the app.
This free script provided by
JavaScript
Kit
AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid.
GoTo Aide
ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
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