Display the icon at the right of the text in navigation view - android

sorry for my bad English.
I have a navigation drawer in some activities, I want the icon of each navigation view item to be placed to the right of that item's text and the whole item get right gravity.
Because I only used Persian in my app, I can not use "supportsRtl" in my code, if I use, it will look weird when I set device language to any rtl languages.
I think probably I can fix this with setting custom layout for navigation view, but I'm looking for a simpler way. this is my NavigationView XML code:
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="#menu/menu"
android:layout_gravity="end" />
Edited :
layoutDirection is a good answer but i used drawerLayout.openDrawer(GravityCompat.START);
for opening navigation drawer. now if device language be an rtl language this make app crash.

Make supportsRtl true and set the layout dirction to RTL on navigation View and LTR in other layouts

Just add android:layoutDirection="rtl" to your NavigationView, like this:
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="#menu/menu"
android:layoutDirection="rtl"
android:layout_gravity="end" />

Related

how to make hamburger menu fully visible

by default half of hamburger is shown, as seen at the top left corner of the screenshot. I want to display full hamburger. code is taken from https://developer.android.com/training/implementing-navigation/nav-drawer.html. how can I do this?
Seems you are using very old technique to create Navigation Drawer. Its around 4 years old code and seems perfect regarding old version.
FYI, previously this kind of UI was done using DrawerLayout with ListView. But now android itself officially introduced sliding panel menu by introducing a newer concept called Navigation Drawer in which we combine DrawerLayout and NavigationView to achieve the desired output.
How to make hamburger menu fully visible?
SOLUTION:
Use AppCompatActivity instead of Activity and use AppCompat theme to achieve your desired output.
Use NavigationView instead of ListView.
Here is an example of NavigationView:
<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">
<!-- Your contents -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/my_navigation_items" />
</android.support.v4.widget.DrawerLayout>
Here is a very good tutorial: Android Sliding Menu using Navigation Drawer
Hope this will help~

Bottom Navigation View With Left Righ Space Issue

I am newbie in android, i am use bottom navigation view with two menus
but im getting left right space
Here is my Navigation View,
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/colorRed"
app:itemIconTint="#color/colorWhite"
app:itemTextColor="#color/colorWhite"
app:menu="#menu/bottom_bar_menu"/>
Please check Image
According to Material design guidelines
You can't use two menus with bottom navigation use, instead of bottomNavigation view use tab layout
Check this link for guidlines https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-usage
Still, if you want to use bottom navigation view
Try This inside BottomNavigationView
android:background="#color/colorRed"
Solution
Inside BottomAppBar set attribute
android:padding="0dp"
If there are fewer than three destinations, consider using tabs instead.
In Bottom

Why my NavigationDrawer width is smaller than the other apps?

I've read thousands of articles and other stackoverflow questions but I really can't understand why my Navigation Drawer is smaller than the other apps.
This is currently my Navigation Drawer following Google guidelines:
And I want it to be like this:
(Please note how the Drawer in Google Drive covers a big part of the FAB)
Hardcoding android:maxWidth="320dp" (for both phones and tablets) I can achieve this:
That is ALMOST what I want, but it doesn't follow Google guidelines and it's still a bit smaller than other Navigation Drawers.
In addition to the FAB, you can also notice the difference by looking at the status bar.
Here's my home screen:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- My content -->
</LinearLayout>
<include layout="#layout/drawer"/>
</android.support.v4.widget.DrawerLayout>
And my NavigationView layout:
<android.support.design.widget.NavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_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"
app:itemTextColor="#drawable/color_selector_drawer_text"
app:itemIconTint="#drawable/color_selector_drawer_icon" />
What should I change to make it as other Navigation Drawers?
Ok , i found the answer.
According to Navigation drawer pattern "The maximum width of the nav drawer is 280dp on mobile and 320dp on tablet" so default width of nav drawer in our apps is what it meant to be, but other apps are using 320dp (or something like that) for both tablet and mobile phones so they are ignoring material design.
However if you want to use 320dp for mobile, you can add:
android:layout_width="320dp"
To your NavigationView.
In my own test, it made nav drawer width exactly same as "google play" app, but i prefer to stick with default material design settings.
Interestingly , if you use:
android:layout_width="280dp"
You will achieve exact same width with your current nav drawer width!
P.S. This material design guideline is just a template (a default and prefered value). you must choose best values for your app according to many factors. for example, if your navigation view items has long String so it's better to use 320dp for both mobile and tablet and vice versa. this is my opinion.

