Android Toolbar custom icon, associated Drawerlayout

Source: Internet
Author: User

Android5.0 appeared to replace the Actionbar control toolbar, use more flexible, generally we use toolbar to use with Drawerlayout, the official provides a switch class Actionbardrawertoggle, to achieve toolbar and Drawerlayout Association, but sometimes according to our needs need to change the left side of the icon, do not need the system default three bar icon and click on the icon also want to drawerlayout side pull page out, the following explanation two different ways
One: The code to implement the Change toolbar icon

 Public classTempactivity extends Appcompatactivity {actionbardrawertoggle toggle; PrivateDrawerlayout mdrawerlayout; @Overrideprotected voidonCreate (@Nullable Bundle savedinstancestate) {super.oncreate (savedinstancestate);        Setcontentview (R.layout.text_tool_bar);    Inittoolbar (); }    Private voidInittoolbar () {Toolbar Toolbar=(Toolbar) Findviewbyid (R.id.tool_bar); Mdrawerlayout=(drawerlayout) Findviewbyid (r.id.drawer_layout); //Set iconToolbar.setnavigationicon (R.drawable.ic_launcher); //titleToolbar.settitle ("Title"); //put the toolbar setting of the Actionbar positionSetsupportactionbar (toolbar); //get the switch to associate the switch with the DrawerlayoutToggle =NewActionbardrawertoggle ( This, Mdrawerlayout,0,0); Getsupportactionbar (). setdisplayhomeasupenabled (true); //to set the Click event, click the popup menu screenMdrawerlayout.setdrawerlistener (toggle); }    //Overwrite method lets the system determine whether the clicked icon pops up the side pull page@Override Publicboolean onoptionsitemselected (MenuItem item) {toggle.onoptionsitemselected (item); returnsuper.onoptionsitemselected (item); }}

This will set the icon on the left to the icon we need, while clicking on the icon can also pop up the drawerlayout side-pull page, but note: in the above code, a line of code toggle.syncstate (), the effect is to the left small icon and side pull page state synchronization, This method's custom icon will only appear if you remove this line of code.

Cons: 1. Using code to place icons without XML flexibility,
2. This mode can not give the icon refers to the background selector

Second: Implement custom icons via XML (The advantage is that you can place controls flexibly in the toolbar position)
There are two ways to customize an icon using XML
Method 1: Set the properties on the root node of the toolbar

<Android.support.v7.widget.Toolbar App:navigationicon="@drawable/ic_add_follow"Android:id="@+id/tool_bar"Android:layout_width="match_parent"Android:layout_height="50DP"Android:background="@android: Color/holo_green_light"> </android.support.v7.widget.Toolbar>

app:navigationicon= "@drawable/ic_add_follow" is added to the layout above to show the icon, noting that the namespace is not the same
Also in the code and drawerlayout associated overwrite onoptionsitemselected method can be completed and side-Pull Page Association

 Public classTextactivity extends Appcompatactivity {PrivateActionbardrawertoggle Toggle; PrivateImageView Toolbaricon; PrivateDrawerlayout mdrawerlayout; @Overrideprotected voidonCreate (@Nullable Bundle savedinstancestate) {super.oncreate (savedinstancestate);        Setcontentview (R.layout.text_tool_bar);    Inittoolbar (); }    Private voidInittoolbar () {Toolbar Toolbar=(Toolbar) Findviewbyid (R.id.tool_bar); Mdrawerlayout=(drawerlayout) Findviewbyid (r.id.drawer_layout); //do not show titleToolbar.settitle ("");                Setsupportactionbar (toolbar); //associating the switch with the DrawerlayoutToggle =NewActionbardrawertoggle ( This, Mdrawerlayout,0,0); }     //Overwrite method lets the system determine whether the clicked icon pops up the side pull page@Override Publicboolean onoptionsitemselected (MenuItem item) {Switch(Item.getitemid ()) { CaseAndroid.        r.id.home:toggle.onoptionsitemselected (item); }        returnsuper.onoptionsitemselected (item); }

Cons: one: This way although you can set the icon in the layout file, but you cannot set the selector for the icon
Second: Because it is in the root node of the toolbar to set the picture, so can not only be placed in the picture position
Pros: Specify a picture directly in XML, and a line of code is done

Way 2: By looking at toolbar found it inherited ViewGroup, so we can set the child control to customize the icon in the toolbar
Layout:

<Android.support.v7.widget.Toolbar Android:id="@+id/tool_bar"Android:layout_width="match_parent"Android:layout_height="50DP"  
Android:background="@android: Color/holo_green_light"> <ImageView android:layout_gravity=" Left"Android:id="@+id/tool_bar_icon"Android:layout_width="wrap_content"Android:layout_height="wrap_content"android:src="@drawable/ic_launcher"
Android:background="@drawable/SELECTOR_INFODETAIL_BACK_BG"/></android.support.v7.widget.toolbar>

We can set the properties of the ImageView layout_gravity to specify the position of the icon, and we can set the background selector for ImageView.
Code logic:

 Public classTextactivity extends Appcompatactivity {PrivateActionbardrawertoggle Toggle; PrivateDrawerlayout mdrawerlayout; @Overrideprotected voidonCreate (@Nullable Bundle savedinstancestate) {super.oncreate (savedinstancestate);        Setcontentview (R.layout.text_tool_bar);    Inittoolbar (); }    Private voidInittoolbar () {//find the ID of the iconImageView Toolbaricon =(ImageView) Findviewbyid (R.id.tool_bar_icon); Toolbar Toolbar=(Toolbar) Findviewbyid (R.id.tool_bar); Mdrawerlayout=(drawerlayout) Findviewbyid (r.id.drawer_layout); Toolbar.settitle ("");        Setsupportactionbar (toolbar); //Setting up monitoringToolbaricon.setonclicklistener (NewView.onclicklistener () {@Override Public voidOnClick (View v) {toggle ();    }        }); }}
 private  void   Toggle () { int  drawerlockmode = Mdrawerlayout.getdrawerlockmode (Gravitycompat.start);  if   (Mdrawerlayout.isdrawervisible ( Gravitycompat.start)  && (drawerlockmode!= drawerlayout.lock_m        Ode_locked_open)) {mdrawerlayout.closedrawer (Gravitycompat.start);  else  if  (Drawerlockmode!= drawerlayout.lock_mode_locked_closed) {mdrawerlayout.opendrawer (Gravitycompat.start); }    }

Icons set in this way can not be used to overwrite the Onoptionsitemselected method to open and close the side-pull page, because the icon ID is not Android. R.id.home, so can only write listening events to complete the side pull page open and close.

By looking at the internal implementation of Onoptionsitemselected's source discovery system, the final call is the toggle method, but this method is private, we can not call through the object, found that the method only uses the Drawerlayout object, So just copy this method to your own class and use it to complete the effect.

Cons: More code in XML
Advantages: You can set the status selector for icons, the positioning of the icon is more flexible, you can put other controls

The above methods can be implemented to change the requirements of the toolbar icon, according to the specific needs of the most convenient choice of a

Android Toolbar custom icon, associated Drawerlayout

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.