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.
Related
I would like to display on the bottom of the view frame layout which has some layouts inside of the FrameLayout hidden and are displayed after some button click. I would like to display the FrameLayout to start from bottom of the screen above all other views.
How can i do it in the right way please?
Many thanks for any advice.
I have implemented something similar to what you would like to achieve...first of all you should place your entire Activity of Fragment layout inside a CoordinatorLayout. Then you should place the FrameLayout which you want to show above all other views as the last View inside the CoordinatorLayout. You could give the FrameLayout a fixed height(200px) and the same negative value as margin bottom(-200px) so it can not be visible in the first place. And after some button click you can animate your desired view (in this case FrameLayout) to overlap all other views starting from the bottom of the screen.
<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical">
//Your views here
<FrameLayout //Your FrameLayout
android:layout_width="match_parent"
android:layout_height="200px" android:layout_marginBottom="-200px">
//Place whatever views you prefer here
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
Since Android Support Library 23.2 you can use Materials Bottom Sheets like the Google Map one:
Include the support design library (use the most recent version):
compile 'com.android.support:design:24.1.1'
You are supposed to use a component which is aware of nested scrolling like NestedScrollView (which extends FrameLayout by the way) and RecyclerView inside a CoordinatorLayout and add this behavior to it:
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
And to make it visible on the bottom just a little:
app:behavior_peekHeight="64dp"
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
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.
in my application I would create a new layout, like the standard Android where you see the clock, battery, etc. That Is, it opens with the slide of the finger on the screen. How do I proceed?
You need to use a ViewPager
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/myfivepanelpager"
android:background="#234567"/>
See: http://developer.android.com/reference/android/support/v4/view/ViewPager.html
You can also do a ViewPager solution as Fragments. This is the way to go.