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>
Related
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.
In my app I want to recreate something that is very similar to the Lollipop+ quick settings panel that everyone knows.
That is: by clicking or dragging the header, I want a panel to slide down from below the header and push down the existing content.
Applied to my app now, the header is a Toolbar and the main content is a RecyclerView showing a list of blog posts. By clicking or dragging the Toolbar, I'd like a panel to appear to show some stats about the blog. Like so:
I have been messing around with the awesome (but complex) Android Design Support Library. It has great functionality for scrolling and designing the interaction between the app bar and the main content. But the effect is hard to achieve.
I have studied the CollapsingToolbarLayout but couldn't use it in a way that the content is expanded below the main Toolbar. I have also studied the SlidingUpPanel library but couldn't make it push the content down, simply hover. Overall, I'm a bit lost as to how CoordinatorLayout, CollapsingToolbarLayout and scrolling Behaviors should interact together...
Does anyone know to recreate this "quick settings" effect? Alternatively, maybe someone knows where I should look to find the code for the Quick Settings in AOSP?
Thanks a lot!
Recently I created a library called Toolbar Panel that worked like quick settings drawer. You can customize the Panel by yourself. If you have any question or issue you can create issue in the github or comment in this answer.
This is the demo video :
I have finally taken the time to solve my own problem, after good insights from Niko Yuwono and Hetal Upadhyay.
The key was to rely on the CoordinatorLayout and to describe two custom Behaviors: one for the sliding panel, another one for the main content. I have actually created a library for this purpose as this may help other people in the future: SubAppBarPanel. See it in action.
Sample code:
<android.support.design.widget.CoordinatorLayout
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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:clickable="true"
android:foreground="?selectableItemBackground" />
</android.support.design.widget.AppBarLayout>
<com.davidferrand.subappbarpanel.SubAppBarPanel
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:panel_expanded="false"
app:panel_offset="10dp"
app:panel_slidingQuantity="85%">
<!-- Content of the sliding panel -->
</com.davidferrand.subappbarpanel.SubAppBarPanel>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.davidferrand.subappbarpanel.SubAppBarPanel$ScrollingViewBehavior">
<!-- Main content -->
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
Note: dragging behavior is still a TODO.
In http://www.google.com/design/spec/patterns/scrolling-techniques.html described scrolling techniques.
But I have not found details of how to implement it.
I'm trying to implement "Flexible space with image" anyone have an example of this?
I think this lib perfectly suits your need :
https://github.com/ksoichiro/Android-ObservableScrollView
It includes all the scrolling techniques described in the Google design specs and more.
Moreover, it brings support for ListViews, GridViews, ScrollViews, RecyclerViews and WebViews.
I think this blog post has what you're looking for. It offers a guide to make a layout similar to that (although you might have to add some code to color the app bar).
The grand idea behind this sort of "layout trick" is to implement a ScrollView with some sort of onScrollChanged listener. The aim is to make your Activity aware of scroll changes and then could transform the required elements.
Once you could get a sense of the scroll position (and changes) you could use that value as a base to apply color transformation (for the ActionBar's background) and to rescale the header text.
Hope this helps.
Late but not least,
You need to you use Android Support Design Library v22 or Above. Specifically CoordinatorLayout with AppBar Layout and Toolbar.
<android.support.design.widget.CoordinatorLayout
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">
<! -- Your Scrollable View -->
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
...
app:layout_scrollFlags="scroll|enterAlways">
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
as mentioned in android Developer Blogpost
also described in Video by Ian Lake
Whenever I have Views inside a ViewGroup inside a android.support.v4.widget.DrawerLayout, Eclipse's autocomplete starts working weird. It doesn't display most of the properties
Example with DrawerLayout -> LinearLayout -> ImageView:
In the previous screenshot, you can see that I typed "android:scale..." and the IDE's intellisense isn't showing me the ImageView's android:scaleType
If I use Eclipse's Properties window for the ImageView, I can see that it is only displaying the basic properties for "View" (and not for ImageView...):
Now if the ImageView is not a descendant of the DrawerLayout and I put it somewhere else, the autocomplete works properly:
I've seen related questions such as:
Autocomplete does not work in XML files in particular hierarchy
Content Assist doesn't work in xml with support library
but they have been dead with no answers for quite a while...
Content assist doesn't work for Views (be it TextViews, EditText, Buttons...) that I add inside the DrawerLayout. It only suggests the 'basic' properties.
Does anybody know why this happens or how to fix this?
Sample layout:
<?xml version="1.0" encoding="utf-8"?>
<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" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/some_image" />
</LinearLayout>
<RelativeLayout
android:id="#+id/drawer_view"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start" >
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Just to give some closure to this 5 months-old question, I'll quote and link to Atul O Holic's answer. Thanks to Dileep Perla for pointing me there.
When using support package Widgets this is a common scenario (a weird
one too).
Here you using, android.support.v4.widget.DrawerLayout and hence the
issue. Happened with me a lot of time.
You can also try couple of options mentioned here.
I've found that using the tag can be handy in this case. Just put your layout that is inside the drawer in a separate layout file and then include it inside the drawer layout.
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.