How to Create Navigation Drawer Using Android Design Support Library?

匿名 (未验证) 提交于 2019-12-03 02:22:01

问题:

In google developer blog post . I read about new way to create navigation drawer using new dependency called

compile 'com.android.support:design:22.2.0' 

but I didn’t found exact way to create navigation drawer using this new dependency.

In build.gradle , I have added dependency

compile 'com.android.support:design:22.2.0' compile 'com.android.support:appcompat-v7:22.0.0' 

in layout file added following code (based on google blog post)

<android.support.v4.widget.DrawerLayout         xmlns: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:fitsSystemWindows="true">      <!-- your content layout -->      <android.support.design.widget.NavigationView             android:layout_width="wrap_content"             android:layout_height="match_parent"             android:layout_gravity="start"             app:headerLayout="@layout/drawer_header"             app:menu="@menu/drawer"/> </android.support.v4.widget.DrawerLayout> 

Aslo I tried to extend class using ActionBarActivity but its deprecated?

Ref:http://android-developers.blogspot.in/2015/05/android-design-support-library.html

Any help appreciated .Thank you

回答1:

Hi try following steps

Add Android design support library dependency

compile 'com.android.support:design:22.2.1' 

Create a header for the navigation drawer

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="150dp"     android:background="@drawable/header"     android:padding="16dp"     android:orientation="vertical"     android:gravity="bottom">      <TextView         android:textColor="#ffffff"         android:textSize="18sp"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:text="Nirav Kalola\nnkDroid"         />     </LinearLayout> 

Create a menu for navigation drawer items

<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context="nkdroid.tutorial.navigationview.MainActivity"> <group android:checkableBehavior="single">     <item         android:id="@+id/navigation_item_1"         android:icon="@drawable/ic_action_home"         android:title="Home"/>     <item         android:id="@+id/navigation_item_2"         android:icon="@drawable/ic_action_info"         android:title="About Us"/>     <item         android:id="@+id/navigation_subheader"         android:title="Tutorials">         <menu>             <item                 android:id="@+id/navigation_sub_item_1"                 android:icon="@drawable/ic_image_looks_one"                 android:title="Android Tutorials"/>             <item                 android:id="@+id/navigation_sub_item_2"                 android:icon="@drawable/ic_image_looks_two"                 android:title="IOS Tutorials"/>         </menu>     </item> </group> </menu> 

Create Navigation View with header and items

<android.support.v4.widget.DrawerLayout xmlns: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:id="@+id/drawer_layout" android:fitsSystemWindows="true">  <!--Main content--> <LinearLayout     android:orientation="vertical"     android:id="@+id/main_content"     android:layout_width="match_parent"     android:layout_height="match_parent">      <include layout="@layout/app_bar"/> </LinearLayout>  <!--Navigation Drawer--> <android.support.design.widget.NavigationView     android:id="@+id/main_drawer"     android:layout_width="wrap_content"     android:layout_height="match_parent"     android:layout_gravity="start"      app:headerLayout="@layout/drawer_header"     app:menu="@menu/menu_drawer"/> </android.support.v4.widget.DrawerLayout> 

Implementing Navigation View

import android.content.res.Configuration; import android.os.Bundle; import android.os.PersistableBundle; import android.support.design.widget.NavigationView; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.MenuItem;  public class MainActivity extends AppCompatActivity implements    NavigationView.OnNavigationItemSelectedListener{  private Toolbar toolbar; private NavigationView mDrawer; private DrawerLayout mDrawerLayout; private  ActionBarDrawerToggle drawerToggle; private int mSelectedId;  @Override protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);      setContentView(R.layout.activity_main);      setToolbar();     initView();      drawerToggle=new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close);     mDrawerLayout.setDrawerListener(drawerToggle);     drawerToggle.syncState();     //default it set first item as selected     mSelectedId=savedInstanceState ==null ? R.id.navigation_item_1: savedInstanceState.getInt("SELECTED_ID");     itemSelection(mSelectedId);  }  private void setToolbar() {     toolbar= (Toolbar) findViewById(R.id.toolbar);     if (toolbar != null) {         setSupportActionBar(toolbar);     } }  private void initView() {     mDrawer= (NavigationView) findViewById(R.id.main_drawer);     mDrawer.setNavigationItemSelectedListener(this);     mDrawerLayout= (DrawerLayout) findViewById(R.id.drawer_layout); }  private void itemSelection(int mSelectedId) {      switch(mSelectedId){          case R.id.navigation_item_1:             mDrawerLayout.closeDrawer(GravityCompat.START);             break;          case R.id.navigation_item_2:             mDrawerLayout.closeDrawer(GravityCompat.START);             break;          case R.id.navigation_sub_item_1:             mDrawerLayout.closeDrawer(GravityCompat.START);             break;          case R.id.navigation_sub_item_2:             mDrawerLayout.closeDrawer(GravityCompat.START);             break;      }  }  @Override public void onConfigurationChanged(Configuration newConfig) {     super.onConfigurationChanged(newConfig);     drawerToggle.onConfigurationChanged(newConfig); }  @Override public boolean onNavigationItemSelected(MenuItem menuItem) {     menuItem.setChecked(true);     mSelectedId=menuItem.getItemId();     itemSelection(mSelectedId);     return true; }  @Override public void onSaveInstanceState(Bundle outState, PersistableBundle outPersistentState) {     super.onSaveInstanceState(outState, outPersistentState);     //save selected item so it will remains same even after orientation change     outState.putInt("SELECTED_ID",mSelectedId); }  } 

