Right to left menu items Android in NavigationView - android

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" />

Related

Menu xml and ExpandableListView orientation in navigation 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?

Right to left menu items Android

I have an Slide menu as picture one. And i need to align its items title to be right to left like slide two . I tried gravity=right but didn't work.
Here is my code :
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:gravity="end"
android:layout_gravity="end">
<group android:checkableBehavior="single"
android:layout_gravity="end"
android:gravity="end">
<item
android:id="#+id/nav_1"
android:icon="#drawable/ic_keyboard_arrow_left_24dp"
android:gravity="end"
android:layout_gravity="end"
android:title="آگهی خود را ثبت کنید"/>
</menu>
The desired menu will be :
To create right to left menu you just need to add android:layoutDirection="rtl" to the menu tag
android:layoutDirection="rtl"
<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/ic_keyboard_arrow_left_24dp"
android:gravity="end"
android:layout_gravity="end"
android:title="آگهی خود را ثبت کنید"/>
</group>
</menu>
you can see here the source:
http://developer.android.com/reference/android/util/LayoutDirection.html#LTR
api 17 and above
if you are going to change your Menu direction which is inside a DrawerLayout just add
android:layoutDirection="rtl"
to your NavigationView element. output should be like:
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:fitsSystemWindows="true"
android:layoutDirection="rtl"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
The layoutDirection attribute should be added to the parent activity layout XML:
android:layoutDirection="rtl"
in res>values>styles
add bellow item :
rtl
and then in toolbar or your navigation menu XML tag add:
android:textDirection="rtl"
android:layoutDirection="ltr"

How to add Listview in NavigationView?

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.

How to add custom views in the new NavigationView

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.

NavigationView and custom Layout

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.

Categories

Resources