The use of the toobar of Android5.0

Source: Internet
Author: User

Generally speaking, the use of toolbar can be divided into two aspects, on the one hand, toolbar as a actionbar to use, on the other hand, toolbar as a separate control to use, But most of the things I've seen so far have been using toolbar as Actionbar, and we'll explain each of these two ways.

1.Toolbar use as Actionbar

Use toolbar as Actionbar first to hide the system default Actionbar, hidden way is actually very simple, just need to set a style is simple, such as:

    <style name= "Apptheme.noactionbar" >        <item name= "Android:windowactionbar" >false</item>        <item name= "Android:windownotitle" >true</item>        <item name= "Windowactionbar" >false</item >        <item name= "Windownotitle" >true</item>    </style>

Android Phone before 3.0 title bar called titlebar,3.0 after the introduction of Actionbar to replace titlebar, so we use the toolbar in order to be compatible with the early mobile phone also to the titlebar hidden away. These two things are hidden after, in the manifest file to the activity or app set a theme, I here to set the theme of activity, as follows:

        <activity android:name= ". Mainactivity "Android:theme=" @style/apptheme.noactionbar ">            <intent-filter>                <action android: Name= "Android.intent.action.MAIN"/>                <category android:name= "Android.intent.category.LAUNCHER"/>            </intent-filter>        </activity>

So, my mainactivity on the success of the hidden Actionbar, the next is how to add toolbar, we know in the enterprise development Actionbar use is not much, an important reason is that this thing is too rigid, and too ugly, Then Google introduced toolbar inevitably to avoid these problems, so,toolbar in addition to good-looking another biggest advantage is flexibility, you can completely use it as an ordinary control, how to use the ordinary control? First in the layout file to write Bai, at the same time, we are compatible with Android5.0 before the phone, in the use of toolbar is the use of the V7 package toolbar, layout file as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout    xmlns:android= "http://schemas.android.com/apk/ Res/android "    xmlns:tools=" Http://schemas.android.com/tools "    android:layout_width=" Match_parent    " android:layout_height= "Match_parent"    tools:context= "org.mobiletrain.toolbar2.MainActivity" >    < Android.support.v7.widget.Toolbar        android:id= "@+id/toolbar"        android:layout_width= "Match_parent        " android:layout_height= "? attr/actionbarsize"        android:background= "@color/colorprimary"        android: Popuptheme= "@style/apptheme.popupoverlay" >    </android.support.v7.widget.toolbar></linearlayout >

OK, isn't it simple? A simple layout file is done, then there are three places to explain, first of all, toolbar high, you can give a fixed value, you can also refer to the height of the previous actionbar, The benefit of referencing the actionbar height is that the system automatically adjusts the height of the toolbar for you on different devices. The 2nd is the Background property, we can set a background color for toolbar when using toolbar. The third is the Popuptheme property, which is the display of the popup box, here we generally set as follows:

<style name= "Apptheme.popupoverlay" parent= "Theme.AppCompat.Light" >

OK, after the layout file is done, let's see what we can do with the mainactivity:

        Toolbar Toolbar = (Toolbar) Findviewbyid (R.id.toolbar);        Toolbar.settitle ("main title");        Toolbar.setsubtitle ("level two title");        Set App logo        Toolbar.setlogo (r.drawable.a5k);        Set the navigation icon        Toolbar.setnavigationicon (r.drawable.ic_menu_back);        Replace Actionbar        Setsupportactionbar (toolbar) with toolbar;

In the layout file we still like to deal with ordinary controls, first get to this toolbar, and then set various properties for toolbar, as to what these properties specifically refer to the following picture to understand (a5k is the picture, Ic_menu_back is a forward arrow):

But this navigation arrow is too ugly, in fact, here we use the system default arrow on it, set the way as follows:

        Set the navigation icon//        Toolbar.setnavigationicon (r.drawable.ic_menu_back);        Replace Actionbar        Setsupportactionbar (toolbar) with toolbar;        Displays the navigation button and puts it in a clickable state        Getsupportactionbar (). Setdisplayhomeasupenabled (True);


