The use of the Navigationview of Android5.0

Source: Internet
Author: User

The way the navigation menu is produced in a variety of ways, there are all kinds of cool effect of the specific implementation of the way, so today I mainly want to say that Google in Android5.0 after the introduction of the Navigationview of the specific use of the way.

Navigationview is already visible in many apps, such as the one in the country (the part that slides out of the side-pull menu belongs to Navigationview), such as:

And Google's own apps, basically all using navigationview, such as Gmail, Google Maps and Google Play:

OK, after reading the picture, let's talk about this navigationview.

What is 1.NavigationView?

Long ago, when we made the drawer menu, the layout of the part that slid on the left was defined by ourselves, and it took time to make a good-looking side-pull menu by ourselves, but it always cost So Google launched the Navitationview after 5.0, which is the menu that we left on the slide. This menu is divided into two parts, the above part is called Headerlayout, the following items are menu, the effect if we want to write a certain can be written, but not necessary, since Google provides this control, then we have to see how this control to use it.

2.NavigationView How to use

As with the normal side-pull menu, the first thing is all in one drawerlayout (if you are unfamiliar with drawerlayout use, refer to this article using Drawerlayout to implement the side-pull menu), But this time, we're going to slide the left side out of the menu with a navigationview instead of the code as follows:

<?xml version= "1.0" encoding= "Utf-8"? >< xmlns:android= "/http "xmlns:app=" Http:// "xmlns:tools="/HTTP/ "android:layout_width=" match_parent "android:layout_height=" Match_parent "Tools:context = "Org.mobiletrain.drawerlayout.MainActivity" > <linearlayout android:layout_width= "match_parent" and roid:layout_height= "match_parent" android:orientation= "vertical" > <textview android:layout_ Width= "Wrap_content" android:layout_height= "Wrap_content" android:text= "Main Page"/> </linearlayo ut> < android:id= "@+id/navigation_view" Android:layout_ Width= "Wrap_content" android:layout_height= "match_parent" android:layout_gravity= "left" Android:fitsS Ystemwindows= "true" App:headerlayout= "@layout/header_layout" app:menu= "@menu/main" ></></>
OK, let me explain the meanings of several of these properties separately:

The "left" property indicates that the view is a slide-out menu on the other side, and the meaning of this property does not have to be said, which is the knowledge point in the Drawerlayout usage mode. "@layout/header_layout" refers to a header layout file, which is the background image we see above, including the controls that display the user name on the background image, and so on. "@menu/main" means referencing a menu as the following click item

OK, then let's look at the layout file:

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= " Android "              android:layout_width=" match_parent "              android:layout_height=" 200DP "              android:orientation=" Vertical ">    <imageview        android:id=" @+id/iv "        android:layout_width=" Match_parent "        android: layout_height= "Match_parent"        android:scaletype= "Centercrop"        android:src= "@drawable/p1"/></ Linearlayout>

Then look at the menu file:

<?xml version= "1.0" encoding= "Utf-8"? ><menu xmlns:android= "Http://" >    <item        android:id= "@+id/favorite"        android:icon= "@mipmap/ic_launcher"        android:title= "Favorites" />    <item        android:id= "@+id/wallet"        android:icon= "@mipmap/ic_launcher"        android:title= "wallet"/ >    <item        android:id= "@+id/photo"        android:icon= "@mipmap/ic_launcher"        android:title= "album"/ >    <item        android:id= "@+id/file"        android:icon= "@mipmap/ic_launcher"        android:title= "file" /></menu>

OK, run to see the effect:

OK, it has been shown, but there is a problem, the picture has become gray, how to break? There are two ways of doing this:

1. Add the app:itemicontint= "@color/blue" property to the layout file to indicate that the color of the settings picture is all blue and the effect is as follows:

2. The first solution would let all the pictures be displayed in a single color, what if I wanted the picture to show his own color? Call the following method in the Java code:

Navigationview Navigationview = (navigationview) Findviewbyid (;        Navigationview.setitemicontintlist (NULL);

The display results are as follows:

It's normal.

There are also the following two common APIs: "@color/coloraccent" sets the background color for each item "" Sets the background color of item

OK, what if I want to add a separate floss between the Navigationview item? Simply put the item in a group in the menu and give the group an ID, the code is as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><menu xmlns:android= "Http://" >    <group android:id= "@+id/g1" >        <item            android:id= "@+id/favorite"            android:icon= "@ Mipmap/ic_launcher "            android:title=" collection "/>        <item            android:id=" @+id/wallet "            android:icon=" @ Mipmap/ic_launcher "            android:title=" wallet "/>    </group>    <group android:id=" @+id/g2 ">        <item            android:id= "@+id/photo"            android:icon= "@mipmap/ic_launcher"            android:title= "album"/ >    </group>    <item        android:id= "@+id/file"        android:icon= "@mipmap/ic_launcher"        android:title= "File"/></menu>

The display results are as follows:

OK, the split line has been added successfully.

Let's take a look at how to handle event snooping in Navigationview.

Navigationview event Processing in the main is two aspects, a head of the click event, there is a Itemview click event, the following we have to look at:

1. Head Click event

To handle the head click event, we need to get to the head control first, in the Java code we can get the head control in the following way,

Get header Layout file        View headerview = Navigationview.getheaderview (0);

Then, by calling the Findviewbyid method in Headerview to find the control to the head, set the Click event.

2.item Click events

        Navigationview.setnavigationitemselectedlistener (New Navigationview.onnavigationitemselectedlistener () {            @ Override Public            Boolean onnavigationitemselected (MenuItem item) {                //Handle the item's click event here to                return true;            }        });

OK, this is the basic navigationview use. There are questions to welcome the exchange.


The use of the Navigationview 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: 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.