The use of toolbar and theme of android5.x new features

Reprint Please specify the source "android5.x new features of the toolbar and the use of theme: http://blog.csdn.net/feiduclear_up/article/details/46457433 csdn ruins of the tree"

Android5.0 after Google strongly respected material design, intentionally unified before the Android style chaos situation. Last blog we learned the use of the android5.x new control Recyclerview,cardview,palette. This article describes the use of the toolbar and theme of the new features of android5.x.

Note that using toolbar and theme in android5.x requires the following configuration to be introduced under your project's Build.gradle file

dependencies {    compile fileTree(dir‘libs‘, include: [‘*.jar‘])    ‘com.android.support:appcompat-v7:22.2.0‘}

Toolbar

Are you still worried about the Actionbar text of Android that can't be set at random? Are you still worried about Actionbar not customizing to add your own layouts? Now let me tell you the good news, when you see this article, you don't have to worry about it. Google after Android5.0 introduced a toolbar to completely replace the previous Actionbar,toolbar the emergence of the Actionbar to solve the various restrictions, toolbar can be fully customized and configured. We understand the use of toolbar from the following points

1. Basic use of toolbar
2. Toolbar Configuration Topic Theme
3. The control settings commonly used in toolbar
4. Customization of toolbar

Basic use of toolbar

We will learn from the following points step-by-step the use of toolbar

1. Style (styles)
2. Layout (layouts)
3. Activity (Code)

Style

In order to be able to use toolbar in your activity, you must modify the theme style in the Styles.xml file in the project, the system default is as follows

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

This theme means using the Actionbar before the system, so what do we want to do with toolbar?

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

This topic indicates that the Actionbar of the system is not used, which is the first step.

Layout layouts

In order to use toolbar, our second step is to add the toolbar provided by the support V7 in your activity_main.xml layout, as shown in the code below

<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=". Mainactivity "> <android. Support. V7. Widgets. ToolbarAndroid:id="@+id/toolbar"Android:layout_width="Match_parent"android:layout_height="? Attr/actionbarsize"android:minheight="? Attr/actionbarsize"> </android. Support. V7. Widgets. Toolbar></RelativeLayout>

In order to use toolbar in your UI, you have to add toolbar for each activity layout and set an ID android:id= "@+id/toolbar" for toolbar. This is the second part.

Code Add toolbar

In order to use toolbar, the third part of our activity code is to do the following code processing:

 Toolbar toolbar;    @Override    protectedvoidonCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        toolbar = findView(R.id.toolbar);        setSupportActionBar(toolbar);    }

The code finds toolbar through Findview, then Setsupportactionbar (toolbar), and sets toolbar as the activity's navigation bar.

With the three steps above, you have already used the toolbar provided by support V7. Look at that.

Does it feel ugly? Not a bit of MD design style, but don't be disappointed, this is just to let toolbar normal work only, in order to let toolbar have material design style, we must go to set toolbar theme style.

Toolbar Configuration Topic Theme

We re-configure the system theme theme, modify the Styles.xml code as follows:

<stylename="Apptheme"Parent="Theme.AppCompat.Light.NoActionBar"> <!--Customize your theme here.<!--Navigation bar----<Item name="Colorprimary"> @color/accent_material_dark</Item> <!--Status bar background ---<Item name="Colorprimarydark"> @color/accent_material_light</Item> <!--The title color on the navigation bar--<Item name="Android:textcolorprimary"> @android: color/black</Item> <!--activity Window Color--<Item name="Android:windowbackground"> @color/material_blue_grey_800</Item> <!--the button is selected or clicked to get the focus color --<Item name="Coloraccent">#00ff00 </item><!--In contrast to coloraccent, the color of the button in the normal state --<Item name="Colorcontrolnormal">#ff0000 </item><!--button button Normal state color --<Item name="Colorbuttonnormal"> @color/accent_material_light</Item> <!--edittext The color of the font in the input box--<Item name="Edittextcolor"> @android: color/white</Item> </style>

The individual attributes are not explained and the annotations are clear. Let's see how toolbar use these themes?

The toolbar in configuration Activity_main.xml is changed as follows:

 <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPrimary"        >    </android.support.v7.widget.Toolbar>

Compared to the above toolbar configuration, there is only one more line of code added here.

android:background="?attr/colorPrimary"

Set the Background property for toolbar, where the following attributes are used in the Styles.xml file

<!--导航栏底色--><item name="colorPrimary">@color/accent_material_dark</item>

Follow the configuration below to see it!

The effect is a little improved, we continue to discover the advantages of toolbar!

The control settings commonly used in toolbar

So does toolbar have all the features of Actionbar? No doubt, look at the code:

toolbar = Findview (R. ID. Toolbar);Setsupportactionbar (Toolbar);Getsupportactionbar (). setdisplayshowtitleenabled(false);Toolbar. Settitle("Main title");Toolbar. Setsubtitle("subtitle");Toolbar. Setlogo(R. drawable. IC_launcher);Toolbar. Setnavigationicon(Android. R. drawable. IC_input_delete);

