Material Designer code implementation (4) -- ToolBar

Toolbar is actually a variant of ActionBar, which greatly extends Actionbar. We can use a ToolBar like an independent control. We can place it anywhere on the screen without sticking to the top. We can also change its height or use animations on the ToolBar.

The following describes how to use this control.

 

1. Place the control in the layout

<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" android: paddingBottom = "@ dimen/activity_vertical_margin" android: paddingLeft = "@ dimen/plugin" android: paddingRight = "@ dimen/plugin" android: paddingTop = "@ dimen/plugin" tools: context = ". mainActivity "> <android. support. v7.widget. toolbar android: id = "@ + id/toolbar" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_centerHorizontal = "true" android: layout_centerVertical = "true" android: background = "@ color/colorPrimary"> </android. support. v7.widget. toolbar> </RelativeLayout>

 

This problem may occur when we use it in the layout-it cannot be instantiated.

The following classes cocould not be instantiated:
-Android. support. v7.widget. Toolbar (Open Class, Show Error Log)
See the Error Log (Window> Show View) for more details.

Solution: restart Eclipse.

Solution: http://stackoverflow.com/questions/16907504/the-following-classes-could-not-be-instantiated-com-facebook-widget-loginbutt

Sometimes, when a new resource is added, Eclipse doesn't compile correctly the new code (maybe a caching issue), causing this error. normally, simply restarting Eclipse is enough to fix the problem.

 

This problem may also occur-style loss

Missing styles. Is the correct theme chosen for this layout?
Use the Theme combo box above the layout to choose a different layout, or fix the theme style references.

Failed to find style 'toolbarstyle' in current theme

Solution: in the visual layout window, change the topic style. I changed it from AppTheme to AppBaseTheme.

Method from: http://blog.csdn.net/romaticxiaoyu/article/details/7241512

Now, after solving these two problems, we can see this control. The color of the control is the color we previously specified in the color, which is set through background =.

 

2. Associate it with Actionbar

Let's first look at what the previous Actionbar looks like.

  

Now find this control in the code and set it to Actionbar (setSupportActionBar (toolbar), but there are two prerequisites.

1. No Actionbar (<item name = "windowActionBar"> false </item>) must be set in the topic; otherwise, two actionbar errors will be reported.

<Resources xmlns: android = "http://schemas.android.com/apk/res/android"> <! -- Base application theme, dependent on API level. this theme is replaced by AppBaseTheme from res/values-vXX/styles. xml on newer devices. --> <style name = "AppBaseTheme" parent = "Theme. appCompat. light. darkActionBar "> <! -- Theme customizations available in newer API levels can go in res/values-vXX/styles. xml, while customizations related to backward-compatibility can go here. --> </style> <! -- Application theme. --> <style name = "AppTheme" parent = "AppBaseTheme"> <! -- All mizmizations that are NOT specific to a special API-level can go here. --> <item name = "colorPrimary"> @ color/colorPrimary </item> <item name = "colorPrimaryDark"> @ color/primary_material_light </item> <item name = "android: textColorPrimary "> @ android: color/white </item> <item name =" android: windowNoTitle "> true </item> <item name =" windowActionBar "> false </item> </style> </resources>

 

2. The current Activity must inherit from ActionBarActivity

Public class MainActivity extends ActionBarActivity {@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); Toolbar toolbar = (Toolbar) findViewById (R. id. toolbar); if (toolbar! = Null) {setsuppactionactionbar (toolbar );}}
}

 

After the settings, we found another problem. It was shown that the Actionbar was good when we used the system Actionbar, but the following effect was displayed after the Actionbar was changed to the Toolbar.

   

We found that the three menu icons changed to black, which means we can change the image. The key is that the menu background after the Click turns white and the experience is poor. So we started to think about how to solve it? In fact, it is also simple. Just replace the Theme style with the inherited Theme. AppCompat. To prevent topic confusion, I deleted all the topic files of other versions, left a values file, and set the background color of the topic to # eeeeee.

(<Item name = "android: windowBackground"> @ color/windowBackground </item>)

<Resources xmlns: android = "http://schemas.android.com/apk/res/android"> <! -- Base application theme, dependent on API level. this theme is replaced by AppBaseTheme from res/values-vXX/styles. xml on newer devices. --> <style name = "AppBaseTheme" parent = "Theme. appCompat "> <! -- Theme customizations available in newer API levels can go in res/values-vXX/styles. xml, while customizations related to backward-compatibility can go here. --> </style> <! -- Application theme. --> <style name = "AppTheme" parent = "AppBaseTheme"> <! -- All mizmizations that are NOT specific to a special API-level can go here. --> <item name = "colorPrimary"> @ color/colorPrimary </item> <item name = "colorPrimaryDark"> @ color/primary_material_light </item> <item name = "android: textColorPrimary "> @ android: color/white </item> <item name =" android: windowBackground "> @ color/windowBackground </item> <item name =" android: windowNoTitle "> true </item> <item name =" windowActionBar "> false </item> </style> </resources>

 

  

 

3. Listener (optional)

We have a callback method in the activity to listen to click events of each item. Now this interface is also provided in the toolbar for listening. In this document, if each itme does not have an independent listener, you can bind the listener to the toolbar. I personally think it is easy to manage as usual.

<1> General method

@ Override public boolean onCreateOptionsMenu (Menu menu) {// Inflate the menu; this adds items to the action bar if it is present. getMenuInflater (). inflate (R. menu. main, menu); return true ;}@ Override public boolean onOptionsItemSelected (MenuItem item) {// Handle action bar item clicks here. the action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest. xml. int id = item. getItemId (); if (id = R. id. action_settings) {Toast. makeText (getApplicationContext (), "setting", 0 ). show (); return true;} return super. onOptionsItemSelected (item );}

 

<2> methods in toolbar

Toolbar. setOnMenuItemClickListener (new OnMenuItemClickListener () {@ Override public boolean onMenuItemClick (MenuItem item) {// Method stub automatically generated by TODO System. out. println ("click +" + item. getItemId (); return false ;}});

 

 

 

Reference:

Http://blog.csdn.net/hjj0212/article/details/7065050

Material Designer code implementation (4) -- ToolBar