I can't find solution for implementing very custom NavigationDrawer. I want it to have one image background (black one with white square) with few items like in the picture below:
Can it be made? As far as I read, it's not really what SDK supports. Only what I got to is that making two items in one line is achievable (still searching for solutions, tho).
BNK answer was the best one:
<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:background="#drawable/ic_action_android"/>
Related
I have been looking into DrawerLayout for my project's slideout menu. It seems to behave the way I want, except for one thing.
I've run a few sample projects and they all seem to have one thing in common: the DrawerLayout is always the main part of the application, as in:
setContentView(R.layout.activity_main);
Where activity_main is:
<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>
Also, DrawerLayout seems to have strong ties to navigation, where it's used to jump between fragments.
My problem is, I do not wish to use this slideout menu for navigation, nor do I have any desire to make my app's current main page a Fragment. I want a slideout menu, but I will be using it for settings mostly, not to move around the app.
Is there any way to have a simple slideout menu, which behaves visually and tactically like DrawerLayout, but without the need to have all my views set as fragments of it?
I have recently done this using 1. a custom RelativeLayout class with a ViewTreeObserver referencing a custom X or Y property (for drawer you would use X) 2. objectAnimator XML referencing same custom property 3. Fragment class for the UI itself, using the custom Layout class 4. use setCustomAnimations method of getFragmentManager to show / hide the menu.
Here's an example, just change it to horizontal
Fragment Translation Animation for a Menu
I have a Nav Drawer where the header has a ListView, and the body is a standard menu. I have two implementations of this, each one with its own problem
The drawer should look like this: (white square is the ListView)
The 1st implementation shows both views but doesn't allow scrolling of the ListView in the header. Any scrolling is "intercepted" by the nav Drawer
<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_drawer" //contains my listView
app:menu="#menu/activity_drawer_main" >
</android.support.design.widget.NavigationView>
In the 2nd implementation, I fixed the scrolling issue by includeing the header separately in the navView. It scrolls, but now the menu list is gone. It doesn't show at all.
<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_drawer_main" >
<include
layout="#layout/nav_header_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.NavigationView>
The drawer should look like the image above, but implementation 1 (pictured) won't scroll, and implementation two doesn't have the menu items (share, send).
Any help figuring out how to fix either implementation is appreciated!
Note: I know I could create a LinearLayout of items in place of the menu, but it doesn't look as nice, with the graying out when tapped. I could code that as well, but I feel like the functionality is built in, (I just can't access it), so why build it from scratch?
I found out how to override the navigation view's intercepting the listview's scroll here https://stackoverflow.com/a/14577399/5202215
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.
I use NavigationView to create a Left slide menu. But i want the menu remain in Left position on few px (100-150dp) . I've try to play with margin, padding, searching google sample code, but no results.
There's a solution ?
Thx,
try this...set width of your navigation
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:itemBackground="#drawable/back_color"
app:menu="#menu/nav_drawer_menu"/>
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.