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.
Related
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~
I'm trying to minimize or collapse the NavigationView / NavigationDrawer when my app is running on tablets.
The result I want is the one used by GMail app, see screenshot below (you can see the desired layout collapsed on the left).
Does exists any method or a pattern to follow to achieve this?
After reading carefully this official NavigationDrawer guidelines, I found that my question used wrong keywords : it is called mini navigation drawer (that's why I edited my question first).
So I was able to find an answer:
Use third party library, which is proposed in this answer (yes, my question is a duplicate!);
Develop your own solution, by following this sample; be aware that you have to add some fancy animation and other decoration in order to respect Material design guidelines.
Any way, the trick is to simply add a margin left to the detail view (FrameLayout in this case), like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Master fragment-->
<fragment
android:name=".MainFragment"
android:layout_width="220dp"
android:layout_height="match_parent"
android:id="#+id/fragment_master">
</fragment>
<!--Detail layout -->
<FrameLayout
android:layout_width="1000dp"
android:layout_height="match_parent"
android:layout_marginLeft="56dp">
</FrameLayout>
</android.support.v4.widget.SlidingPaneLayout>
I have a strange behavior of navigation drawer when I use ActionBarCompat + GoogleMaps on Android 2.x The problem is not completely hide GoogleMap fragment when navigation drawer is opened.
The normal state of application you can see on the next screen. Navigation drawer is closed and GoogleMaps is shown.
When I open the drawer you can see on screen below that only zoom buttons, google label and locate me buttons are hided.
I have an opposite behavior of screen as soon I take a screenshot. When screenshot has taken, android refresh all views and I see valid view.
You can download the project here.
By the way, application is working well on Android 4.x. The issue occurred only on Android 2.x
The issue is probably related to the fact, on Android 4.0 and below SurfaceView is used, when on Android 4.1+ there is a TextureView.
In my demo project I fixed it by overlaying transparent View over the SupportMapFragment like this:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="#+id/list"
android:background="#android:color/black"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="left" />
</android.support.v4.widget.DrawerLayout>
You may see how it works here.
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.
I'm adding a Navigation Drawer to this app that I am developing and I have scoured the internet; forums, stackoverflow, android developer documentation, and still have not found a great answer for this.
I know that it is possible to do this without using either of these things. What I am wondering is how. The NsMenuAdapter model uses a title, and then there are these functions
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
Which are clearly looking for an action bar. I tried a couple of models that didn't work, the big one I just got done trying is located here How to Add icons adjacent to titles for Android Navigation Drawer (which is related to the link I have below, the project is from gitHub here https://github.com/gabrielemariotti/androiddev/tree/master/NavigationDrawer). Now the key thing is, I am using a custom layout (i.e. Relative Layouts mixed in with Linear Layouts) and I'm really lost on what my next step should be in order to get this to work.
Sidenote: When I only have the ListView in my main_activity.xml (the implementation for the Navigation Drawer) it does properly slide out like it is suppose to. But I cannot for the life of me figure out how to populate it with data. I basically need 3 headers with that will have clickable navigation elements in them, with icons next to the elements.
I turned to this model for most of my insight on how to do this via Relative Layouts http://gmariotti.blogspot.com/2013/05/creating-navigation-drawer.html But they use action/title bars which is what is really throwing me for a loop.
It's quite simple actually. Easier than with ActionBar. I'm writing the answer with almost simplest of layouts
make your xml something like this:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- This is how your main page will look, just 2 buttons -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:onClick="onLeft"
android:text="left" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:onClick="onRight"
android:text="right" />
</RelativeLayout>
<!-- Left Drawer -->
<RelativeLayout
android:id="#+id/whatYouWantInLeftDrawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start" >
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_dark" />
<!-- you can have many more widgets here like buttons or labels -->
</RelativeLayout>
<!-- Right Drawer -->
<RelativeLayout
android:id="#+id/whatYouWantInRightDrawer"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="right" >
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_green_light" />
<!-- you can have many more widgets here like buttons or labels -->
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Then make your activity something like this:
public class MainActivity extends Activity {
RelativeLayout leftRL;
RelativeLayout rightRL;
DrawerLayout drawerLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// I'm removing the ActionBar.
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
leftRL = (RelativeLayout)findViewById(R.id.whatYouWantInLeftDrawer);
rightRL = (RelativeLayout)findViewById(R.id.whatYouWantInRightDrawer);
drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
}
public void onLeft(View view) {
drawerLayout.openDrawer(leftRL);
}
public void onRight(View view) {
drawerLayout.openDrawer(rightRL);
}
}
That's it. Hope it helps.
I know that it is possible to do this without using either of these things. What I am wondering is how.
Step #1: Follow the instructions for using DrawerLayout, such as the steps in this training guide, skipping anything related to the action bar.
Step #2: There is no step #2.
While DrawerLayout can work with the action bar, it is not required, and actually requires additional setup.
I was trying to add navigation drawer to an already existing activity (Which was without action bar) solution for me was to remove the line:
android:fitsSystemWindows="true"
from <android.support.v4.widget.DrawerLayout in my Activity's xml file.