Google just posted in their blog a post discussing best practices for implementing the material design. It says:
If the app uses a navigation drawer, it follows the newer material design interactions and styling (Figure 7). The drawer appears in front of the app bar. It also appears semitransparent behind the status bar.
But, if you look at how it is implemented in apps like Google Play Store and Inbox by Gmail, the navigation drawer is located below the Action Bar (Toolbar).
However, apps like Play Newsstand and Pushbullet use their drawer above the toolbar, as recommended.
So, which one should I use?
One side note, if I should place the drawer above the toolbar, why did Google implement the animation in the hamburger icon at all(ActionBarDrawerToggle)?
You should use the version from the Material Specs and display your left drawer over the bar.
The width of the NavigationDrawer on Inbox is also incorrect:
The width of the side nav is equal to the width of the screen minus the height of the action bar, or in this case 56dp from the right edge of the screen.
Mobile: Width = screen width - app bar height
Desktop: Max width for the left nav is 400dp. The right nav can vary depending on content.
The animation also shows when you pull out the right drawer, which should be displayed below the drawer. Further more, your drawer can be (semi-)translucent.
Related
The Material guidelines for the modal navigation drawer states: "Modal navigation drawers block interaction with the rest of an app’s content with a scrim." This seems to preclude placing a banner ad on any page that uses a modal navigation drawer implementation that is fully compliant with the guidelines. I would like to know if there is a way in Android to bend those guidelines and leave a space at the bottom of the screen that is not covered by the scrim when the modal navigation drawer is used?
The solution here appears to cover the space designated for the ad and precludes an ad click. Limiting the scrim by wrapping the DrawerLayout in ConstraintLayout and setting the lower limit of DrawerLayout to a guideline also appears to not be possible. I used the layout shown by the Material guidelines.
Fortnightly’s short top app bar: Material Design
On the scroll, the top app bar collapses to become a short top app bar, allowing more space for content. The short top app bar contains...
The short top app bar contains two elements: the navigation icon to open the navigation drawer, and the Fortnightly logo.
I found this guideline in material design io site, could anyone share your idea, how to make this using material design, not 3rd party plugin.
This is done using a MaterialShapeDrawable with a ShapeAppearanceModel. You can also check the source code for the toolbar.
I'm wondering if I should combine the material design Bottom Navigation and the Navigation Drawer.
As is understand there is always one item active in the Bottom Navigation Bar, but what if I choose to navigate to a page using the Navigation Drawer menu? How do I preserve navigation consistency.? The Bottom Navigation item will still be active even if I navigated to a different activity/fragment.
I was thinking about setting all Bottom Navigation items to inactive in case a user navigates using the Navigation Drawer.
Unfortunately, the lib I'm using (https://github.com/pocheshire/BottomNavigationBar) doesn't support this.
How does the Bottom Nav Bar coexist with the Navigation Drawer? What am I missing here?
Looking at the design guidelines, it's pretty clear that the navigation drawer is at a higher z-level (hence higher hierarchy). Think of bottom navigation as essentially a replacement for tab layouts. You can look at the Google Photos application as an example.
In this type of Navigation Drawer, when you swipe from the left edge of the screen, current screen moves to right side while resizing and the Navigation Drawer become visible by a transparency transition effect while its resizing too. And also the Navigation Drawer shows up from behind of the current activity.
Like this one, my "Music" application:
So, how can I achieve this kind of Navigation Drawer? Is there any library, tutorial or...?
Many thanks!
its not navigation drawer (navigation drawer always comes from the top of screen).
you can use sliding layout.
https://developer.android.com/reference/android/support/v4/widget/SlidingPaneLayout.html
The closet library I found is SlidingMenu.
An example on Google Play:
https://play.google.com/store/apps/details?id=com.slidingmenu.example&hl=en
i am learning actionbar and created an actionbar with tabs .the following image shows the view
!
requestWindowFeature(Window.FEATURE_ACTION_MODE_OVERLAY);
ActionBar ab=getActionBar();
ab.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
ab.setBackgroundDrawable(new ColorDrawable(Color.MAGENTA));
ab.addTab(ab.newTab().setText("Popular").setTabListener(this));
ab.addTab(ab.newTab().setText("Latest").setTabListener(this));
ab.addTab(ab.newTab().setText("Nearby").setTabListener(this));
They following are my queries :
the tabs have shifted to a bar below the magenta color bar. is it due to space constraints of mobile.if a wish to add any item to this magenta bar with the tabs below how can add to it and then show the same pattern whether it is mobile or tablet.
i want to make this tabs bar transparent so that i can see the text move behind it.i have tried to set its drawable as per code above but it has only changed of top bar but not the tabs bar.
what is way to have a button on the magenta bar onclicking i have this screen shift to left and show another screen which has some links show up in a way that partly this current screen is also visible.i hope i am able to explain my point.
kindly clarify
Question 1: It's down to device space constraints. The first paragraph in the Android documentation for tabs in the action bar show that if there isn't room it will split the tabs to a separate bar.
http://developer.android.com/guide/topics/ui/actionbar.html#Tabs
Question 2: You need to set the drawable for the background and the stacked background of the action bar to your transparent drawable. (Edit: Links in Ye Lin Aung's comment show how to do that).
Question 3: It sounds like you are looking for a navigation drawer layout arrangement to me. The best place to start on this would be this link:
http://developer.android.com/training/implementing-navigation/nav-drawer.html
Edit: The pattern will work the same for both mobile and tablets (though you may want to have an xml for smaller screens that have a slightly thinner drawer sizes).
The android documentation in the link above states that the drawer width should be set in dp units and that the drawer height matches the parent view. The drawer width should be no more than 320dp so the user can always see a portion of the main content. This should allow most phones to view it in both portrait and landscape and still see some content.