I'm trying to use the newest design library to make my toolbar hide/show on scroll. My issue is the scrolling content I have is in the fragment, I'm just injecting it into the FrameLayout container and it doesn't work. Here's my activity:
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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">
<include layout="#layout/layout_toolbar" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<FrameLayout
android:id="#+id/navigation_drawer_container"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/fragment_nav_drawer_anon" />
and my fragment:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/pull_to_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.SwipeRefreshLayout>
<TextView
android:id="#android:id/empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="18sp"
android:fontFamily="sans-serif"
android:color="#color/dark_grey"
android:padding="60dp"/>
and toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
style="#style/Widget.MyApp.ActionBar" />
I'm following official doc and this demo, and still can't figure out how to make it work.
Replace your FrameLayout with android.support.v4.widget.NestedScrollView
NestedScrollView is just like ScrollView, but it supports acting as both a nested scrolling parent and child on both new and old versions of Android. Nested scrolling is enabled by default.
Link to doc
Using FrameLayout as child of CoordinatorLayout works quite well. The toolbar is collapsing like it's supposed to. I had a problem in the beginning, when I used outdated libraries.
Here are the gradle dependencies I'm using right now:
compile 'com.android.support:appcompat-v7:22.2.1'
compile 'com.android.support:cardview-v7:22.2.0'
compile 'com.android.support:recyclerview-v7:22.2.0'
compile 'com.android.support:design:22.2.0'
I'm using FrameLayout with the attribute app:layout_behavior="#string/appbar_scrolling_view_behavior" as a child of CoordinatorLayout in an activity's layout. The FrameLayout serves as container for fragments. My fragment layouts' root elements are either a RecyclerView or a NestedScrollView.
Here is the layout of the activity:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:id="#+id/..."
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_height="192dp"
android:layout_width="match_parent"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:id="#+id/.."
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/..."
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_sessions"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
My first fragment's layout looks like this:
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="..."
/>
My second fragment's layout looks like this:
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="..."
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="..."
>
...
</android.support.v4.widget.NestedScrollView>
The reason for that behaviour is that the Framelayout doesn't specify a Behaviour. The CoordinatorLayout relies on the child view to handle the Behaviour.
You can read at the bottom here
http://android-developers.blogspot.in/2015/05/android-design-support-library.html
It states that
CoordinatorLayout and custom views
One thing that is important to note is that CoordinatorLayout doesn’t
have any innate understanding of a FloatingActionButton or
AppBarLayout work - it just provides an additional API in the form of
a Coordinator.Behavior, which allows child views to better control
touch events and gestures as well as declare dependencies between each
other and receive callbacks via onDependentViewChanged().
Views can declare a default Behavior by using the
CoordinatorLayout.DefaultBehavior(YourView.Behavior.class)
annotation,or set it in your layout files by with the
app:layout_behavior="com.example.app.YourView$Behavior" attribute.
This framework makes it possible for any view to integrate with
CoordinatorLayout.
Edit: Although FrameLayout is not a custom view, it doesnt specify a behaviour which CoordinateLayout seeks.
In my app it works only with RecyclerView. Maybe you should use RecyclerView instead of ListView.
You can achieve scrolling with Framelayout inside your CoordinatorLayout. For it you have to use app:layout_behavior="#string/appbar_scrolling_view_behavior" inside your frameLayout as well as inside the scrolling view with which you want this collapsing effect.
For ex- If you are inflating RecyclerView inside your frameLayout, then you have to use app:layout_behavior="#string/appbar_scrolling_view_behavior" inside your recyclerrView also.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</Relativelayout>
or,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/bNext"
android:fillViewport="true"
android:scrollbars="none"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- your content -->
</android.support.v4.widget.NestedScrollView>
</Relativelayout>
Thus, using this process you can achieve scrolling with frameLayout whether it contains recycler or nestedScrollview.
It's a good question. I too had the same.
Your container FrameLayout is defined right the problem lies with the Fragment. The Fragment should have RecyclerView & not ListView as it is now deprecated.
Example:
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingTop="#dimen/activity_vertical_margin"/>
I use the same structure in my app & it works perfect.
ListView does not implement NestedScrollingChild so it does not work.
RecyclerView does, so it can propagate the scroll to the NestedScrollingParent (the CoordinatorLayout).
You only need to replace
FrameLayout
to
android.support.v4.widget.NestedScrollView
in this way:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/root_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:layout_width="match_parent"
android:layout_height="192dp"
android:scaleType="centerCrop"
android:src="#drawable/header"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- This was before FrameLayout -->
<android.support.v4.widget.NestedScrollView
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:src="#drawable/ic_drawer_alertas"
app:borderWidth="0dp"
app:fabSize="mini" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/drawer_header"
app:itemIconTint="#color/colorAccent"
app:itemTextColor="#color/colorSecondaryText"
app:menu="#menu/menu_main" />
Move the app:layout_scrollFlags="scroll|enterAlways" from the toolbar to the Framelayout. Sorry for being late.
You must add behavior to the scroll view:
<android.support.v4.widget.SwipeRefreshLayout
android:layout_marginTop="5dp"
android:id="#+id/swipe_main"
android:enabled="false"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<com.marshalchen.ultimaterecyclerview.UltimateRecyclerView
android:id="#+id/rvUserProfile"
app:recyclerviewEmptyView ="#layout/ev_home"
app:recyclerviewClipToPadding="false"
android:layout_width="match_parent"
android:layout_height="match_parent"></com.marshalchen.ultimaterecyclerview.UltimateRecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>
Related
I am trying to implement pull to refresh but I'm having an issue with SwipeRefreshLayout not wrapping the child view's height. In the view preview and in a live build it appears to have 0 height.
The layout as as follows:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:layout_collapseMode="pin">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/child_layout" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
I have also tried making the SwipeRefreshLayout the parent of the AppBarLayout without any success as well as putting a singular LinearLayout inside of the SwipeRefreshLayout. The only thing that seems to prevent the height of the swipe layout from being 0 is to set it statically but I want it to be dynamic based upon the height of the child view.
Is there something I'm missing here? It seems like there may be a bug with SwipeRefreshLayout because replacing it with a LinearLayout that also wraps the content works as expected.
The problem is your SwipeRefreshLayout is inside the Toolbar and AppBarLayout. You must wrap AppBarLayout with another layout and put SwipeRefreshLayout below the AppBarLayout. An example is at the below.
<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"
xmlns:tools="http://schemas.android.com/tools"
android:fitsSystemWindows="true"
tools:context="com.vsahin.moneycim.View.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:fitsSystemWindows="true"
app:expanded="false">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:background="#drawable/gradient_background">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
if your SwipeRefreshLayout height is wrapping the content of your child_layout, then your child_layoutheight should be set to match_parent OR both SwipeRefreshLayout and child_layout height should be set to match_parent as shown in the Android Documentation
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swiperefresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Child View-->
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
SwipeRefreshLayout is a transparent View, so best solution to set it match_parent it will not conflict with other Views and don't include View or Layout within it, keep it clean
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:layout_collapseMode="pin">
<include layout="#layout/child_layout" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
SwipeRefreshLayout has to be in top to overlay other layers and be clickable
I want something similar to below asked question where instead of 'view 1' ,it's going to be a scroll view :
android: Create layout which collapse on scrolling
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:background="#456342"
android:layout_height="match_parent"
android:layout_marginBottom="50dp"
android:clickable="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:theme="#style/AppTheme.AppBarOverlay"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
android:id="#+id/activity_subcard_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin"/>
<include layout="#layout/activity_sub_card_content1"
android:layout_height="200dp"
android:layout_width="match_parent"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/activity_sub_card_content2" />
</android.support.design.widget.CoordinatorLayout>
Given below xml code is my layout 'activity_sub_card_content1' that i have included in my CollapsingToolbarLayout. i want something similar to this:
How to place a layout below toolbar in collapsing toolbar layout?
but it has a relative layout that is not too long. Mine will be long,so i want to put my layout in scroll view.
The code i have tried shows my scrollview,but it does not scroll it,instead it collapses the toolbar.
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/trial"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:clickable="true"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="200dp">
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="200dp">
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="200dp">
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_margin="20dp"
android:layout_width="match_parent"
android:layout_height="200dp">
</android.support.v7.widget.CardView>
</LinearLayout>
</ScrollView>
You could try adding these two lines in your code:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<Your code here with
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
Can you try to add this tag
app:layout_behavior="#string/appbar_scrolling_view_behavior"
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/trial"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
xmlns:android="http://schemas.android.com/apk/res/android">
----- your code
</ScrollView>
AppBarLayout also requires a separate scrolling sibling in order to know when to scroll. The binding is done through the AppBarLayout.ScrollingViewBehavior class, meaning that you should set your scrolling view's behavior to be an instance of AppBarLayout.ScrollingViewBehavior. A string resource containing the full class name is available.
Check this link: https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html
Hello I'm attempting to simply put my content below the toolbar but at the moment when I run my application some of the content is hidden behind it when it should be below it.
I have read up about using a frame layout to attempt to separate it but I have come a little stuck. I'm currently using a basic android studio navigation drawer template provided with the software and was wondering what changes I have to make.
My coordinator layout
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>
My drawer layout
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
What changes do I need to make?
Many ViewGroups allow their children to overlap. These include FrameLayout, RelativeLayout, CoordinatorLayout, and DrawerLayout. One that does not allow its children to overlap is LinearLayout.
The answer to your question really depends on what the end result should be. If you are trying to just have a Toolbar that is always on screen and some content below it, then you don't need a CoordinatorLayout and AppBarLayout at all, you can just use a vertical LinearLayout with two children:
<LinearLayout android:orientation="vertical" ...>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
... />
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
... />
</LinearLayout>
Note layout attributes of the FrameLayout.
If you want to do the fancy stuff where the toolbar scrolls on and off the screen as you scroll the content, then you need an AppBarLayout and you need to give your content area a special attribute like this:
<android.support.design.widget.CoordinatorLayout>
<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"
app:layout_scrollFlags="scroll"
... />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
... />
</android.support.design.widget.CoordinatorLayout>
app:layout_behavior="#string/appbar_scrolling_view_behavior"
Add this code to your frame tag
As #Brian Hoang and #Karakuri said using the layout_behaviour property:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
seems to be a very good solution. Even if you don't have any animations at the moment but you plan to have in the future then you can still keep the CoordinatorLayout and an AppBarLayout in case you want to add animations in the future.
What the property seems to do in general from my understanding, is to calculate the height of the whole AppBarLayout UI component. The UI component that uses the layout_behaviour property with the #string/appbar_scrolling_view_behaviour will automatically be shown exactly below the AppBarLayout regardless of what the height is.
In this way there is no need to hardcode any top margins in the UI that is supposed to be under the AppBarLayout.
In the code below the include_app_bar_with_tabs_layout (AppBarLayout) has a fixed height of 200dp (it can be wrap_content or anything else). Then the RelativeLayout that contains the content of the screen uses the layout_behaviour property.
Have a look at the code and UI image below:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<include
layout="#layout/include_app_bar_with_tabs_layout"
android:layout_width="match_parent"
<!-- this can be anything, even wrap_content -->
android:layout_height="200dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/Green"
<!-- this tells it to be below the include_app_bar_with_tabs_layout (AppBarLayout) -->
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/adView" />
<com.google.android.gms.ads.AdView
android:id="#id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
app:adSize="BANNER"
app:adUnitId="#string/banner_ad_unit_id"
tools:background="#color/green"
tools:layout_height="50dp" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
In my app I am using CollapsingToolbarLayout following NestedScrollView inside SwipeRefreshLayout. What I want from SwipeRefreshLayout is to detect swipe over from CollapsingToolbarLayout, but its detecting over from NestedScrollView and ignoring swipe on CollapsingToolbarLayout. Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.CoordinatorLayout
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/swipe"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="256dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="#dimen/expanded_toolbar_title_margin_start"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/profilePic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/ic_split_big_profile"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<include
android:id="#+id/toolbar_layout"
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/transactions_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="500dp">
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="#dimen/fab_margin_bottom"
android:layout_marginRight="#dimen/fab_margin_right"
android:onClick="addTxn"
android:src="#drawable/ic_action_add_transaction_light"
app:elevation="6dp"
app:fabSize="normal" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
Has anybody used this sort of thing?
As stated in AppBarLayout docs, it has to be direct child of CoordinatorLayout
This view depends heavily on being used as a direct child within a
CoordinatorLayout. If you use AppBarLayout within a different
ViewGroup, most of it's functionality will not work.
Thus, I'm not sure where the SwipeToRefreshLayout has to be included to work together with the CollapsingToolbar, as NestedScrollView has to be direct child too.
Here is another response that helps to attach the SwipeRefreshLayout and activate it only when the appBar is uncollapsed, but they are not using a NestedScrollView, which doesn't work for me :(
EDIT I found a solution for my problem: The ListView I used, had to be set as nested scroll instead of put it inside a NestedScrollView, or replaced with RecycleView:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
listView.setNestedScrollingEnabled(true);
}
So, a solution for your issue should be to wrap the NestedScrollView inside the SwipeRefreshLayout.
I'm trying to make the Toolbar in my app hide and show based on the RecyclerView's scrolling. This gif shows what I'm trying to achieve.
I'm following this tutorial and not getting the results I'm looking for. Here is my activity's layout:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:fitsSystemWindows="true">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="7dp">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF" />
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header"
app:menu="#menu/drawer" />
</android.support.design.widget.CoordinatorLayout>
And here's the Toolbar layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/ColorPrimary"
app:layout_scrollFlags="scroll|enterAlways" />
When I run this code, the Toolbar completely disappears. What's wrong?
If your RecyclerView is inside of a fragment try putting the following code in the root view of the fragment layout: app:layout_behavior="#string/appbar_scrolling_view_behavior". The view that contains that must be a direct child of the CoordinatorLayout
As #orrett3 described just add this line
app:layout_behavior="#string/appbar_scrolling_view_behavior"
to your container FrameLayout like this
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
I assumed the RecyclerView is a child of this container.
You need to do 2 actions:
remove from toolbar xml this line:
app:layout_scrollFlags="scroll|enterAlways"
As other answers, add this line to layout that wrap your fragment's
(in your case it's frame layout)
app:layout_behavior="#string/appbar_scrolling_view_behavior"