Scroll problems - CoordinatorLayout + AppBarLayout + ViewPager with Fragments containing RecyclerViews - android

I have the following layout:
<CoordinatorLayout layout_height="match_parent">
<AppBarLayout layout_height="match_parent">
<CollapsingToolbarLayout layout_height="match_parent">
<ImageView> //Fullscreen picture
<LinearLayout> //Some text and icons
<Toolbar layout_height="?attr/actionBarSize"> //No title
<TabLayout layout_height="?attr/actionBarSize"> //Drawn on top of the invisible Toolbar
</CollapsingToolbarLayout>
</AppBarLayout>
<ViewPager layout_height="wrap_content"/>
<FloatingActionButton/>
</CoordinatorLayout>
Now, the ViewPager has 3 fragments, each with a RecyclerView inside it. I believe this should be a regular design pattern. The ViewPager sits below the AppBarLayout, which starts full screen, so you have to scroll down to see the ViewPager content.
The problem is when I fling on the AppBarLayout, the fling event prevents any further scroll until it stops flinging (until velocityY = 0). But this takes up to 2 or 3 seconds sometimes, so in the meanwhile, the touchpad remains unresponsive.
What is worse, if I try to scroll on one of the children RecyclerViews, the screen will flicker so badly and the RecyclerView will suddenly appear at the scrolled position once the AppBarLayout fling has ended. This is horrible!
I've already tested this smooth AppBarLayout library and while it fixes some issues, it introduces some other bad ones (the ViewPager is drawn on top of everything, and not below the TabLayout).
UPDATE: FULL XML
<?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"
tools:context=".ActivityActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<!-- ALSO TRIED app:layout_behavior="com.package.utils.FlingBehavior" -->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="4dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="center|top"
app:expandedTitleMarginTop="#dimen/activity_horizontal_margin_extra"
app:expandedTitleMarginBottom="70dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/background_picture"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:tintMode="screen"
app:layout_collapseMode="parallax" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.8">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Probando probando"
android:textColor="#color/white" />
<android.support.v4.widget.Space
android:layout_width="match_parent"
android:layout_height="120dp" />
<ImageView
android:id="#+id/icon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="bottom|center"
android:fitsSystemWindows="true"
android:paddingBottom="#dimen/activity_horizontal_margin" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="100dp"
android:fitsSystemWindows="true" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/activities_options_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:scrollbars="horizontal"
app:tabMode="fixed"
app:tabContentStart="48dp"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/activities_options_container"
android:layout_width="match_parent"
android:focusable="false"
android:layout_marginTop="0dp"
android:visibility="visible"
android:elevation="4dp"
app:behavior_overlapTop="20dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="wrap_content" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#drawable/ico_share" />
</android.support.design.widget.CoordinatorLayout>
AND ONE OF THE FRAGMENTS, THEY ARE ALL THE SAME:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/activity_vertical_margin_large"
android:visibility="invisible"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
</RelativeLayout>
Help!
Thanks

i used this for the same purpose
<?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:gravity="right"
android:orientation="vertical"
tools:context="com.cafeagahi.app.AccountActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#color/white" />
<android.support.v4.view.ViewPager
android:id="#+id/vp_pages"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Related

How to make CollapsingToolbarLayout disappear completely after scrolling?

I'm trying to make a fragment "head" with two toolbars and horizontal scroll view between them. I want to make horizontal scroll view completely disappear after scrolling down but after scrolling there some black space and i don't know why. What attributes should i type to make it?
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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_height="match_parent"
android:layout_width="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/tool"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:foregroundGravity="center"
android:src="#drawable/ic_arrow" />
</androidx.appcompat.widget.Toolbar>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipToPadding="false"
android:fitsSystemWindows="true"
app:layout_constraintTop_toBottomOf="#id/tool"
tools:context=".ui.menu.MenuFragment">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="220dp"
android:fitsSystemWindows="true"
android:theme="#style/Theme.PizzaTime.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
</HorizontalScrollView>
<androidx.appcompat.widget.Toolbar
android:id="#+id/support_action"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.PizzaTime.PopupOverlay">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:foregroundGravity="center"
android:src="#drawable/ic_arrow" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/scroll_content" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
After I deleted the following line from CoordinatorLayout:
android:fitsSystemWindows="true"
It started working correctly, hope it will be helpful for someone.

Touch event is not working for the ParentActivity

