Android--toolbar

Toolbar was the first one I saw material design content

Official Document: Https://developer.android.com/reference/android/support/v7/widget/Toolbar.html

This is used instead of Actionbar, which is actually the title bar below the status bar.

To use toolbar, you need to hide the original Actionbar, which can be modified in the theme, in Values/styles.xml to make the following changes:

<name= "Apptheme"  parent= "Theme.AppCompat.Light.NoActionBar"  >

Or:

<name= "Apptheme"  parent= "Theme.AppCompat.NoActionBar " >

where Theme.AppCompat.Light.NoActionBar represents a tint theme, Theme.AppCompat.NoActionBar represents a dark theme.

This is written in the layout file xml:

1 <Framelayoutxmlns:android= "Http://schemas.android.com/apk/res/android"2 Xmlns:app= "Http://schemas.android.com/apk/res-auto"3 Android:layout_width= "Match_parent"4 Android:layout_height= "Match_parent">5     6     <Android.support.v7.widget.Toolbar7         Android:id= "@+id/toolbar"8 Android:layout_width= "Match_parent"9 Android:layout_height= "? Attr/actionbarsize"Ten Android:background= "? Attr/colorprimary" One Android:theme= "@style/themeoverlay.appcompat.dark.actionbar" A App:popuptheme= "@style/themeoverlay.appcompat.light"/> -      - </Framelayout>

XMLNS:APP specifies a new namespace, because material design is android5.0, and some of the previous systems do not exist, and in order to be compatible with previous systems, use App:popuptheme instead of Android: Popuptheme.

Popuptheme: Specifies the subject of the popup menu item.

Then the Java code:

1     protected void onCreate (Bundle savedinstancestate) {2         Super . OnCreate (savedinstancestate); 3         Setcontentview (r.layout.activity_main); 4         Toolbar Toolbar = (Toolbar) Findviewbyid (R.id.toolbar); 5         Setsupportactionbar (toolbar); 6     }

This allows you to see one of the simplest toolbar:

Then there are some settings for the toolbar,

1, change the color of toolbar, in the Values/styles.xml have such a value:

1     <stylename= "Apptheme"Parent= "Theme.AppCompat.Light.NoActionBar">2         <!--Customize your theme here. -3         <Itemname= "Colorprimary">@color/colorprimary</Item>4         <Itemname= "Colorprimarydark">@color/colorprimarydark</Item>5         <Itemname= "Coloraccent">@color/coloraccent</Item>6     </style>

Colorprimary represents the color of the title bar, Colorprimarydark represents the color of the title bar, Coloraccent represents some of the color of the control, more so, the picture source see Watermark Bar.

For the specific color of the value, is Colorprimary, Colorprimarydark, coloraccent color settings in the Values/colors.xml can be set:

1 <?XML version= "1.0" encoding= "Utf-8"?>2 <Resources>3     <Colorname= "Colorprimary">#3F51B5</Color>4     <Colorname= "Colorprimarydark">#303F9F</Color>5     <Colorname= "Coloraccent">#FF4081</Color>6 </Resources>

2. Add menu items and click events

Start by creating a new menu folder in Res, and then create a menu.xml that sets the layout of the menus:

1 <Menuxmlns:android= "Http://schemas.android.com/apk/res/android"2 Xmlns:app= "Http://schemas.android.com/apk/res-auto">3 4     <Item5         Android:id= "@+id/backup"6 Android:icon= "@drawable/ic_backup"7 Android:title= "Backup"8 app:showasaction= "Always"/>9     <ItemTen         Android:id= "@+id/delete" One Android:icon= "@drawable/ic_delete" A Android:title= "Delete" - app:showasaction= "Ifroom"/> -     <Item the         Android:id= "@+id/settings" - Android:icon= "@drawable/ic_setting" - Android:title= "Settings" - app:showasaction= "Never"/> + </Menu>

Explain the App:showasaction property, which specifies whether the menu item is in the popup menu, or in the title bar to become an icon, always will be displayed on the toolbar forever, ifroom means if the screen space is enough to display, not enough to display in the menu , the never is always displayed in the menu,
Then there is the Java code, in fact, two methods need to write a first load this menu layout:

    Public Boolean Oncreateoptionsmenu (Menu menu) {        getmenuinflater (). Inflate (R.menu.toolbar,menu);         return true ;    }

Then the settings for the Click event:

     Public Booleanonoptionsitemselected (MenuItem item) {Switch(Item.getitemid ()) { CaseR.id.backup:toast.maketext (mainactivity. This, "Backup", Toast.length_short). Show ();  Break;  CaseR.id.delete:toast.maketext (mainactivity. This, "Delete", Toast.length_short). Show ();  Break;  CaseR.id.settings:toast.maketext (mainactivity. This, "Delete", Toast.length_short). Show ();  Break; default:                 Break; }        return true; }

3. Add title, subtitle, logo, navigation bar icon

Here, directly modify the layout of the properties in the file, do not have to explain what, want to change what to turn over the official documents just fine:

<Framelayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Xmlns:app= "Http://schemas.android.com/apk/res-auto"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent">    <Android.support.v7.widget.ToolbarAndroid:id= "@+id/toolbar"Android:layout_width= "Match_parent"Android:layout_height= "? Attr/actionbarsize"Android:background= "? Attr/colorprimary"Android:theme= "@style/themeoverlay.appcompat.dark.actionbar"App:title= "This is the title"App:subtitle= "This is the subtitle"App:logo= "@drawable/ic_logo"App:navigationicon= "@drawable/ic_action_name"App:popuptheme= "@style/themeoverlay.appcompat.light"/></Framelayout>

The effect is as follows:

Android--toolbar