Notice here to comment out the code that sets the navigation icon before Getsupportactionbar (). setdisplayhomeasupenabled (true), to be placed in Setsupportactionbar (toolbar), after this execution, because the real actionbar is already hidden by us, if Actionbar is called before toolbar instead of Getsupportactionbar ( ) will not be able to get actionbar. When you do this, the display looks like this:

This default back button is much prettier than the back button in Actionbar. If you've used the back button inside the Actionbar, you'll know how ugly it is.

OK, Next, what if I want to show the menu item on toolbar? What did you do now when you were Actionbar?

Write the menu file first, as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><menu xmlns:android= "Http://schemas.android.com/apk/res/android"      xmlns:app= "Http://schemas.android.com/apk/res-auto" >    <item        android:id= "@+id/setting"        android:icon= "@drawable/a5k"        android:orderincategory= "        android:title=" setting "        app:showasaction" = "Never"/>    <item        android:id= "@+id/search"        android:title= "search"        app:actionviewclass= " Android.support.v7.widget.SearchView "        app:showasaction=" always "/>    <item        android:id=" @+id/ Share "        app:actionproviderclass=" Android.support.v7.widget.ShareActionProvider "        app:showasaction=" Never "        android:title=" Share "></item></menu>

Note that there are two places that are not the same as before, one is that Showasaction's namespace has changed to a custom app, and the Actionviewclass and Actionproviderclass namespaces have become apps. OK, after the menu file is finished, create a menu in the activity as follows:

    @Override Public    Boolean oncreateoptionsmenu (Menu menu) {        getmenuinflater (). Inflate (R.menu.main, menu);        return Super.oncreateoptionsmenu (menu);    }

The same way we used to create menus, let's look at the results:

Seemingly no difficulty, then the menu event processing is still in the Onoptionsitemselected method, as follows:

    @Override Public    Boolean onoptionsitemselected (MenuItem item) {        switch (Item.getitemid ()) {case            Android. R.id.home:                log.d ("Lenve", "onoptionsitemselected () returned:" + 456);                break;        }        return super.onoptionsitemselected (item);    }

2. Use toolbar alone

You can use toolbar as a actionbar or as a normal control, although this usage is relatively rare. If you use it as a normal control, then I don't have to hide actionbar (do not give the new activity the Apptheme.noactionbar theme that we created at the beginning of the article in the manifest file). Then I still first write a toolbar in the layout file, the difference is that I put it in the center of the screen, the code is as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><relativelayout    xmlns:android= "http://schemas.android.com/apk /res/android "    xmlns:tools=" Http://schemas.android.com/tools "    android:layout_width=" Match_parent    " android:layout_height= "Match_parent"    tools:context= "org.mobiletrain.toolbar2.Main2Activity" >    < Android.support.v7.widget.Toolbar        android:id= "@+id/toolbar"        android:layout_width= "Match_parent        " android:layout_height= "? attr/actionbarsize"        android:layout_centerinparent= "true"        android:background= " @color/colorprimary "        android:popuptheme=" @style/apptheme.popupoverlay ">    </ Android.support.v7.widget.toolbar></relativelayout>

The display results are as follows:

Ok,toolbar has been shown in the center of the screen, but since it is used as a normal control, how do we add menu items to the toolbar? As below, you need to toolbar yourself to load:

    @Override    protected void onCreate (Bundle savedinstancestate) {        super.oncreate (savedinstancestate);        Setcontentview (r.layout.activity_main2);        Toolbar Toolbar = (Toolbar) Findviewbyid (R.id.toolbar);        Toolbar.inflatemenu (R.menu.main);    }

The display results are as follows:

OK, the next question is how to set a click event for these controls, as follows:

        Toolbar.setonmenuitemclicklistener (New Toolbar.onmenuitemclicklistener () {            @Override public            Boolean Onmenuitemclick (MenuItem Item) {                switch (Item.getitemid ()) {case                    R.id.search:                        log.d ("Lenve", " Onmenuitemclick () Returned:search ");                        break;                    Case r.id.setting:                        log.d ("Lenve", "Onmenuitemclick () returned:setting");                        break;                    Case R.id.share:                        log.d ("Lenve", "Onmenuitemclick () Returned:share");                        break;                }                return true;            }        });

OK, this is how the basic toolbar is used.

The use of the toobar of Android5.0

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.