I've added appbarLayout and coordinatorLayout to both parent activity and it's child i.e fragment. At first, the touch event was hiding and showing toolbar of parent activity efficiently but when I used appbarlayout for the child fragment as well then the toolbar of a parent is not hiding while scrolling.
Can anyone suggest how to activate touch event for both simultaneously?
ParentActivity 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:background="#fff"
android:focusable="true"
android:focusableInTouchMode="true"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00ffffff"
>
<android.support.v7.widget.Toolbar
android:id="#+id/search_bar_settings_container"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginStart="-15dp"
app:layout_scrollFlags="scroll|enterAlways"
>
<EditText
android:id="#+id/search_bar"
android:layout_marginTop="5dp"
android:layout_width="305sp"
android:layout_height="35dp"
android:hint=" Search Here..."
android:imeOptions="actionSearch"
android:singleLine="true"
android:paddingLeft="9dp"
android:paddingStart="9dp"
android:background="#drawable/society_style"/>
<ImageView
android:id="#+id/search_icon"
android:layout_width="35dp"
android:layout_height="38dp"
android:layout_marginTop="2dp"
android:src="#drawable/search"
/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#001919"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#ffffff" />
</android.support.design.widget.AppBarLayout>
<!-- View pager to swipe views -->
<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"/>
Fragment Class's code:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="layout.Society_Show"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00ffffff"
android:layout_marginStart="-13dp"
>
<android.support.v7.widget.Toolbar
android:id="#+id/society_show_container"
android:layout_width="match_parent"
android:layout_height="55dp"
app:layout_scrollFlags="scroll|enterAlways"
>
<LinearLayout
android:id="#+id/selected_society_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/selected_society"
android:layout_marginTop="2sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<shivam.developer.featuredrecyclerview.FeaturedRecyclerView
android:id="#+id/featured_recycler_view_society"
android:layout_below="#+id/selected_society_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_marginTop="2sp"
app:defaultItemHeight="270dp"
app:featuredItemHeight="400dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<ImageView
android:id="#+id/plus"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="end|bottom"
android:src="#drawable/new_add_one"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="65dp"
/>
You should not define the AppBarLayout in your Fragment, but only in the Activity like this:
<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true"
android:id="#+id/coordinator_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
tools:context=".YourActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:background="?colorPrimary"
android:id="#+id/toolbar"
android:layout_height="?actionBarSize"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/ThemeOverlay.AppCompat.Dark" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:background="#color/colorBackgroundTint"
android:id="#+id/pager_container"
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_schedule">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="match_parent"
android:layout_width="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Because, you only need one AppBar, since Fragments are part of an Activity.
Your ViewPager will include the Fragment whose layout will look like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Your content e.g. RecyclerView -->
</RelativeLayout>
Android will capture your scrolling and hide the Toolbar.
Brilliant you're using appbarLayout in order to avoid the boilerplate code of adding one recycler view to another . It solved my tension of adding two recycler views together.
By the way I think you shouldn't use the appbarLayout for the parent activity try changing your design and add appbarLayout only to your fragment activity.

CoordinatorLayout with two RecyclerViews

I am trying to use two RecyclerView in one CoordinatorLayout with appbar layout.
But the problem is that second recyclerview is overlaping first recyclerview which should be below the first recyclerview. I am googling for this but has no proper solution.
CoordinatorLayout is a super-powered FrameLayout.
My code snippet is given below:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:id="#+id/layout_container"
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="366dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/selfie_collasping_toolbar_background"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary_selfie"
app:expandedTitleMarginBottom="255dp"
app:expandedTitleMarginStart="70dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="Check ins">
<RelativeLayout
android:id="#+id/collapsing_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="70dp"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="#+id/offer_gift"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp"
android:src="#mipmap/image" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
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/RecyclerView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_marginTop="15dp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/RecyclerView1"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_marginTop="15dp" />
</RelativeLayout>
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="#+id/fab"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom|right">
---
</com.getbase.floatingactionbutton.FloatingActionsMenu>
</android.support.design.widget.CoordinatorLayout>
If recycler view is main child of the CoordinatorLayout then I am getting proper recyclerview behavior. But If use two recyclerview as child of CoordinatorLayout then two recycler view is collides. If I use layout_below at recyclerview2 then data is not showing of recyclerview2 i.e. CoordinatorLayout scrollbar scroll till recyclerview1 data only...
<RelativeLayout
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView1"
android:layout_height="wrap_content" />
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView2"
android:layout_height="wrap_content"
android:layout_below="#+id/RecyclerView1" />
</RelativeLayout>
Why are you using a RelativeLayout here?
You should make clear to yourself which is the scrolling view. Right now, you have:
A RelativeLayout : doesn’t scroll.
RecyclerView’s with wrap_content height : they don’t scroll either, because their height is that of their content.
So you end up with two big childs (the recyclers) which have to fit into a single, small parent (the relative layout). It makes no sense. Instead, consider using a scrolling parent like NestedScrollView:
<android.support.v4.widget.NestedScrollView
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior”>
<LinearLayout
android:layout_height=“wrap_content”
android:orientation=“vertical”>
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView1"
android:layout_height="wrap_content" />
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView2"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Replace layout_below of RecyclerView2 in your code
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:id="#+id/layout_container"
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="366dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/selfie_collasping_toolbar_background"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary_selfie"
app:expandedTitleMarginBottom="255dp"
app:expandedTitleMarginStart="70dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="Check ins">
<RelativeLayout
android:id="#+id/collapsing_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="70dp"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="#+id/offer_gift"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="15dp"
android:layout_marginTop="5dp"
android:src="#mipmap/image" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
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/RecyclerView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_marginTop="15dp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/RecyclerView1"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_marginTop="15dp" />
</RelativeLayout>
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="#+id/fab"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom|right">
---
</com.getbase.floatingactionbutton.FloatingActionsMenu>
</android.support.design.widget.CoordinatorLayout>
Replace this code with yours and this issue will be resolved
In second RecyclerView you're using wrong id while aligning:
android:layout_below="#+id/selfieItems"
Change it to:
android:layout_below="#+id/RecyclerView1"
Also, if I understand correctly what you're trying to achieve, you could do it much easier with NestedScrollView which is a part of support library. Just wrap your RelativeLayout into this scrollview.

