When adding scrolling behaviour to a layout with coordinatorLayout like this:
<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">
<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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/mainContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
the mainContent is the part that matters.
The real layout will be inflated inside this container.
Imagining my View consists of a RecyclerView, and a fixed layout at the bottom of the screen.
Does someone know a way to remove the scrolling behavior of the bottom fixed layout and keep the RecyclerView-Toolbar-hide behaviour?
Inside a 'CoordinatorLayout' the views that scroll must be first and only later the non-scrollable views. I managed to solve the issue by placing my non-scrollable layout outside the 'mainContent', just below it
Related
Hello I have CoordinatorLayout with AppBar, Toolbar and RecyclerView.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:fitsSystemWindows="true"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="8dp"
android:fitsSystemWindows="true"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_photos"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
I want to leave Toolbar on top and don't want to move it, but let LinearLayout scroll below it (under the Toolbar).
Also I found that RecyclerView's not working with Coordinator layout. It doesn't trigger AppBar scroll events. If I will wrap it inside NestedSCrollView it will work but RecyclerView's not recycling view holders then so it's doesn't work for me.
Could anyone help to achieve this?
try like this
...
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_photos"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.v4.widget.NestedScrollView>
Put your toolbar and linear layout in a CollapsingToolbarLayout. Then use appropriate collapse mode attributes. For example, you could use pin for your toolbar and parallax for your linear layout:
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout
...
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
...
app:layout_collapseMode="pin"/>
<LinearLayout
...
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
You need the dependency for design support library in your app's build.gradle:
implementation "com.android.support:design:$support_library_version"
More on coordinator and collapsing toolbar layouts
I couldn't implement it in the described way. RecyclerView doesn't send scroll events to AppaBar layout (what is really strange) so I need to split every view on that screen and make recycler view adapter handle them all in one recycler view. Thanks all for answers and time spent on this!
I have a layout coded like 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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.HomepageActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/header_copy">
<!--android:background="#072120"-->
<!--android:background="#drawable/header_copy-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextColor="#FFFADE09"
app:titleMarginStart="100dp"
app:titleTextAppearance="#style/TabLayoutTextStyle"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay"
>
<!--android:background="#FF008080"-->
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabGravity="fill"
app:tabTextColor="#FFFADE09"
app:tabSelectedTextColor="#F7FFFFFF"
app:tabTextAppearance="#style/TabLayoutTextStyle" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
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>
But this result the below UX
The viewPager is taking space below the bottom bar. But I do not want this behaviour. I want the viewPager take only that visible screen space. Please help me here.
Since your tab bar will always be at the top, and the rest of the views will be under the toolbar, you can replace CoordinatorLayout for a LinearLayout with orientation="vertical" fixes the overflowing issue.
here you are using android.support.design.widget.CoordinatorLayout, the topmost behavior of CoordinatorLayout is appbar_scrolling_view_behavior so is getting extra space in bottom equivalent to the android.support.design.widget.AppBarLayout size.
in this case, you should use LinearLayout or RelativeLayout instead of android.support.design.widget.CoordinatorLayout
I have a AppBarLayout with a NestedScrollView. I am trying to make it display correctly and have a fling effect when it is displayed.
Originally I had this layout:
<FrameLayout>
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout>
...collapsing content
<android.support.v7.widget.Toolbar/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView>
...scrolling content
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
(with the NestedScrollView outside the AppBarLayout) It worked well but I could not fling the content when scrolling.
I used the advice in the accepted answer here, using the layout pattern in the answer referenced by the accepted one and moved the content inside the AppBarLayout. It now flings nicely, but the content contained in the NestedScrollView is cut off at the height of the screen. As you begin to scroll up you immediately see the end of the views despite the content being much longer.
My current Layout is this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
... textviews etc
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
I have tried substituting wrap_content with match_height but this doesn't seem to be the problem.
I load all the content into TextViews via a webservice call and call .RequestLayout(); on each TextView after I load the content.
edit
I have moved the NestedScrollView outside the AppBarLayou again. It flings when the AppBarLayout is collapsed, but not while it is open
In TabLayout I have 2 tabs, where in first placed FrameLayout with recyclerView and in second tab there ScrollView with LinerLayout in it. And I need to hide ToolBar when i scroll in any tab. When i scroll RecyclerView in first tab toolbar scrolls as well, but when i scroll in second tab it is not. Can't uderstand why.
I've got this main_acrivity.xml
<FrameLayout 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/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
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/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabIndicatorColor="#android:color/background_light"
app:tabSelectedTextColor="#android:color/background_light"
app:tabTextColor="#android:color/background_light"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
The new scrolling behavior will not work with a regular android.widget.ScrollView, as it doesn't support nested scrolling.
Scroll behaviors rely on Views that support nested scrolling, which is needed to propagate scroll events up the View tree so that the Toolbar knows when to slide up and hide.
The reason it works with the RecyclerView is that it supports nested scrolling by default.
What you need is a 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.
So, in your layout that has the ScrollView, replace it with android.support.v4.widget.NestedScrollView, and the scrolling view behavior will work as expected:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- your content here...... -->
</android.support.v4.widget.NestedScrollView>
I have a layout (as generated by android studio) where i added a RelativeLayout to the AppBarLayout. The code is below and it looks like this:
Where i am stuck: What i want to achieve is when scrolling the Recyclerview down i want that the green relative layout (which has the id 'controlContainer') scrolls out with it, and when i scroll up it should scroll in (not just on the top but at any place i scroll up in the list)
The Toolbar on top should stay where it is.
<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"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
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"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
<RelativeLayout
android:id="#+id/controlContainer"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#android:color/holo_green_dark"
app:layout_scrollFlags="scroll|enterAlways"></RelativeLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/venue_list" />
</FrameLayout>
I thought that using app:layout_scrollFlags="scroll|enterAlways" in the view that should scroll away combined with app:layout_behavior="#string/appbar_scrolling_view_behavior"should achieve that, but it does not do anything. alternatively, when i add those fields to the toolbar itself both layouts scroll away - which is not what i want, i want the toolbar to stay always fixed.
would be nice if anyone could point me in the right direction here? (i hoped it would be possible with using coordinator layout and not hacking some layout manipulation with onscroll listeners?)
Try this in your toolbar code:
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
I found this link helpful: Scrolling Toolbar