As the title suggests, my app uses a side menu using navigation drawer. I got inspired by this official google doc and its nav drawer can be toggled either by swipe from left to right or by clicking on modified home icon on top left of ActionBar.
When nav drawer is drawn, the drawer icon in Actionbar is replaced by back button which in change closes the drawer and returns actionbar to its original state.
But this is where I find problems. As in this different official google doc about material design it is clearly stated that drawer should be over actionbar covering it.
I checked e.g. gmail app uses the latter, i.e. drawer over ActionBar.
Should I follow guidelines #1 or #2?
"The wonderful think about standards is that there are so many to choose from." — Admiral Grace Hopper
I'll start by pointing out that the first link you referenced that talks about closing the drawer by clicking the icon is pre-Material Design. So my choice would be to go with the Material Design-specific recommendation.
Now take a look at this:
The Many Faces Of Google's Hamburger Navigation Drawer | Android Police
Material Navigation Drawer isn't even consistent within Google's own apps.
I think some UX people feel that there should still be a single-touch way to close the drawer in addition to the swipe. Looks like even the dev teams within Google can't come to a consensus.
So consider all your options, then do what makes the most sense for your app.
Related
So I'm basically a total beginner in things of app programming.
I started with the "Navigation Drawer Activity" from Android studio and my problem is, I want the nav drawer toggle icon (top left corner) and the "3 dotted icon" (top right corner), but I don't want it in a toolbar.
My question is, should I remove the toolbar and keep the Icons (if so, how could I do that) or should I make the toolbar fullscreen (don't know how to remove the appname)?
Or is there any better way? Like starting from scratch and placing the icons where I want?
Thanks in advance!
What you see as "nav drawer toggle icon" is actually an ActionBarDrawerToggle object and as its name suggests it can only reside in a Toolbar.
The "3 dotted icon" is the toolbar's menu button. You can create a new button with the same icon and use it to popup a menu but it's not that simple.
Remember that the Toolbar is a container and you can customize it the way you want, so my advice is to use it because the other option is a lot harder.
You can set:
in xml
android:elevation="0dp"
or
app:elevation="0dp"
or bycode
getActionBar().setElevation(0);
to remove any elevation of the toolbar.
A few years ago I did something similar to what I think your wanting to do. I made my app so that I had a navigation drawer and settings icon but styled it so that there was no actual visible bar. This gave the app a bit so generic feel and more of a modern look. Also made the drawer and settings menu feel more integrated with the app as a whole. Unfortunately this is a bit of an involved task. For one this in a way, in the sense that they are a "guideline" and that this goes against the idea of making the flow and feel of the app to be what the user is expecting in the traditional sense, goes against the Google Material Guidlines. And two the activity templates are good for learning and generic apps. If your trying to make something that customized is generally going to require you to create everything from scratch. Three, I find I have slight of trouble with the navigation drawer template the Android Studio provides. I'll use it to play around with ideas or to get a feel of how I want my app but if I'm ready to start coding my "production level" app I then start a new project with no activity and make everything myself. Now...
It sounds like what you want is a navigation drawer, which requires a toolbar, but don't want your app name to display. The three simplest solution here would be to go to the strings.xml and in there is a line like so.
<string name:"app_name">YourAppName</string>
Clear that line. (This may cause issues I haven't treated recently and am unable to atm)
There will still be a visible bar across the top though. So if that is not the desired effect, it would be simpler to create a new project with either a black activity or no activity. Google search Android how to create styles and themes and then Google search android navigation drawer with kotlin. Look for a tutorial that shows how to make a navigation drawer from either a blank activity or no activity. Then you will have to create your own style that either doesn't have a color or set the background transparency, of the appbar which is inside/apart of the toolbar, to 100%. I can't remember which because it's been a long time.
I hope this helps.
P.S. Thanks for this question it gives me a great idea for a blog post on my website "How to create a Navigation Drawer with no visible app bar in Kotlin". Once I get it made I'll add a link and can maybe edit my answer with some code detailing the style and theme modifications.
Google describes the navigation drawer very well in their design guidlines. and points out that
As the navigation drawer expands [...] The overflow menu with the standard action items for Settings and Help remains visible
Also Roman Nurik mentioned in a post some time ago that settings/feedback/... actions do not belong in the Navigation Drawer.
However, google started to break this guidline in their material design version of their apps. At least in Hangouts, Gmail, Google Maps ans some more.
So what's the current guidlines?
Should I put Feedback, Settings ans Help in the overflow menu or in the Navigation Drawer?
Navigation drawer guideline and Google+ post are written before Material design.
in majority of new Google apps these items are in navigation drawer. also in new Material design Navigation drawer guideline these items mentioned in navigation drawer.
Google's guideline regarding Settings location:
"When a navigation drawer is accessible from the current screen, place Settings in the drawer. Otherwise, place Settings in an action overflow menu."
http://www.google.com/design/spec/patterns/settings.html#settings-flow-structure
I've implemented a navigation drawer, and it has the standard 3 lines going across.
I've been looking around for methods to change that icon, but I haven't found much luck. I really only want to make the lines more spaced out and longer (like in the playstore).
Any suggestions?
If I understand correctly, you're looking to change the
icon
There is a Navigation Drawer Indicator Generator in the Android Asset Studio.
The icon is available for download in the Android training lesson Creating a Navigation Drawer.
As far as I can tell, you can follow that tutorial and swap in whatever icon you'd like.
http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/
Here is an example of Navigation Drawer which works superb. But I would like to have like in google gmail application that background is also moved to the right and not that navigation drawer gets over the background. How can i make this?
Gmail App Uses the Navigation Drawer. But what you are looking for is SlidingPaneLayout. This should come in Handy - http://www.survivingwithandroid.com/2013/10/android-slidingpanelayout-tutorial.html
I am working on an application, in which I need to implement navigation drawer. We have two different ways of implement navigation drawer in android as shown in attached screen shots :
In first way the sliding list is over main content. In second type, sliding list becomes visible and make main content to slide left to right with Navigation Drawer list.
I goggled a lot about this and only got solution of first type. I want to implement Navigation drawer like second type in attached screenshot. So please tell me what changes I need to make.
Thanks.
For the first case google's official Navigation Drawer is there.
And for the second case there's a third party library on github.
here's the link: https://github.com/jfeinstein10/SlidingMenu
Also I feel you've to use ActionBarSherlock (again a third party library) in order to implement the second case.
Moreover the google's drawer method is the recommended one as it supports a stable action bar, from where you can choose items even when the drawer is open. Also the design + app flow is slick and faster in this case as compared to the third party lib.