Hide AppBar when scrolling down

I have an AppBar and a horizontal linearlayout (which includes an edit text and two imagebuttons) and other things in my layout. When user scrolls down, I want AppBar(actually, the Toolbar to hide. This is what I have tried, the appbar isn't hiding it just stays there. I followed the Chris Banes Cheesesquare Sample.
Here is the screenshot of my app:
When user scrolls, I want that AppBar/Toolbar to disappear, and that horizontal layout, which includes the edittext, replace the appbar and stayed there.
Can you tell me what I am doing wrong?
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_scrollFlags="scroll|enterAlways|snap"
/>
</android.support.design.widget.AppBarLayout>
<LinearLayout 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:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_show" tools:context="com.example.bimpc1.sozluk.GosterActivity"
android:background="#color/white"
android:id="#+id/mylin">
<View
android:layout_width="fill_parent"
android:layout_height="30dp">
</View>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/topLayout"
android:layout_alignParentTop="true"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<ImageButton
android:id="#+id/btn_sil"
android:layout_width="45dp"
android:layout_height="45dp"
android:gravity="center"
android:src="#drawable/delete"
android:background="#color/white"
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:paddingTop="0dp"
android:paddingBottom="15dp"
/>
<EditText
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/et_word"
android:ems="12"
android:background="#android:color/transparent"/>
<ImageButton
android:id="#+id/btn_getir"
android:layout_width="45dp"
android:layout_height="45dp"
android:gravity="center"
android:src="#drawable/search"
android:background="#color/white"
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:paddingTop="0dp"
android:paddingBottom="15dp"
/>
</LinearLayout>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_below="#+id/topLayout"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--many views inside scrollview..... -->
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
Actually, that design seems to be wrong.Why? let me explain that to you.
Except those xmlns:android="http://schemas.android.com/apk/res/android" which it wasn't necessary or using: android:layout_alignParentTop="true" in the LinearLayout or using that ScrollView under the contents or etc, seems like you don't have any idea what's going on.(no problem).
Note: the most important thing was, adding:
app:layout_behavior="#string/appbar_scrolling_view_behavior" which also mentioned here:
http://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
And this flag should hide that section:(exitUntilCollapsed)
app:layout_scrollFlags="scroll|exitUntilCollapsed"
exitUntilCollapsed: When the scroll flag is set, scrolling down will
normally cause the entire content to move.
So finally: http://i.stack.imgur.com/qf1So.gif
Hope this is what you were looking for, if it wasn't please edit your question and add some screenshots.
Feel free to change the flags or add a new to achieve what you exactly need.
UPDATE:
If you want to hide that Toolbar(red section) after collapsing, just use this in the CollapsingToolbarLayout:
app:layout_scrollFlags="scroll|snap"
Finally, you will get the same result(something like googleplay design).
Codes:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- Your Scrollable contents should be here - such as,
ViewPager or etc -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scrollbarSize="15sp"
android:text="You Contents" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbarly"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|snap">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<ImageView
android:layout_width="match_parent"
android:layout_height="190dp"
android:minHeight="190dp"
android:scaleType="fitXY"
android:src="#drawable/header"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:id="#+id/mylin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="fill_parent"
android:layout_height="30dp" />
<LinearLayout
android:id="#+id/topLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/btn_sil"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="#drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
<EditText
android:id="#+id/et_word"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:ems="12"
android:gravity="center" />
<ImageButton
android:id="#+id/btn_getir"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="#drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
</LinearLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- And finally, NavigationView -->
<!-- <android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/app_header"
app:insetForeground="#color/app_color_primary_dark"
app:menu="#menu/navigation_menu" /> -->
</android.support.v4.widget.DrawerLayout>
Results: after collapsing, the searchedittext won't hide:
UPDATE: New way :)
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/mylin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<View
android:layout_width="fill_parent"
android:layout_height="30dp" />
<LinearLayout
android:id="#+id/topLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="#+id/btn_sil"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="#drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
<EditText
android:id="#+id/et_word"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:ems="12"
android:gravity="center" />
<ImageButton
android:id="#+id/btn_getir"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="#drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
</LinearLayout>
</LinearLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- Your Scrollable contents should be here - such as,
ViewPager or etc -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scrollbarSize="15sp"
android:text="You Contents" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- And finally, NavigationView -->
<!-- <android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/app_header"
app:insetForeground="#color/app_color_primary_dark"
app:menu="#menu/navigation_menu" /> -->
</android.support.v4.widget.DrawerLayout>
Results:
I hope that this article will help you: https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
Try using CoordinatorLayout and CollapsingToolbar.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
check this out you need to set flag for it in CoordinatorLayout and CollapsingToolbar,
<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.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!-- Your scrolling content -->
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<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>
http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html
You need to structure your layout like this:
<android.support.design.widget.CoordinatorLayout >
<android.support.design.widget.AppBarLayout >
<android.support.design.widget.CollapsingToolbarLayout >
<ImageView />
<android.support.v7.widget.Toolbar />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- Your scrollable content here -->
</android.support.design.widget.CoordinatorLayout>
Complete tutorial at: http://blog.grafixartist.com/toolbar-animation-with-android-design-support-library/
In the Drawer.Layout add in android:fitsSystemWindows="true".
<android.support.v4.widget.DrawerLayout android:id="#+id/drawer_layout"
.../...
// add in
android:fitsSystemWindows="true">
It's better to separate out your concerns. Using the sample provided by chrisbanes/cheesesquare, your layout would be better looking like this:
<android.support.v4.widget.DrawerLayout android:id="#+id/drawer_layout"
.../...
// add in
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout .../...>
<android.support.design.widget.AppBarLayout .../...>
<android.support.v7.widget.Toolbar
// Why are you using two themes?
// android:theme="#style/ThemeOverlay.AppCompat.ActionBar"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
Replace this:
<LinearLayout .../...>
<View .../...>
</View>
<LinearLayout .../...>
<ImageButton
.../...
/>
</LinearLayout>
<ScrollView .../...>
<!--many views inside scrollview..... -->
</ScrollView>
</LinearLayout>
With
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
And then use the ViewPager to populate your list.
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
if (viewPager != null) {
setupViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(new CheeseListFragment(), "Category 1");
adapter.addFragment(new CheeseListFragment(), "Category 2");
adapter.addFragment(new CheeseListFragment(), "Category 3");
viewPager.setAdapter(adapter);
}
Then you can format this CheeseListFragment to add your image views individually.
It's also unnecessary to keep declaring your schema:
xmlns:app="http://schemas.android.com/apk/res-auto"
This is an indicator that you are copying and pasting code and not understanding it.
You should also be using a nestedScrollView without the view, and linear layout above it. Mind you, it's not clear what you are trying to acheive with that.
In order to hide toolbar use the code below.
toolbar.animate().translationY(-toolbar.getBottom()).setInterpolator(new AccelerateInterpolator()).start();
Try this code: Use layout_scrollFlags like below:
app:layout_scrollFlags="scroll|enterAlways"
and your XML file change 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="MainActivity">
<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"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
this is content_main XML file
<android.support.v4.widget.NestedScrollView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

Android NestedScrollView scroll does not work

Title pretty much says it all.
I have an Activity with a FrameLayout and I add a fragment at runtime. Data from the fragment are being displayed ok but I cant scroll.
The Activity's layout is :
<RelativeLayout android:id="#+id/content_layout"
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"
tools:context=".MainActivity">
<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true"
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.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout android:id="#+id/fl_content" android:layout_below="#id/toolbar"
android:layout_width="match_parent" android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent" android:layout_height="match_parent"/>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
and the fragment's layout is :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"
android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView android:id="#+id/iv_cover"
android:layout_width="100dp" android:layout_height="100dp" />
<TextView android:id="#+id/tv_release_artistname"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:id="#+id/tv_release_albumname"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:id="#+id/tv_release_year"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:id="#+id/tv_release_label"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:id="#+id/tv_release_style"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:id="#+id/tv_release_notes"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
You should make the NestedScrollView the parent of the FrameLayout and then add your Fragment on that FrameLayout.
Right now you're overwriting the contents of the FrameLayout, your NestedScrollView when you add your Fragment on top of it.
Also don't forget to add the behaviour on the NestedScrollView after switching.

Categories

Resources