The Action Bar of the Android platform

Source: Internet
Author: User

What is the Action Bar?

For a long time, developers have been designing functional title bars for their Android applications. Android 3.0 officially introduced the Action Bar component, which standardizes the application navigation design, some new Android devices, such as tablets, also discard the traditional navigation functions and use software buttons to replace the physical home screen, menu, back-up, and search buttons.

The concept of Action Bar is very simple. If your application has an "option" menu, an active project menu appears when you click "menu, your application can use the Action Bar function in Android 3.0 to modify the application title Bar and display previous activities in the Options menu in an easy-to-use manner, 1.


Figure 1 Action Bar on a honeycomb Device

What actions does Action Bar have?

The most tricky thing is that when running the honeycomb and later versions of devices to display different Action Bar functions, it depends on whether the application's target SDK is set to the honeycomb or the traditional API level.

Let's look at a simple example. Suppose our application contains four screens: one main Activity and three "clean" activities (cleaning, scrubbing, and vacuuming ), we add an option menu to the main Activity so that the user can jump to the other three activities, as shown in figure 2.


Figure 2 simple applications with an option menu and four screens

The two basic components of this application are the option menu resource file and the main Activity class. Other Activity classes simply display an ImageView and a TextView control, the option menu resource file defines the option menu items. The content is as follows:

 
 
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <menu 
  3.     xmlns:android=">http://schemas.android.com/apk/res/android"> 
  4.     <item 
  5.         android:id="@+id/sweep" 
  6.         android:icon="@drawable/ic_menu_sweep" 
  7.         android:title="@string/sweep"  
  8.         android:onClick="onOptionSweep" /> 
  9.     <item 
  10.         android:id="@+id/scrub" 
  11.         android:icon="@drawable/ic_menu_scrub" 
  12.         android:title="@string/scrub" 
  13.         android:onClick="onOptionScrub" /> 
  14.     <item 
  15.         android:id="@+id/vacuum" 
  16.         android:icon="@drawable/ic_menu_vac" 
  17.         android:title="@string/vacuum"  
  18.         android:onClick="onOptionVacuum" /> 
  19. </menu> 

The main Activity class loads this menu resource as an option menu and defines the onClick handler for each option menu item. Its content is as follows:

 
 
  1. package com.mamlambo.actonthis; 
  2. import android.app.Activity; 
  3. import android.content.Intent; 
  4. import android.os.Bundle; 
  5. import android.view.Menu; 
  6. import android.view.MenuInflater; 
  7. import android.view.MenuItem; 
  8. public class ActOnThisActivity extends Activity { 
  9.    /** Called when the activity is first created. */ 
  10.    @Override 
  11.    public void onCreate(Bundle savedInstanceState) { 
  12.       super.onCreate(savedInstanceState); 
  13.       setContentView(R.layout.main); 
  14.    } 
  15.    @Override 
  16.    public boolean onCreateOptionsMenu(Menu menu) { 
  17.       MenuInflater inflater = getMenuInflater(); 
  18.       inflater.inflate(R.menu.cleaningoptions, menu); 
  19.       return true; 
  20.    } 
  21.       public void onOptionSweep(MenuItem i) 
  22.    { 
  23.       startActivity(new Intent(this, SweepActivity.class)); 
  24.    } 
  25.    public void onOptionScrub(MenuItem i) 
  26.    { 
  27.       startActivity(new Intent(this, ScrubActivity.class)); 
  28.    } 
  29.       public void onOptionVacuum(MenuItem i) 
  30.    { 
  31.       startActivity(new Intent(this, VacuumActivity.class)); 
  32.    } 
  33.    } 

So far, we have not done anything, so we do not need to set the Android configuration file of the application to the High-target API level technically. Here we will set it to API level 9.

 
 
  1. <uses-sdk android:minSdkVersion="9" /> 

When we run this "traditional" application on a honeycomb device, a grid-like icon (fourth) is displayed in the system bar ), it is equivalent to the "menu" button on a traditional Android phone, but it becomes a software button. Clicking it will display the option menu, like on an old-fashioned smartphone, 3 shows that the title bar at the top of the screen only displays the title of the application.


Figure 3 traditional application behavior on a honeycomb Device

If we modify the target API level of the app Android inventory file and set it to API level 11 (honeycomb), the app will automatically apply the Action Bar mechanism.

 
 
  1. <uses-sdk android:minSdkVersion="11" /> 

By default, the application icon, name, and so-called overflow menu icon are displayed in the title bar. Click this icon to bring up a text menu, listing option menu items, as shown in 4.


Figure 4 honeycomb application behavior on a honeycomb Device

Customize your Action Bar

When your application is set to a honeycomb platform, you can use all the functions provided by the Action Bar component to place your option menu items in the upper-right corner of the Action Bar, it is more convenient for users to use. The main menu item attribute that controls this behavior is android: showAsAction.

The following values are acceptable for this attribute:

1. always: This value keeps the menu item displayed on the Action Bar.