you can directly download source code from my blog



回答2:

hello @user3739665 i am also trying to lean support library, but i don't think there is proper way(because no sample available right now). so here is my tried code, just for demonstration how to use that lib.

i change that layout to like below added main fragment, you can also add toolbar.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:fitsSystemWindows="true" android:layout_height="match_parent">  <!-- your content layout --> <!--<FrameLayout     android:id="@+id/container"     android:layout_width="match_parent"     android:layout_height="match_parent" />--> <include layout="@layout/about_fragment"></include>  <android.support.design.widget.NavigationView     android:id="@+id/nav_draw"     android:layout_width="wrap_content"     android:layout_height="match_parent"     android:layout_gravity="start"     app:headerLayout="@layout/drawer_header"     app:menu="@menu/drawer" /> 

i have create drawer.xml for menu and drawer_header.xml for user detail just like show in blog

my activity code

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {  Toolbar toolbar; View root; NavigationView nav_draw; DrawerLayout drawer_layout;  @Override protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     //setContentView(R.layout.activity_main);     root = getLayoutInflater().inflate(R.layout.activity_main, null);     setContentView(root);      toolbar = (Toolbar) findViewById(R.id.toolbar);     setSupportActionBar(toolbar);      final ActionBar ab = getSupportActionBar();     ab.setHomeAsUpIndicator(R.drawable.ic_menu);     ab.setDisplayHomeAsUpEnabled(true);      drawer_layout = (DrawerLayout)findViewById(R.id.drawer_layout);     nav_draw = (NavigationView) findViewById(R.id.nav_draw);     nav_draw.setNavigationItemSelectedListener(this);     /* getSupportFragmentManager().beginTransaction()             .replace(R.id.container, new AboutPagerFragment())             .commit();*/  }  @Override public boolean onOptionsItemSelected(MenuItem item) {     switch (item.getItemId()) {         case android.R.id.home:             drawer_layout.openDrawer(GravityCompat.START);             return true;     }     return super.onOptionsItemSelected(item); }   @Override public boolean onNavigationItemSelected(MenuItem menuItem) {     if (menuItem.getItemId() == R.id.navigation_item_1) {         Snackbar                 .make(root, "First item Selected", Snackbar.LENGTH_LONG)                         //.setAction(R.string.snackbar_action, myOnClickListener)                 .show();     }     menuItem.setChecked(true);     drawer_layout.closeDrawers();      return false; }  /*@Override public boolean onCreateOptionsMenu(Menu menu) {     // Inflate the menu; this adds items to the action bar if it is present.     getMenuInflater().inflate(R.menu.menu_main, menu);     return true; }*/ 

}

add this in you build.gradle

dependencies {     compile 'com.android.support:appcompat-v7:22.2.0'     compile 'com.android.support:design:22.2.0'     compile 'com.android.support:support-v4:22.2.0' } 