Toolbar can set title (main title), Subtitle (subtitle), logo (logo) Navigationicon (navigation button).

Note If you want to pass Toolbar.settitle ("main title"); Set the title of the toolbar, you must call the following code before calling it:

getSupportActionBar().setDisplayShowTitleEnabled(false);

The code above is used to hide the default title of the system.

So can toolbar use the menu function? The answer is yes. Take a look at the toolbar that loads the menu below.

<menu xmlns:android="Http://schemas.android.com/apk/res/android"xmlns:app="Http://schemas.android.com/apk/res-auto"xmlns:tools="Http://schemas.android.com/tools"tools:context=". Mainactivity "> <ItemAndroid:ID="@+id/action_edit"android:icon="@drawable/abc_ic_search_api_mtrl_alpha"android:orderincategory="a"android:title="Find"app:showasaction="Always"/> <ItemAndroid:ID="@+id/action_share"android:icon="@drawable/abc_ic_menu_share_mtrl_alpha"android:orderincategory=" the"android:title="Share"app:showasaction="Always"/> <ItemAndroid:ID="@+id/action_settings"android:orderincategory=" the"android:title="@string/action_settings"app:showasaction="Never"/></menu>

How do I add a click event to each item on the menu? Toolbar provides us with the following methods

Activity Inherits Toolbar's Onmenuitemclicklistener interface

publicclass MainActivity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener

//Implementation InterfaceToolbar.setonmenuitemclicklistener ( This);@Override     Public Boolean Onmenuitemclick(MenuItem Item) {Switch(Item.getitemid ()) { CaseR.id.action_edit:toast.maketext ( This,"Find Button", Toast.length_short). Show (); Break; CaseR.id.action_share:toast.maketext ( This,"Share Button", Toast.length_short). Show (); Break; }return false; }

At this point, toolbar added the control is basically finished, see the effect is as follows

Isn't it awesome? We haven't used a custom toolbar yet? How do you use it?

Customization of toolbar

In fact, toolbar is a container control that inherits ViewGroup, with the implication that we can add our own layouts in toolbar. Look at the code

<android. Support. V7. Widgets. ToolbarAndroid:id="@+id/toolbar"Android:layout_width="Match_parent"android:layout_height="? Attr/actionbarsize"Android:background="? Attr/colorprimary"> <relativelayout android:layout_width="Match_parent"android:layout_height="Wrap_content"android:gravity="Center"> <button android:layout_width="Wrap_content"android:layout_height="Wrap_content"android:text="Add"/> <textview android:layout_width="Wrap_content"android:layout_height="Wrap_content"Android:layout_centerinparent="true"android:layout_gravity="Center_vertical"android:text="title"Android:textsize="18SP"/> <imageview android:layout_width="Wrap_content"android:layout_height="Wrap_content"android:layout_alignparentright="true"Android:background="@drawable/abc_ic_menu_share_mtrl_alpha"/> </RelativeLayout> </android. Support. V7. Widgets. Toolbar>

：

So we can give the toolbar layout arbitrarily. It also solves the problem that the title cannot be centered. Toolbar children's shoes with special needs can be self-brain to achieve a variety of demand effects!

android5.x Material design Theme Style theme configuration

On the way to material design style is always far away, but also can not stop our study of the momentum, only the use of toolbar is not enough. In addition to the toolbar style, we can also control the style of many controls on Android by setting the theme theme. Directly on a picture effect.

The themes for the above effects are configured as follows:

<stylename="Apptheme"Parent="Theme.AppCompat.Light.NoActionBar"> <!--Customize your theme here.<!--Navigation bar----<Item name="Colorprimary"> @color/accent_material_dark</Item> <!--Status bar background ---<Item name="Colorprimarydark"> @color/accent_material_light</Item> <!--The title color on the navigation bar--<Item name="Android:textcolorprimary"> @android: color/black</Item> <!--activity Window Color--<Item name="Android:windowbackground"> @color/material_blue_grey_800</Item> <!--the button is selected or clicked to get the focus color --<Item name="Coloraccent">#00ff00 </item><!--In contrast to coloraccent, the color of the button in the normal state --<Item name="Colorcontrolnormal">#ff0000 </item><!--button button Normal state color --<Item name="Colorbuttonnormal"> @color/accent_material_light</Item> <!--edittext The color of the font in the input box--<Item name="Edittextcolor"> @android: color/white</Item> </style>

1.colorprimary:toolbar the background of the navigation bar.
2.colorPrimaryDark: The background of the status bar, note that this is only supported Android5.0 mobile phones.
3.textColorPrimary: The default color of the font for the entire current activity.
4.android:windowbackground: The form color of the current activity.
Click-to-select color for controls such as 5.coloraccent:checkbox,radiobutton,switchcompat
The color of the default state, such as 6.colorcontrolnormal:checkbox,radiobutton,switchcompat.
7.colorButtonNormal: The Color of button buttons in the default state.
8.editTextColor: Default EditView The color of the input box font.

Source Download

The use of toolbar and theme of android5.x new features