2. ifRoom: if there is enough space, this value will display the menu item on the Action Bar.

3. never: This value makes the menu item never appear on the Action Bar.

4. withText: This value enables the menu item to be displayed together with its icon and menu text.

Let's modify the option menu resource file to see the different effects of this attribute. First, if you still remember the content in Figure 1, if you do not remember to return it to the front and review it, you will find that the Action Bar displays the icons and names of each menu item. In other words, each menu item has the following attributes:

 
 
  1. android:showAsAction="ifRoom|withText" 

Another reasonable setting is to display each menu item on the Action Bar. As long as there is space but no messy text, in other words, each menu item has the following attributes:

 
 
  1. android:showAsAction="ifRoom" 

Figure 5 shows the effect of this change on a typical honeycomb device.


Figure 5 when the space is sufficient, the menu items, including text, are displayed on the Action Bar.

Finally, if we do not want the Vacuum menu item to be displayed on the Action Bar, the attribute value should be:

 
 
  1. android:showAsAction="never" 

In this way, only two menu items, Sweep and Scrub, are displayed on the Action Bar. In the upper-right corner, you will see the overflow menu again. Click it to see the menu items set as "never", such as Vacuum, and other menu items that are not suitable for being placed on the Action Bar, 6.


Figure 6 show some menu items on the Action Bar. Other menu items are never displayed (displayed in the overflow menu)

 
 
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <menu 
  3.     xmlns:android="http://schemas.android.com/apk/res/android"> 
  4.     <item 
  5.         android:id="@+id/sweep" 
  6.         android:icon="@drawable/ic_menu_sweep" 
  7.         android:title="@string/sweep"  
  8.         android:onClick="onOptionSweep" /> 
  9.     <item 
  10.         android:id="@+id/scrub" 
  11.         android:icon="@drawable/ic_menu_scrub" 
  12.         android:title="@string/scrub" 
  13.         android:onClick="onOptionScrub" /> 
  14.     <item 
  15.         android:id="@+id/vacuum" 
  16.         android:icon="@drawable/ic_menu_vac" 
  17.         android:title="@string/vacuum"  
  18.         android:onClick="onOptionVacuum" /> 
  19. </menu> 

Process the application icon clicking behavior on the Action Bar

Another function of the Action Bar is that you can click the application icon in the upper left corner. Although the clicking behavior does not respond by default, if you add a custom "home screen" function, or associate it with your startup screen.

Suppose you want to update the default Action Bar in the ScrubActivity class so that when you click the application icon, the user can return to the main Activity (and clear the Activity stack at the same time ).

It is easy to implement. You only need to implement the onOptionsItemSelected () method for the ScrubActivity class and process the specific menu item identifier android. R. id. home, for example:

 
 
  1. @Override 
  2. public boolean onOptionsItemSelected(MenuItem item)  
  3. {     
  4.    switch (item.getItemId())  
  5.    {         
  6.       case android.R.id.home:             
  7.          Intent intent = new Intent(this, ActOnThisActivity.class);             
  8.          intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);  
  9.          startActivity(intent);             
  10.          return true;         
  11.       default:             
  12.          return super.onOptionsItemSelected(item);     
  13.    } 

You can also display an arrow on the left of the application icon. You can use the setDisplayHomeAsUpEnabled () method in the onCreate () method of your Activity to return to the specified screen.

 
 
  1. ActionBar bar = getActionBar(); 
  2. bar.setDisplayHomeAsUpEnabled(true); 

7. We enabled this feature on the Sweep screen and added an arrow icon to the Action Bar.


Figure 7 "Action Bar" with a clickable home screen button and a return arrow

Use a screen without an Action Bar

When you set the application target to API 11 or higher, all your screens will have the Action Bar by default. If you do not want to use this new part, there are several ways to remove it, the simplest method may be to disable it directly in the Activity class through programming. For example, we can use the following two lines of code to close the Action Bar on the Vacuum screen, you only need to add the two lines of code to the onCreate () method of the Activity class.

 
 
  1. ActionBar bar = getActionBar(); 
  2. bar.hide(); 

The two lines of code will remove the entire Action Bar at the top of the screen, and the Application name will not be displayed. You can also hide the Action Bar, create a special custom topic in the layout file. For more information, see the Android SDK documentation.

Advanced functions of Action Bar

This article only gives a brief introduction to the Action Bar, which can be said to only touch its surface. Action Bar supports styles, including modifying background images and other custom attributes, they also support multiple mature view types and components, not only those menu items in the option menu, such as labels and down lists, but you can even add other view controls, create the Action Bar function area. For details, see the Android SDK documentation.

Summary

If your application already uses the option menu, you can use all the functions of Action Bar when you set the target to a honeycomb device, it is as simple as adding some new properties to your menu layout file. The Action Bar on each screen can be customized. As a developer, you can control the project to be displayed and how to display it. When you want to leave more screens to display game images and other content, you can even remove the entire Action Bar.

Source: http://www.informit.com/articles/article.aspx? P = 1743642

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.