Today we will look into Android ActionBar. Action Bar is one of the important part of any application, whether it’s a web application or a mobile app. Today we will learn how to implement action bar in android apps using ActionBar
component.
Android ActionBar is a menu bar that runs across the top of the activity screen in android. Android ActionBar can contain menu items which become visible when the user clicks the “menu” button. In general an ActionBar
consists of the following four components:
All activities that use the theme Theme.Holo or a theme derived from Theme.Holo will automatically contain an ActionBar.
The simplest way to get toolbar icons and action overflow items into the action bar is by creating menu XML resource file found in res/menu folder. We can add menu items in the raw xml file present in the folder as follows: menu_main.xml
<menu xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools" tools:context=".MainActivity">
<item
android:id="@+id/add" android:icon="@android:drawable/ic_menu_add" app:showAsAction="always" android:title="@string/add"/>
<item
android:id="@+id/reset" android:icon="@android:drawable/ic_menu_revert" app:showAsAction="always|withText" android:title="@string/reset"/>
<item
android:id="@+id/about" android:icon="@android:drawable/ic_dialog_info" app:showAsAction="never" android:title="@string/about">
</item>
<item
android:id="@+id/exit" app:showAsAction="never" android:title="@string/exit">
</item>
</menu>
There are four things that are needed to be configured for every menu item.
Note that always is not guaranteed to be a toolbar button - if you ask for 100 always items, you will not have room for all of them. However, always
items get priority for space in the action bar over ifRoom
items.
In order for the menu items defined in the menu XML file to be displayed, you need to inflate the menu file. We do so inside the onCreateOptionsMenu()
method of the activity where we wish to add the ActionBar. Here is the code snippet:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
The R.menu.menu_main parameter is the constant referring to the menu XML file. The menu parameter is the menu into which we want to inflate the menu items.
To find out when the user taps on one of these things, we’ll need to override onOptionsItemSelected()
from the MainActivity as shown below:
@Override
public boolean onOptionsItemSelected(MenuItem item) { switch(item.getItemId()) {
case R.id.add:
//add the function to perform here
return(true);
case R.id.reset:
//add the function to perform here
return(true);
case R.id.about:
//add the function to perform here
return(true);
case R.id.exit:
//add the function to perform here
return(true);
}
return(super.onOptionsItemSelected(item));
}
Now let’s assign some basic functions to each menu items in our project.
We’ve implemented the four menu items in the MainActivity as shown in the snippet below: MainActivity.java
package com.journaldev.actionbar;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
TextView count;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) { switch(item.getItemId()) {
case R.id.add:
count=(TextView)findViewById(R.id.textView);
count.setText("Add is clicked");
return(true);
case R.id.reset:
count=(TextView)findViewById(R.id.textView);
count.setText("Nothing is selected");
return(true);
case R.id.about:
Toast.makeText(this, R.string.about_toast, Toast.LENGTH_LONG).show();
return(true);
case R.id.exit:
finish();
return(true);
}
return(super.onOptionsItemSelected(item));
}
}
The items are assigned their respective functions. The item selected is determined from its id that was defined in the menu_main.xml
file. Here we just change the TextView
contents in the first two items, display a toast in the third and exit the application in the fourth item. Note that the AppCompatActivity is a replacement for the deprecated version of ActionBarActivity. The styles.xml
file is defined as follows:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
</resources>
As you can see the parent theme uses a derivative of Theme.AppCompat which holds an ActionBar by default(unless you use Theme.AppCompat.Light.NoActionBar class). Hence there is no need to define it explicitly here.
Below image shows the output produced by our project, you can see that the ActionBar includes the predefined icons. The textview updates the content since add icon was clicked. The textview reverts the content to the original since reset was clicked. When about is clicked, toast notification appears as shown below. This brings an end to android action bar example tutorial. You should also read about android custom ActionBar. You can download android ActionBar project from below link.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Thank you very for the tutorial please can show me how to customize the toolbar so that it shows the name of the open page on the title bar
- Netmat Gumes
Hai Iam Rizwan How to Set Title center in Tool bar toolbar=(Toolbar)findViewById(R.id.toolbar); toolbar.setTitle(getResources().getString(R.string.setTitle)); toolbar.setTitleTextColor(getResources().getColor(R.color.title)); TextView customTitle=toolbar.findViewById(R.id.setTitleText); setSupportActionBar(toolbar);
- rizwan
how to change color of the text in actionbar??
- Pranjul Dhiman
Actionbar is depreciated and dead, avoid using actionbar and start using toolbar, it will be good it this tutorial can be updated to use toolbar and use it as actionbar.
- satish kadyan
I did everything as it is in the Tut’ but when I run the app, nothing appears except for the textview “Nothing is selected”
- Les Mok
It is really very interesting and very clear.But,how could I make it floating that toast?
- petros
keep getting: count=(TextView)findViewById(R.id.textView); with textView red, - can resolve symbol and Toast.makeText(this, R.string.about_toast, Toast.LENGTH_LONG).show(); same for about_toast very much a newbie, probably a easy answer, I hope? !
- gary
If I want to add a back button before the App title, then what should I have to do?
- Shinoy Shaji
How to add animation in menu bar like Inshorts app ?
- Sidhartha