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.
Related
I'm developing a demo app where, I have to show an animation when I scroll-up and scroll-down, also the option layout should appear and hide.
When I scroll down, the layout start hiding at some point depending on scrolled height.
I don't know what should I use for this animation.
please let me know this.
Here is the link
What you are seeking is quite easily possible. You just need to have a base layout as CoordinatorLayout with AppBarLayout and then bind the scrolling behavior with underlying RecyclerView or NestedScrollView
<android.support.design.widget.AppBarLayout
...>
<android.support.v7.widget.Toolbar
.../>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|snap"/>
</android.support.design.widget.AppBarLayout>
Possible follow a post here
An extended guide about all such behaviors here
These will help you better understand and customise your requirements. There was a similar view we had to develop 2 years back, there were some custom view scroll handling that we had to capture to make it work.
But these resources should be a good start for you. Good Luck!
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>
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
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.
The latest Android Support Library introduced the DrawerLayout to implement the common UX pattern where you slide right or left to show a navigation menu.
What I'd love to have is a vertical DrawerLayout with the same API, that can be pulled down/up from the top/bottom of my layout.
Since 4.2 the old SlidingDrawer has been deprecated and I haven't heard about some new Widget that implements the same functionality.
Can the DrawerLayout be extended somehow to implement the vertical swipe UX pattern?
Does google provide some different widget to implement it?
Google Music for instance has something very similar to what I'm looking to implement to pull up the player.
We have recently implemented this in the Umano App and open sourced: https://github.com/umano/AndroidSlidingUpPanel
Enjoy.
The Android support library now has the bottom sheets behavior to do that.
Check out this link for more info https://material.google.com/components/bottom-sheets.html
Nowadays, it makes more sense to use the BottomSheetBehavior that you can find more information on how setting it up on https://code.tutsplus.com/articles/how-to-use-bottom-sheets-with-the-design-support-library--cms-26031
Basically, you need to set your main content, and your sliding content. The BottomSheetBehavior would only work for panels that you slide from the bottom to the top.
It has a quite simple set up and the BottomSheetBehavior could even work out of the box. Only by writing a android.support.design.widget.CoordinatorLayout layout, with another View inside (with even wrap_content as a value in the layout_height parameter), for instance a LinearLayout like this one:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:behavior_hideable="true"
app:behavior_peekHeight="56dp"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<!-- Your content goes here -->
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
In my case, I inflate this layout in a Fragment and add it to the Activity where you want to enable the SlidingSheetBehavior.