drawer.xml

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android">     <group android:checkableBehavior="single">         <item             android:id="@+id/navigation_item_1"             android:checked="true"             android:title="@string/navigation_item_1">          </item>         <item             android:id="@+id/navigation_item_2"             android:title="@string/navigation_item_2" />          <item             android:id="@+id/navigation_subheader"             android:title="@string/navigation_subheader">             <menu>                 <item                     android:id="@+id/navigation_sub_item_1"                     android:title="@string/navigation_sub_item_1" />                 <item                     android:id="@+id/navigation_sub_item_2"                     android:title="@string/navigation_sub_item_2" />             </menu>         </item>     </group> </menu> 

drawer_header.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical" android:layout_width="match_parent"     android:gravity="center"     android:layout_height="130dip">       <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"          android:textAppearance="?android:attr/textAppearanceMedium"         android:text="Medium Text"         android:id="@+id/textView" /> </LinearLayout> 

EDIT

added navigation item open,close, enable items selection



回答3:

The "java part" can look like this:

Set your activity as a listener

navView.setNavigationItemSelectedListener(this); 

And than handle events the same way you handle menu interaction

@Override public boolean onNavigationItemSelected(MenuItem menuItem) {     int id = menuItem.getItemId();      menuItem.setChecked(true);     drawerLayout.closeDrawers();      if (id == R.id.some_item_1) {       } else if (id == R.id.some_item_2) {       } else {         throw new IllegalStateException("Unsupported menu item");     }      return true; } 

Check this github project for all examples of using design library.



回答4:

It's not clear exactly what your issue is (in what way did it not work?), but perhaps you missed the fact that you muse actually define the 'drawer_header' layout and the 'drawer' menu?

If that's not the problem, please explain in more detail exactly what you're having a problem with.



回答5:

Tutorial: Navigation View Design Support Library

 <android.support.v4.widget.DrawerLayout         xmlns:android="http://schemas.android.com/apk/res/android"         xmlns:app="http://schemas.android.com/apk/res-auto"         android:id="@+id/drawer_layout"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:fitsSystemWindows="true">          <RelativeLayout             android:layout_width="match_parent"             android:layout_height="match_parent">              <android.support.v7.widget.Toolbar                 ...             />          </RelativeLayout>          <android.support.design.widget.NavigationView             android:id="@+id/navigation_view"             android:layout_width="wrap_content"             android:layout_height="match_parent"             android:layout_gravity="start"             app:headerLayout="@layout/drawer_header"             app:menu="@menu/drawer"/>     </android.support.v4.widget.DrawerLayout> 


回答6:

activity_main

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout 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"     android:id="@+id/drawer_layout"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:fitsSystemWindows="true"     tools:openDrawer="start">      <include         layout="@layout/app_bar_main"         android:layout_width="match_parent"         android:layout_height="match_parent" />      <android.support.design.widget.NavigationView         android:id="@+id/nav_view"         android:layout_width="wrap_content"         android:layout_height="match_parent"         android:layout_gravity="start"         android:fitsSystemWindows="true"         app:headerLayout="@layout/nav_header_main"         app:menu="@menu/activity_main_drawer" />  </android.support.v4.widget.DrawerLayout> 

app_bar_main

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:fitsSystemWindows="true"     tools:context="com.azim.innovation.MainActivity">      <android.support.design.widget.AppBarLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:theme="@style/AppTheme.AppBarOverlay">          <android.support.v7.widget.Toolbar             android:id="@+id/toolbar"             android:layout_width="match_parent"             android:layout_height="?attr/actionBarSize"             android:background="?attr/colorPrimary"             app:popupTheme="@style/AppTheme.PopupOverlay" />      </android.support.design.widget.AppBarLayout>      <include layout="@layout/content_main" />      <android.support.design.widget.FloatingActionButton         android:id="@+id/fab"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="bottom|end"         android:layout_margin="@dimen/fab_margin"         android:src="@android:drawable/ic_dialog_email" />  </android.support.design.widget.CoordinatorLayout> 

content_main

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     app:layout_behavior="@string/appbar_scrolling_view_behavior"     tools:context="com.azim.innovation.MainActivity"     tools:showIn="@layout/app_bar_main">      <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Hello World!" /> </RelativeLayout> 

nav_header_main

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="@dimen/nav_header_height"     android:background="@drawable/side_nav_bar"     android:gravity="bottom"     android:orientation="vertical"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     android:theme="@style/ThemeOverlay.AppCompat.Dark">      <ImageView         android:id="@+id/imageView"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:paddingTop="@dimen/nav_header_vertical_spacing"         android:src="@android:drawable/sym_def_app_icon" />      <TextView         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:paddingTop="@dimen/nav_header_vertical_spacing"         android:text="Android Studio"         android:textAppearance="@style/TextAppearance.AppCompat.Body1" />      <TextView         android:id="@+id/textView"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="android.studio@android.com" />  </LinearLayout> 

