In Android applications, ActionBar is the element present at the top of the activity screen. It is a salient feature of a mobile application that has a consistent presence over all its activities. It provides a visual structure to the app and contains some of the frequently used elements for the users. Android ActionBar was launched by Google in 2013 with the release of Android 3.0(API 11). Before that, the name of this top most visual element was AppBar. AppBar contains only the name of the application or current activity. It was not very much useful for the users and developers also have negligible option to customize it.
Google announced a support library along with the introduction of ActionBar. This library is a part of AppCompat and its purpose is to provide backward compatibility for older versions of Android and to support tabbed interfaces. All applications that use the default theme provided by the Android(Theme.AppCompat.Light.DarkActionBar), contains an ActionBar by default. However, developers can customize it in several ways depending upon their needs. Components included in the ActionBar are:
- App Icon: Display the branding logo/icon of the application.
- View Controls: Section that displays the name of the application or current activity. Developers can also include spinner or tabbed navigation for switching between views.
- Action Button: Contains some important actions/elements of the app that may be required to the users frequently.
- Action Overflow: Include other actions that will be displayed as a menu.
Designing a Custom ActionBar
The following example demonstrates the steps involved in creating a custom ActionBar for the MainActivity of an application. All important aspects of visual elements like icon, title, subtitle, action buttons, and overflow menu will be covered.
Note: Following steps are performed on Android Studio version 4.0
Step 1: Default ActionBar
As mentioned earlier, every android app contains an ActionBar by default. This pre-included ActionBar display title for the current activity that is managed by the AncdroidManifest.xml file. The string value of the application’s title is provided by @string/app_name resource present under the application nodes.
<application
…..
…..
android:label=”@string/app_name”
…..
</application>
Output:
Step 2: Creating a new directory and design items of ActionBar
To code the elements of ActionBar, create a new directory in the resource folder of the application project files. Right-click on the res folder and selects New -> Directory. Give the name “menu” to the new directory.
Further, create a new Menu Resource File by right click on the menu directory. As the ActionBar is being created for the main Activity, type the name as “main” to the Menu Resource File. With this, a new file named “main.xml” must be created under the menu directory. In this file, one can declare the items which will be displayed as the action buttons of the ActionBar.
For every menu items, the following attributes are needed to be configured:
- android:title: Its value contains the title of the menu item that will be displayed when a user clicks and holds that item in the app.
- android:id: A unique ID for the menu item that will be used to access it anywhere in the whole application files.
- android:orderInCategory: The value of this attribute specify the item’s position in the ActionBar. There are two ways to define the position of different menu items. The first one is to provide the same value of this attribute for all items and the position will be defined in the same order as they are declared in the code. The second way is to provide a different numeric value for all items and then the items will position themselves according to ascending order of this attribute’s value.
- app:showAsAction: This attribute defines how the item is going to be present in the action bar. There are four possible flags to choose from:
- a. always: To display the item in the ActionBar all the time.
- b. ifRoom: To keep the item if space is available.
- c. never: With this flag, the item will be not be displayed as an icon in ActionBar, but will be present in the overflow menu.
- d. withText: To represent an item as both icon and the title, one can append this flag with the always or ifRoom flag(always|withText or ifRoom|withText).
- android:icon: The icon of an item is referenced in the drawable directories through this attribute.
Icon of an ActionBar Item
In order to provide an icon to an item, right-click on the res folder, select new, and then Image Asset. A dialog box will appear, choose the Icon Type as Action Bar and Tab Icons. Choose assets type as “Clip Art” and select an image from the clip art collection. Provide a desired name to the icon. Click on Next, then Finish. This icon will now get loaded in the drawable directory of the res folder. The name provided by the developers to these icons will now be used to reference the item’s icon resource.
Below is the code to place a search icon, refresh icon, and an overflow menu in the ActionBar.
XML
<?xml version="1.0" encoding="utf-8"?> <!-- action button for search --> <item android:title="search" android:id="@+id/search" android:orderInCategory="100" app:showAsAction="ifRoom" android:icon="@drawable/search_icon"/> <!-- action button for refresh --> <item android:title="refresh" android:id="@+id/refresh" android:orderInCategory="100" app:showAsAction="ifRoom" android:icon="@drawable/refresh_icon"/> <!-- action button for copy --> <item android:title="copy" android:id="@+id/copy" android:orderInCategory="100" app:showAsAction="never" android:icon="@drawable/copy_icon"/></menu> |
Output:
Step 3: Working with the Activity File
The items of an ActionBar is designed with a purpose to perform some operations. Those operations/actions of the items are declared in that Activity file for which the ActionBar has been designed. In this example, the target activity is the MainActivity file. Further, the custom title, subtitle, and application logo are also defined in this file. Below is the proper code to design all mentioned items and to display a toast message when a user clicks on the items of ActionBar.
Java
import androidx.annotation.NonNull;import androidx.appcompat.app.ActionBar;import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.widget.Toast;public class MainActivity extends AppCompatActivity { @Override protected void onCreate( Bundle savedInstanceState ) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // calling this activity's function to // use ActionBar utility methods ActionBar actionBar = getSupportActionBar(); // providing title for the ActionBar actionBar.setTitle(" GfG | Action Bar"); // providing subtitle for the ActionBar actionBar.setSubtitle(" Design a custom Action Bar"); // adding icon in the ActionBar actionBar.setIcon(R.drawable.app_logo); // methods to display the icon in the ActionBar actionBar.setDisplayUseLogoEnabled(true); actionBar.setDisplayShowHomeEnabled(true); } // method to inflate the options menu when // the user opens the menu for the first time @Override public boolean onCreateOptionsMenu( Menu menu ) { getMenuInflater().inflate(R.menu.main, menu); return super.onCreateOptionsMenu(menu); } // methods to control the operations that will // happen when user clicks on the action buttons @Override public boolean onOptionsItemSelected( @NonNull MenuItem item ) { switch (item.getItemId()){ case R.id.search: Toast.makeText(this, "Search Clicked", Toast.LENGTH_SHORT).show(); break; case R.id.refresh: Toast.makeText(this, "Refresh Clicked", Toast.LENGTH_SHORT).show(); break; case R.id.copy: Toast.makeText(this, "Copy Clicked", Toast.LENGTH_SHORT).show(); break; } return super.onOptionsItemSelected(item); }} |
Kotlin
import android.os.Bundleimport android.view.Menuimport android.view.MenuItemimport android.widget.Toastimport androidx.appcompat.app.AppCompatActivityclass MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) // calling this activity's function to // use ActionBar utility methods val actionBar = supportActionBar // providing title for the ActionBar actionBar!!.title = " GfG | Action Bar" // providing subtitle for the ActionBar actionBar.subtitle = " Design a custom Action Bar" // adding icon in the ActionBar actionBar.setIcon(R.drawable.app_logo) // methods to display the icon in the ActionBar actionBar.setDisplayUseLogoEnabled(true) actionBar.setDisplayShowHomeEnabled(true) } // method to inflate the options menu when // the user opens the menu for the first time override fun onCreateOptionsMenu(menu: Menu): Boolean { menuInflater.inflate(R.menu.main, menu) return super.onCreateOptionsMenu(menu) } // methods to control the operations that will // happen when user clicks on the action buttons override fun onOptionsItemSelected(item: MenuItem): Boolean { when (item.itemId) { R.id.search -> Toast.makeText(this, "Search Clicked", Toast.LENGTH_SHORT).show() R.id.refresh -> Toast.makeText(this, "Refresh Clicked", Toast.LENGTH_SHORT).show() R.id.copy -> Toast.makeText(this, "Copy Clicked", Toast.LENGTH_SHORT).show() } return super.onOptionsItemSelected(item) }} |
Output:
Step 4: Color of the ActionBar
Head over to style.xml file located in the values directory of the res folder. To change the default color of the ActionBar, one has to change the colorPrimary resource. Below is the code to make the ActionBar color ‘green’.
XML
<resources><!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <!-- provided green color to the ActionBar --> <item name="colorPrimary">#0F9D58</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item></style></resources> |
Output:
Step 5: Working with activity_main.xml file
This file defines the layout of the activity. In this example, the prime focus is on ActionBar, thus the activity will contain only a simple TextView. Below is the code.
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#168BC34A" tools:context=".MainActivity"> <!-- Adding a TextView in the activity --> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello Geek!!" android:textColor="#000000" android:textSize="24sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> |
Output:
Advantages of ActionBar
- Provides a customized area to design the identity of an app
- Specify the location of the user in the app by displaying the title of the current Activity.
- Provides access to important and frequently used actions
- Support tabs and a drop-down list for view switching and navigation.
Disadvantages of ActionBar
- All features of the ActionaBar are not introduced at once but were introduced with the release of different API levels such as API 15, 17, and 19.
- The ActionBar behaves differently when it runs on different API levels.
- The features that were introduced with a particular API does not provide backward compatibility.
Note: To resolve all the problems related to ActionBar, Google introduced ToolBar along with the release of API 21(Android Lollipop).
