[Android Series-] 4. Add Action Bar (action Bar)

Source: Internet
Author: User

Preface

The action Bar is one of the most important design elements to use to implement your application activities. By providing a variety of user interface features, the application is quickly aligned with other Andorid applications to be familiar and acceptable to the user. Key features include:

1. Identify your application, indicating the location of the user in the application.

2. Easy to operate important functions (like search function)

3. Navigation and view switching functions (using tabs or drop-down lists)

A similar effect is as follows:




set the action bar

In basic usage, the Action bar displays the active title and the app's icon on the left.

Similar:

Setting up a basic action bar requires that you use the App activity topic to support the action Bar, which is related to the specific Android version.

1. Android version 3.0 and above support

Starting with Android 3.0 (API level 11), using Theme.Holo (or its subclasses), the action Bar is included in all activities, and when the value targetsdkversion or minsdkversion is set to "11" or larger, the default is Use this theme (Theme).

The specific settings are similar to the following:

<manifest >    <uses-sdk android:minsdkversion= "One" .../>    ...</manifest>

So if you define your own theme, you need to use the action Bar, you can Theme.Holo inherit from this topic.


2. Processing of Android 2.1 and later

What if the Android version below 3.0 is used?

This is the time to import the Android support library into the app.

That's why there's an extra appcompat_v7 in the Android project that was introduced earlier. This is the library that needs to be imported.

The specific steps are

1. Update the activity to inherit the actionbaractivity

public class Mainactivity extends Actionbaractivity {...}

2. In the manifest file, update the <application> or a <activity> element to use Theme.AppCompatTheme, similar

<activity android:theme= "@style/theme.appcompat.light" ... >

Finally, set the API hierarchy for your app

<manifest >    <uses-sdk android:minsdkversion= "7"  android:targetsdkversion= "/>    ... </manifest>

The example described earlier, the app created by default, is the effect:

[Android Series-] 2. Android project directory structure and user interface creation


Add action button

The action bar can be used to add icons, text such as action buttons to perform some important actions related to the current environment.

You can also hide a button when it is not fully visible or important enough.


1. Configuring operations in XML (actions)

All the action buttons and other hidden overflow buttons need to be defined in the menu resource's XML file.

In the Res/menu directory, add a main_activity_actions.xml (this directory already has main.xml not to take care of it), the content is as follows:

<menu xmlns:android= "Http://schemas.android.com/apk/res/android" >    <!--Search, should appear as action Button--    <item android:id= "@+id/action_search"          android:icon= "@drawable/ic_action_search"          android:title= "@string/action_search"          android:showasaction= "Ifroom"/>    <!--Settings, should always Be in the overflow-    <item android:id= "@+id/action_settings"          android:title= "@string/action_settings "          android:showasaction=" Never "/></menu>

Description

1) Action_search This is required to be added in Strings.xml (previous article)

2) @drawable/ic_action_search

Ic_action_search is the name of the icon.

The relevant icons can be reached first:

Http://commondatastorage.googleapis.com/androiddevelopers/design/Android_Design_Icons_20131106.zip

Download, unzip after download,

To the Android design-icons 20131120\action Bar icons\holo_dark\01_core_search directory, copy the following four folders to the app's res directory.


3) The role of showasaction= "Ifroom" is:

If the space is enough, put this button on the action bar, otherwise put in overflow hidden.

Showasaction There are other configurations such as: always; Ifroom|withtext

It's literally easy to guess what the configuration is.


2. Add the action button to the action bar.

Here is the way to modify the mainactivity, the following onCreateOptionsMenu() changes:

@Overridepublic boolean Oncreateoptionsmenu (Menu menu) {    //inflate the menu items for use in the action bar    Menui Nflater inflater = Getmenuinflater ();    Inflater.inflate (r.menu.main_activity_actions, menu);    return Super.oncreateoptionsmenu (menu);}

3. Action button click Effect

Ways to modify the mainactivity onOptionsItemSelected()

    @Override Public    Boolean onoptionsitemselected (MenuItem item) {        //Handle Action Bar item clicks here. The action Bar would        //automatically handle clicks on the Home/up button, so long        /As you specify a parent Activ ity in Androidmanifest.xml.        /*int id = item.getitemid ();        if (id = = r.id.action_settings) {            return true;        }        return super.onoptionsitemselected (item); *        /switch (Item.getitemid ()) {case    R.id.action_search:    // OpenSearch ();    return true;    Case r.id.action_settings:    //opensettings ();    return true;    Default:    return super.onoptionsitemselected (item);    }         }
For the moment, we don't focus on the actual effect after the click.

Well, it's basically done.

Re-run to see.

found that the action button has been hidden in the overflow and does not appear on the action Bar


Actions Item does not appear on action Bar

If the app uses a support package,"android: “ 的命名空间是没有showAsAction这个属性的。

The alternative is:

<menu xmlns:android= "http://schemas.android.com/apk/res/android"      xmlns:yourapp= "http// Schemas.android.com/apk/res-auto ">    <!--Search, should appear as action button--    <item android: Id= "@+id/action_search"          android:icon= "@drawable/ic_action_search"          android:title= "@string/action_search "          yourapp:showasaction=" Ifroom "  />    ...</menu>

YourApp-This can be named according to your own needs. As long as the menu is defined, it can be used in item.

Run again, everything OK.


Add an up button to a lower level activity

When using Android 4.1 (API 16) and the above version, simply configure the Add Up button, click on it to go back to the previous level of the page.

In the previous two articles, there was an introduction to how to add a new activity

[Android Series-] 2. Android project directory structure and user interface creation [Android Series-] 3. Activate additional activities (activity) The OnCreate method of displaymessageactivity is changed directly here, the result is as follows:

@Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview ( R.layout.activity_display_message); Getsupportactionbar (). Setdisplayhomeasupenabled (true);//If your minSdkVersion is one or higher, instead use:    //Getactionbar (). Setdisplayhomeasupenabled (True);/*if (savedinstancestate = = null) { Getsupportfragmentmanager (). BeginTransaction (). Add (R.id.container, New Placeholderfragment ()). commit ();} */}

Other parts do not need to be changed.

The following effects are performed:


add a style to the action Bar

Android contains a set of built-in themes, such as "dark" or "bright" action bar styles, as well as the ability to expand these themes to make their own action bar style.

It is important to note that if you are using a library-enabled API to create an action bar, you need to use or override it instead Theme.AppCompat Theme.Holo (provided in API 11 or later). In this case, it is necessary to define the style attributes twice, one is the platform's style property, and one is the style attribute that supports the library.

1. Use the Android theme

There are two basic activity themes available for Android:

1) Theme.Holo --"dark" theme

2) Theme.Holo.Light --"bright" theme

It's easy to use, just set the value of the <application> element android:theme , or set the individual <activity> android:theme的值

<application android:theme= "@android: Style/theme.holo.light" .../>

You can also use deep tones as a whole, while using the action bar Theme.Holo.Light.DarkActionBar to define the use of dark tones.


If you use support, you'll need to use Theme.AppCompat the theme.

    • Theme.AppCompat"Dark" theme
    • Theme.AppCompat.LightLight Theme
    • Theme.AppCompat.Light.DarkActionBar"Light" theme, but there is a "dark" tint of the action bar.






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.