activity_main_drawer

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android">      <group android:checkableBehavior="single">         <item             android:id="@+id/nav_camera"             android:icon="@drawable/ic_menu_camera"             android:title="Import" />         <item             android:id="@+id/nav_gallery"             android:icon="@drawable/ic_menu_gallery"             android:title="Gallery" />         <item             android:id="@+id/nav_slideshow"             android:icon="@drawable/ic_menu_slideshow"             android:title="Slideshow" />         <item             android:id="@+id/nav_manage"             android:icon="@drawable/ic_menu_manage"             android:title="Tools" />     </group>      <item android:title="Communicate">         <menu>             <item                 android:id="@+id/nav_share"                 android:icon="@drawable/ic_menu_share"                 android:title="Share" />             <item                 android:id="@+id/nav_send"                 android:icon="@drawable/ic_menu_send"                 android:title="Send" />         </menu>     </item>  </menu> 

colors

<resources>     <color name="colorPrimary">#3F51B5</color>     <color name="colorPrimaryDark">#303F9F</color>     <color name="colorAccent">#FF4081</color> </resources> 

dimens

<resources>     <!-- Default screen margins, per the Android Design guidelines. -->     <dimen name="nav_header_vertical_spacing">16dp</dimen>     <dimen name="nav_header_height">160dp</dimen>     <!-- Default screen margins, per the Android Design guidelines. -->     <dimen name="activity_horizontal_margin">16dp</dimen>     <dimen name="activity_vertical_margin">16dp</dimen>     <dimen name="fab_margin">16dp</dimen> </resources> 

MainActivity

package com.azim.innovation;  import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.view.View; import android.support.design.widget.NavigationView; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem;  public class MainActivity extends AppCompatActivity         implements NavigationView.OnNavigationItemSelectedListener {      private DrawerLayout mDrawer;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);         setSupportActionBar(toolbar);          FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);         if (fab != null)             fab.setOnClickListener(new View.OnClickListener() {                 @Override                 public void onClick(View view) {                     Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)                             .setAction("Action", null).show();                 }             });          mDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);         ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(                 this, mDrawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);         mDrawer.addDrawerListener(toggle);         toggle.syncState();          NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);         if (navigationView != null) {             navigationView.setNavigationItemSelectedListener(this);         }     }      @Override     public void onBackPressed() {         if (mDrawer.isDrawerOpen(GravityCompat.START)) {             mDrawer.closeDrawer(GravityCompat.START);         } else {             super.onBackPressed();         }     }      @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();          //noinspection SimplifiableIfStatement         if (id == R.id.action_settings) {             return true;         }          return super.onOptionsItemSelected(item);     }      @SuppressWarnings("StatementWithEmptyBody")     @Override     public boolean onNavigationItemSelected(MenuItem item) {         // Handle navigation view item clicks here.         int id = item.getItemId();          if (id == R.id.nav_camera) {             // Handle the camera action         } else if (id == R.id.nav_gallery) {          } else if (id == R.id.nav_slideshow) {          } else if (id == R.id.nav_manage) {          } else if (id == R.id.nav_share) {          } else if (id == R.id.nav_send) {          }          mDrawer.closeDrawer(GravityCompat.START);         return true;     } } 

dependencies

compile 'com.android.support:appcompat-v7:23.3.0'     compile 'com.android.support:design:23.3.0' 

styles

<resources>      <!-- Base application theme. -->     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">         <!-- Customize your theme here. -->         <item name="colorPrimary">@color/colorPrimary</item>         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>         <item name="colorAccent">@color/colorAccent</item>     </style>      <style name="AppTheme.NoActionBar">         <item name="windowActionBar">false</item>         <item name="windowNoTitle">true</item>     </style>      <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />      <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />  </resources> 

styles-v21

<resources>      <style name="AppTheme.NoActionBar">         <item name="windowActionBar">false</item>         <item name="windowNoTitle">true</item>         <item name="android:windowDrawsSystemBarBackgrounds">true</item>         <item name="android:statusBarColor">@android:color/transparent</item>     </style> </resources> 


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!