Permanent NavigationView loose focus after an item is selected

I started a project with a Navigation Drawer from the basic template of Android Studio. The only modification I made was to display it as permanent in order to have a tablet/TV layout.
To achieve this, the only modification I made was in the xml layout. This allow the NavigationView to be always visible.
<?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="match_parent"
android:orientation="horizontal">
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Content will come here" />
</LinearLayout>
</LinearLayout>
I also put the project on Github, so anyone can test it.
PROJECT DEMO ON GITHUB
https://github.com/ChristopheVersieux/NavFocus
WHAT IS HAPPENING
My issue comes when I start selecting items on the drawer with the D-pad.
Once an item is selected, the focus is completely lost. Trying to get back to the Drawer and get focus seems very hard and I have to try several times with right/left arrows
WHAT IS EXPECTED:
Drawer should keep focus, or focus should be easy to bring back to the Drawer.
WHAT I TRIED:
The simplest Idea I had was to force the Drawer to get focus again, but this code doesn't change anything:
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
menuItem.setChecked(true);
//This is where I will replace the Fragments in the right area.
navigationView.clearFocus();
navigationView.requestFocus();
return true;
}
});
Thank a lot for your help.
I would start by removing android:layout_gravity="start"
This is simply not needed as its parent is a horizontal LinearLayout.
The Navigation Drawer must be permanently visible on Tablets and TV. They stay hidden for mobile. These are part of the Material Design guidelines.
This requires quite a different setup compared to what I see in your project on GitHub. Which includes supplying different resources using qualifiers.
This tutorial on Navigation Drawer (Design Support) will help you with exactly that setup, as per the latest Material Design guidelines. Alternatively the project files for the tutorial can be found on GitHub.
UPDATE:
As pointed out, Support library v24 creates issues with the dpad. Reverting to v23 works just fine.

How to create sliding layout like in Google Drive tablet app or Google+ notifications?

I'd like to create an extra-information view similar to that of the Google Drive app (below) on a tablet. When the info button is clicked, this view slides in from the rightcontaining a layout. Another example would be the Google+ app with its notifications slide-out panel:. The SlidingLayer by 6Wunderkinder almost works, but doesn't fade a semi-black background over the views behind the "drawer" and I haven't found another library that does this.
If anybody has any suggestions/solutions please let me know!
Also, I've already looked at this question and none of the answers suggested there are correct either.
For posterity, here's the answer to this question. As Steve Benett's suggestion led me to discover, the correct way to do this is to use two DrawerLayouts, nested within each other like so:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_navigation_bar"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_sidebar"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/fragment_main_content"
android:name="MainContentFragment"
android:layout_height="match_parent"
android:layout_width="match_parent" />
<fragment
android:id="#+id/fragment_sidebar"
android:name="SidebarFragment"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="end" />
</android.support.v4.widget.DrawerLayout>
<fragment
android:id="#+id/fragment_navigation_bar"
android:name="NavigationFragment"
android:layout_height="match_parent"
android:layout_width="300dp"
android:layout_gravity="start" />
</android.support.v4.widget.DrawerLayout>
The innermost DrawerLayout contains the main content of the Activity, whether it be a fragment or some other layout components. fragment_sidebar is the fragment that will be swiped out from the right. Then, on the top-level DrawerLayout you have the fragment_nagivation_bar which houses the left Drawer's ListView or whatever.
Then, in the Activity Java code you have:
mDrawerLayoutLeft= (DrawerLayout) findViewById(R.id.drawer_navigation_bar);
mDrawerLayoutRight = (DrawerLayout) findViewById(R.id.drawer_sidebar);
mDrawerLayoutLeft.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
mDrawerLayoutRight.setDrawerShadow(R.drawable.sidebar_shadow, GravityCompat.END);
An optional addition (but recommended, for consistency of UX) is to hide the other Drawer when one is opened, so your screen doesn't consist solely of Drawers.
I hope this has helped somebody!
This is the DrawerLayout. Have a look at the design guide, which illustrates the behavior well.
If you want to use / customize the "semi-black background" use DrawerLayout.setDrawerShadow() with a drawable. Google hands out a set of drawables here. Download the ActionBar Icon Pack and look for the drawable_shadow.9.png.
If you want that the menu appears from the right, set android:layout_gravity="end" as a property in the second child of the layout.

Categories

Resources