I have a navigation drawer in my android app. I can show a menu in navigation drawer with navigationView, but I want to show a listview or recyclerview in the drawer. I need so because drawer menu is not the same for every user. the users choose the newspapers which they want to read. for example:
user A's listview will be like this : Washington Post, New York
Times, Guardian, Independent.
user B's listview : Daily Mail, Washington Post, Financial Times.
How can i add listview on navigationView?
activity_main.xml :
<android.support.v4.widget.DrawerLayout >
...
<android.support.design.widget.CoordinatorLayout>
...
<android.support.design.widget.AppBarLayout>
...
<android.support.v7.widget.Toolbar/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/menu_drawer"
app:layout="#layout/custom_row"/>
menu_drawer.xml :
<group
android:id="#+id/group_1"
android:checkableBehavior="single">
<item
android:id="#+id/nav_first_fragment"
android:icon="#drawable/ic_number_0"
android:title="First" />
<item
android:id="#+id/nav_second_fragment"
android:icon="#drawable/ic_number_1"
android:title="Second" />
<item
android:id="#+id/nav_third_fragment"
android:icon="#drawable/ic_number_2"
android:title="Third" />
</group>
<group
android:id="#+id/group_2"
android:checkableBehavior="single">
<item
android:id="#+id/navigation_item_11"
android:icon="#drawable/ic_number_0"
android:title="My Newspapers">
<menu>
<item
android:id="#+id/navigation_item_1"
android:icon="#drawable/ic_number_0"
android:title="#string/navigation_item_1" />
<item
android:id="#+id/navigation_item_2"
android:icon="#drawable/ic_number_1"
android:title="#string/navigation_item_2" />
<item
android:id="#+id/navigation_item_3"
android:icon="#drawable/ic_number_2"
android:title="#string/navigation_item_3" />
<item
android:id="#+id/navigation_item_4"
android:icon="#drawable/ic_number_3"
android:title="#string/navigation_item_4" />
<item
android:id="#+id/navigation_item_5"
android:icon="#drawable/ic_number_4"
android:title="#string/navigation_item_5" />
</menu>
</item>
</group>
custom_row.xml :
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/text_superhero"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="4dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="4dp"
android:text="Superhero"
android:textColor="#color/colorTextSecondary">
You can use this code, but remember you need use adapter to populate your ListView
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/nav_header_main" />
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:divider="#color/list_divider"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector"
android:textColor="#424242"/>
</LinearLayout>
</android.support.design.widget.NavigationView>
You have this result:
A NavigationView is nothing more than a wrapper for RecyclerView that populates the list from a menu XML resource and provides a Material-compliant drawer out of the box. There really isn't any special logic that makes it work in a navigation drawer.
If you want a more dynamic navigation drawer, you should simple replace the NavigationView in your layout XML with a RecyclerView and populate it like you would any other RecyclerView.
Related
This question already has answers here:
NavigationView get/find header layout
(9 answers)
Closed 1 year ago.
I have done my best to reproduce a UI design for an android navigation drawer.
I have already designed the nav header to look like what is in the UI design.
When I run the app, the header (the layout in nav_header_home.xml) is not visible in the simulator.
The nav_header_home.xml for the navigationdrawer:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:background="#color/clientPrimaryBlue"
android:gravity="center"
android:orientation="horizontal"
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"
app:srcCompat="#drawable/home" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="#dimen/nav_header_vertical_spacing"
android:text="Home"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
activity_home_drawer.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<item android:title="Movies">
<menu>
<item
android:id="#+id/nav_action"
android:icon="#drawable/ic_menu_share"
android:title="Action" />
<item
android:id="#+id/nav_adventure"
android:icon="#drawable/ic_menu_send"
android:title="Adventure" />
<item
android:id="#+id/nav_comedy"
android:icon="#drawable/ic_menu_send"
android:title="Comedy" />
<item
android:id="#+id/nav_crime"
android:icon="#drawable/ic_menu_send"
android:title="Crime" />
<item
android:id="#+id/nav_drama"
android:icon="#drawable/ic_menu_send"
android:title="Drama" />
<item
android:id="#+id/nav_fantasy"
android:icon="#drawable/ic_menu_send"
android:title="Fantasy" />
</menu>
</item>
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_actors"
android:icon="#drawable/ic_menu_camera"
android:title="Actors" />
<item
android:id="#+id/nav_directors"
android:icon="#drawable/ic_menu_gallery"
android:title="Directors" />
<item
android:id="#+id/nav_producers"
android:icon="#drawable/ic_menu_slideshow"
android:title="Producers" />
</group>
<item android:title="My Account">
<menu>
<item
android:id="#+id/nav_update_profile"
android:icon="#drawable/ic_menu_share"
android:title="Update Profile" />
<item
android:id="#+id/nav_reset_password"
android:icon="#drawable/ic_menu_send"
android:title="Reset Password" />
<item
android:id="#+id/nav_sign_out"
android:icon="#drawable/ic_menu_send"
android:title="Sign Out" />
</menu>
</item>
</menu>
Screenshot of expected menu layout
Screenshot of layout in android emulator
app_bar_home.xml:
<?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"
tools:context="media.client.clientmediaandroid.activity.home.HomeActivity">
<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_home" />
<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"
app:srcCompat="#android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
action_home.xml with the DrawerLayout:
<?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_home"
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_home"
app:menu="#menu/activity_home_drawer" />
</android.support.v4.widget.DrawerLayout>
With help from #MikeM., I was able to adjust my layout settings in a way that allowed me to see the navigation header.
His contribution can be read directly here -
Home Navigation header of NavigationDrawer not showing in simulator
Set the fitsSystemWindows attributes to false on the DrawerLayout and NavigationView as suggested by Mike. M.
im beginer of android. i design a navigation drawer like this:
as you see all items in menu are on the right Except "SubHeader".
how can i move "SubHeader" item to the right of this menu? i use all properties like gravity, layout gravity, layoutDirection to the SubHeaderItem but it doesn't work.
my code is
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/navigation_view"
android:layout_gravity="end"
android:fitsSystemWindows="true"
android:layoutDirection="rtl"
app:headerLayout="#layout/navigation_header"
app:menu="#menu/navigation_menu"
/>
my menu code is:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<group android:checkableBehavior="single">
<item
android:title="inbox"
android:id="#+id/inbox_id"
android:icon="#drawable/inbox" />
</group>
<item android:title="SubHeader">
<menu>
<item
android:title="all main"
android:id="#+id/all_mail"
android:icon="#drawable/allmail" />
</menu>
</item>
</menu>
Try adding these attributes to NavigationView in your layout file.
android:layoutDirection="rtl"
android:textDirection="rtl"
If no other way. You should use custom layout
example:
<android.support.design.widget.NavigationView
android:layoutDirection="rtl"
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer>
<LinearLayout>
// code xml here
</LinearLayout>
<android.support.design.widget.NavigationView/>
try this make your menu gravity="right" of your menu item
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:gravity="end"
android:layoutDirection="rtl"
android:layout_gravity="end">
<group android:checkableBehavior="single"
android:layout_gravity="end"
android:gravity="end">
<item
android:id="#+id/nav_1"
android:icon="#drawable/abc"
android:gravity="end"
android:layout_gravity="end"
android:title="menu title"/>
</group>
</menu>
and make your navigation view like this
<android.support.design.widget.NavigationView
android:layoutDirection="rtl"
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
I implement ExpandableListView but i have also items in menu xml, so how can i declare that this list view should be below of one of the item inside of my menu.xml? For example if i want expandablelistview below location item what should i do? Here is my code:
menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item android:id="#+id/location" android:icon="#drawable/mylocation" android:title="#string/My_Location" android:animateLayoutChanges="true"/>
</group>
<item android:title="#string/action_settings">
<menu>
<group android:checkableBehavior="single">
<item android:id="#+id/profile" android:icon="#drawable/settings"
android:title="#string/Edit_Profile" android:animateLayoutChanges="true" />
<item android:id="#+id/logout" android:icon="#drawable/logout"
android:title="#string/Log_Out" android:animateLayoutChanges="true"/>
</group>
</menu>
</item>
</menu>
And drawer_main.xml
<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/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="left|start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"
android:nestedScrollingEnabled="true"
app:itemIconTint="#FFFFFF"
app:itemTextColor="#FFFFFF"
android:background="#000000">
<FrameLayout
android:id="#+id/drawer_list_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ExpandableListView
android:id="#+id/navList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</FrameLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
So my problem is that the ExpandableListView remain top and i dont want to use layout_marginTop because it depends on user screen. Is there any other way to accomplish this issue?
I'm trying to add a switch as menuitem in NavigationView like this
I used the the actionViewClass attribute but it only shows the title.
<item
android:id="#+id/navi_item_create_notifications_sound"
android:title="Notifications Sounds"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:actionViewClass="android.support.v7.widget.SwitchCompat"
app:showAsAction="always" />
The new support library 23.1
allows using a custom view for the items in Navigation View using app:actionLayout or using MenuItemCompat.setActionView().
Here's how I managed to display a SwitchCompat
menu_nav.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
android:id="#+id/first"
android:checkableBehavior="single">
<item
android:id="#+id/navi_item_1"
android:icon="#drawable/ic_feed_grey_500_24dp"
android:title="Feed" />
<item
android:id="#+id/navi_item_2"
android:icon="#drawable/ic_explore_grey_500_24dp"
android:title="Explore" />
<item
android:id="#+id/navi_item_4"
android:icon="#drawable/ic_settings_grey_500_24dp"
android:title="Settings" />
</group>
<group
android:id="#+id/second"
android:checkableBehavior="single">
<item xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/navi_item_create_notifications_sound"
android:title="Notifications Sounds"
app:actionLayout="#layout/menu_swich"
app:showAsAction="always" />
</group>
</menu>
menu_switch.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.SwitchCompat xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="right|center_vertical"
app:buttonTint="#color/colorPrimary"
app:switchPadding="#dimen/spacing_small" />
To get the View and assign events to it, you should do :
SwitchCompat item = (SwitchCompat) navigationView.getMenu().getItem(3).getActionView();
item.setOnCheckedChangeListener( new CompoundButton.OnCheckedChangeListener(){
#Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
Logr.v(LOG_TAG, "onCheckedChanged" + isChecked);
}
});
Simple solution as you are using NavigationView
<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:menu="#menu/activity_main_drawer">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
<android.support.v7.widget.SwitchCompat
android:id="#+id/mSwitch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Night Mode" />
</LinearLayout>
</android.support.design.widget.NavigationView>
Try to wrap your Switch into a separate Layout file:
Menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_switch"
android:title="Switch Title"
app:actionLayout="#layout/layout_my_switch"
app:showAsAction="always" />
</menu>
Switch: "layout_my_switch.xml"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.SwitchCompat
android:id="#+id/my_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout>
[Update 03-03-2017]
The answer is outdated. Don't refer this. Refer the accepted answer.
Unfortunately currently NavigationView is not much allow customization ...
You have to take the Customized ListView inside NavigationView.
<android.support.design.widget.NavigationView
android:id="#+id/navView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.NavigationView>
And create cell for this listview by taking TextView to left side and SwitchCompact to right side.
I hope it help you ...
I used Below layout in Drawer Layout where Navigation View code has been used.
<android.support.design.widget.NavigationView
android:id="#+id/navi_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start|top"
android:background="#color/navigation_view_bg_color"
app:theme="#style/NavDrawerTextStyle">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/drawer_header" />
<include layout="#layout/navigation_drawer_menu" />
</LinearLayout>
</android.support.design.widget.NavigationView>
Are you looking for something like this,
Then there is a custom component available in Synfusion, called Navigation drawer.
You can find the respective documentation here.
Man.! they offers Community license also.
I'm using the Designs Support Libraries NavigationView like this:
<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_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<!-- put your main layout here -->
<include layout="#layout/drawer_main_layout"/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view"/>
</android.support.v4.widget.DrawerLayout>
And I have set this menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ic_dashboard"
android:title="Home" />
<item
android:id="#+id/nav_messages"
android:icon="#drawable/ic_event"
android:title="Messages" />
<item
android:id="#+id/nav_friends"
android:icon="#drawable/ic_headset"
android:title="Friends" />
<item
android:id="#+id/nav_discussion"
android:icon="#drawable/ic_forum"
android:title="Discussion" />
</group>
<item android:title="Sub items">
<menu>
<item
android:icon="#drawable/ic_dashboard"
android:title="Sub item 1" />
<item
android:icon="#drawable/ic_forum"
android:title="Sub item 2" />
</menu>
</item>
</menu>
Is there any way to use the NavigationView with a layout rather than a menu?
Here's how I solved it, and worked perfectly:
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/nav_header" />
<ListView
android:id="#+id/lst_menu_items"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.design.widget.NavigationView>
Yes You can ....
As I have done ...
Just take your custom layout inside the NavigationView
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer"
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">
<android.support.design.widget.NavigationView
android:id="#+id/navView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start">
<ListView
android:entries="#array/test"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
The above code work for me...
But don't forget to remove app:menu from NavigationView . Otherwise it will overlap your custom view on the menu items.