Coordinator layout content does not scroll when scrolling in the app bar layout.
I am trying to implement a new android design support library. I have a view pager inside the app bar layout and a tab layout below it. Also, when scrolling, I need to stick to the top toolbar and tab title. When I try to scroll the content by scrolling in the app bar layout, it doesn't scroll. But when I scroll through the contents of the tablayout, all the content will scroll. Here is my xml:
<android.support.design.widget.CoordinatorLayout
android:id="@+id/outer_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffb4b4b4"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v4.view.ViewPager
android:id="@+id/top_viewpager"
android:layout_width="match_parent"
android:layout_height="320dp"
android:fitsSystemWindows="true" />
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="80dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="enterAlwaysCollapsed"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="@color/white" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/tab_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
+3
source to share
2 answers
I had a similar layout and it works well. I will post here so you can be inspired.
activity_profile.xml:
<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/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="me.danielpan.twitterlike.ProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_tool_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="@style/Widget.AppCompat.ActionBar.TabText"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="?attr/colorAccent">
<include layout="@layout/profile_header_layout" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:backgroundTint="@color/app_color_primary"
app:collapseIcon="@drawable/header_avatar"
app:layout_collapseMode="pin"
app:navigationIcon="@mipmap/ic_launcher"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:subtitle="Incredible Pics"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="Twitter Profile" />
<!--app:layout_scrollFlags="scroll|exitUntilCollapsed"-->
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
style="@style/TabLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:tabContentStart="2dp"
app:tabGravity="fill"
app:tabIndicatorColor="@color/app_color_accent"
app:tabIndicatorHeight="2dp"
app:tabMinWidth="24dp"
app:tabMode="fixed"
app:tabPadding="1dp"
app:tabSelectedTextColor="@color/text_color_secondary"
app:tabTextColor="@color/text_color" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
app:paddingEnd="0dp"
app:paddingStart="0dp" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:src="@color/text_color"
app:borderWidth="3dp"
app:elevation="2dp"
app:fabSize="mini"
app:layout_anchor="@id/coordinator_layout"
app:layout_anchorGravity="bottom|right|end"
app:pressedTranslationZ="3dp"
app:rippleColor="@color/text_color_secondary" />
</android.support.design.widget.CoordinatorLayout>
profile_header_layout.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="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="@+id/header_cover"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:scaleType="centerCrop"
android:src="@drawable/header_cover" />
<LinearLayout
android:id="@+id/header_detail_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/header_cover"
android:layout_centerHorizontal="true"
android:layout_marginLeft="5dp"
android:gravity="left"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<Button
android:id="@+id/header_btn_follow"
android:layout_width="65dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:background="@drawable/btn_blue_bg_selector"
android:gravity="center"
android:text="Follow"
android:textAllCaps="false"
android:textColor="#646464"
android:textSize="18sp" />
<Button
android:id="@+id/header_btn_favorite"
android:layout_width="65dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:layout_toLeftOf="@id/header_btn_follow"
android:background="@drawable/btn_white_bg_selector"
android:gravity="center"
android:text="Favorite"
android:textAllCaps="false"
android:textColor="#646464"
android:textSize="18sp" />
</RelativeLayout>
<TextView
android:id="@+id/header_nickname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="center"
android:text="Incredible Pics"
android:textAllCaps="false"
android:textColor="#000000"
android:textSize="20sp" />
<TextView
android:id="@+id/header_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="center"
android:text="@string/header_id_text"
android:textAllCaps="false"
android:textColor="#767676"
android:textSize="16sp" />
<TextView
android:id="@+id/header_brief"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="4dp"
android:gravity="left"
android:text="Good still exists in the world. Inspiring you in 140 characters or less."
android:textAllCaps="false"
android:textColor="#565656"
android:textSize="18sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_marginLeft="5dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left|center_vertical"
android:orientation="horizontal">
<TextView
android:id="@+id/header_following"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|top"
android:text="12K"
android:textAllCaps="false"
android:textColor="#000000"
android:textSize="17sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="left|top"
android:text="FOLLOWING"
android:textAllCaps="false"
android:textColor="#898989"
android:textSize="17sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left|center_vertical"
android:orientation="horizontal">
<TextView
android:id="@+id/header_follower"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left|top"
android:text="23.5K"
android:textAllCaps="false"
android:textColor="#000000"
android:textSize="17sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="left|top"
android:text="FOLLOWER"
android:textAllCaps="false"
android:textColor="#898989"
android:textSize="17sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<ImageView
android:id="@+id/header_avatar"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="@drawable/iv_bg_round_corner"
android:scaleType="centerCrop"
android:src="@drawable/header_avatar" />
</RelativeLayout>
+3
source to share
To answer your question, you first need to know how nest scrolling works.
The nest scrolling behavior implemented by AppBarLayout is primarily based on the NestScrolling system. The system only fires scrolling events dispatch when the touch event starts from the NestScrollingChild, which is the RecyclerView inside the ViewPager.
So if you want to trigger nest scrolling from AppbarLayout, there is no easy way to just change the xml to achieve it.
0
source to share