Recycler view scrolls without collapsing toobar. This is my Main layout.
<CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/collapp_bar"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<View
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="220dp"
app:layout_collapseMode="parallax"
android:background="#android:color/transparent"
/>
<include layout="#layout/custom_toolbar" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:layout_gravity="bottom"
android:id="#+id/nestedScrollView"
android:layout_marginBottom="10dp"
>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:id="#+id/recyclerView"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f4f4f4"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="fill_parent"
android:layout_height="50dp"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabTextColor="#color/gray"
app:tabSelectedTextColor="#color/selected_text_color"
app:tabIndicatorColor="#color/more_comment_color"
android:background="#android:color/background_light"
android:layout_gravity="bottom"
/>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
app:layout_anchor="#id/tab_layout"
app:layout_anchorGravity="bottom|center"
android:layout_marginTop="-20dp"
/>
</CoordinatorLayout>
This is the layout which I am setting in View Pager
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipe"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/recyler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg_listview" /></android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
My Recycler view scrolls,even without collapsing toolbar sometimes.Alsothe scrolling is not smooth.In recyClerView of view pager i have a header item and then the list of items.Sometimes it get stuck at Header at top and need to pull it down.
For every RecyclerView that is has a scrolling parent (such as ScrollView or NestedScrollView) you should disable nested scrolling like this:
yourRecyclerView.setNestedScrollingEnabled(false);
For your smoothing problem it seems that there is a bug with AppBarLayout and there are some libraries for fixing that. One that I know but I've never used is:
https://github.com/henrytao-me/smooth-app-bar-layout
Related
Trying to build layout in which the activity has Coordinator layout and Appbar layout. The appbar layout has tab layout, which is connected to a view pager. In the view pager, the first fragment has another coordinator layout and an appbar layout. When the scroll happens in appbar layout, I want the Activity's appbar layout also to scroll.
Activity's 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"
android:id="#+id/coord"
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"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_layout"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll|snap|enterAlwaysCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/material_flat"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/ToolBarWithNavigationBack"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:id="#+id/tab_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#android:color/white"
android:clipToPadding="true"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="10dp"
app:layout_scrollFlags="scroll|enterAlways|snap">
<android.support.design.widget.TabLayout
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorColor="#BDBDBD"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
The fragment's xml
<?xml version="1.0" encoding="utf-8"?>
<NestedCoordinatorLayout
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="#android:color/background_light">
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:theme="#style/ThemeOverlay.AppCompat.Dark">
<LinearLayout
android:id="#+id/home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e3e6e8"
android:gravity="center"
android:orientation="vertical"
android:padding="20dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|snap">
<android.support.v7.widget.CardView
card_view:cardCornerRadius="4dp"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_margin="24dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/shade_gradient" />
</android.support.v7.widget.CardView>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/simple.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</NestedCoordinatorLayout>
When the appbar scrolls in the fragment, I want the activity's appbar to scroll also.
I have used the NestedCoordinatorLayout as suggested in CoordinatorLayout inside another CoordinatorLayout
Please let me know how to achieve that
Thanks!
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>
I have my coordinator layout some thing like this:
<CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="fill_parent"
android:layout_height="250dp"
android:animateLayoutChanges="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collappbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<View
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="250dp"
android:background="#android:color/transparent"
app:layout_collapseMode="parallax" />
<include layout="#layout/custom_toolbar"
/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:visibility="gone"
app:layout_collapseMode="parallax"
android:orientation="horizontal"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#android:color/background_light"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#color/gray" />
</CoordinatorLayout>
Problem is ,the recycler view which i set inside view pager,some times scrolls inside the collapsable header,even when the header is not collapsed,and also collapsing is not smooth.
I am having a Nested ScrollView which contains contents inside a Linear Layout.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:CoverFlowPager="http://schemas.android.com/apk/res-auto"
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.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:clipToPadding="false"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</FrameLayout>
I have this layout inside a ViewPager and ViewPager is inside a CordinatorLayout.
<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"
android:fitsSystemWindows="true">
Now when I scroll the view the view is not scrolling. But since the layout is placed inside the Cordinator layout its moving up till the ToolBar is hid. But its not scrolling up.
Here is my main activity xml, The view pager is inside a tabbed layout.
<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"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:attrs="http://schemas.android.com/apk/res-auto"
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">
<FrameLayout
android:id="#+id/titleContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center">
<com.CustomFontTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Toolbar Title"
android:textColor="#ffffff"
attrs:customFont="handyman_bold"
android:textSize="8pt"
android:layout_marginLeft="-20dp"
android:id="#+id/toolbar_title"/>
</FrameLayout>
<ImageButton
android:id="#+id/btn_ToolBarRightBtn"
android:layout_width="32dp"
android:layout_height="28dp"
android:tag="0"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/icon_shopping"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="10dp"
/>
</android.support.v7.widget.Toolbar>
</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.TabLayout
android:id="#+id/tabs"
android:layout_gravity="bottom"
android:background="#color/offwhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
Here is my screenshots,
Initial View
When view is scrolled up, it scrolls only to hide the top navigation bar. Its not scrolling to display the items below the tab bar,
app:layout_behavior="..." should be set on a direct child of CoordinatorLayout. If your ViewPager is a direct child of CoordinatorLayout, place it to ViewPager declaration.
Quote from here: Troubleshooting Coordinator Layouts
When coordinating between a fragment with a list of items inside of a ViewPager and a parent activity, you want to put the app:layout_behavior property on the ViewPager as outlined here so the scrolls within the pager are bubbled up and can be managed by the CoordinatorLayout. Note that you should not put that app:layout_behavior property anywhere within the fragment or the list within.
You can try this! I had the same problem with my app. This worked for me.
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:attrs="http://schemas.android.com/apk/res-auto"
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">
<FrameLayout
android:id="#+id/titleContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center">
<com.CustomFontTextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="-20dp"
android:gravity="center"
android:text="Toolbar Title"
android:textColor="#ffffff"
android:textSize="8pt"
attrs:customFont="handyman_bold" />
</FrameLayout>
<ImageButton
android:id="#+id/btn_ToolBarRightBtn"
android:layout_width="32dp"
android:layout_height="28dp"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:layout_marginRight="10dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/icon_shopping"
android:tag="0" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
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="bottom"
android:background="#color/offwhite" />
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:clipToPadding="false"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"></LinearLayout>
</android.support.v4.widget.NestedScrollView>
try this
scroll.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
v.getParent().requestDisallowInterceptTouchEvent(true);
return false;
}
});
The ScrollingViewBehavior is just add top and bottom offset to your ViewPager. Generally the offset depends on AppBarLayout height and it do not depends on your TabLayout height because it is not in the AppBarLayout. So, for quick workaround you can just add paddingBottom to your ViewPager like this:
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="50dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_gravity="bottom"
android:background="#android:color/black"
android:layout_width="match_parent"
android:layout_height="50dp"/>
So here is the problem, you cannot have a NestedScrollView within the FrameLayout.
Also, some other smaller changes needed in xml to make it work.
Like the TabLayout has to be inside AppBar Layout and be pinned.
Here's your code -->
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_gravity="bottom"
android:background="#color/offwhite"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom"
android:layout_height="wrap_content"/>
</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"/>
And --> Change your Fragment code to remove the frame layout!
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:CoverFlowPager="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:clipToPadding="false"
android:fillViewport="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Hope this helps!
I'm trying to do something like this:
I currently have the above layout without the header implemented. All I need is to figure out how to add the header.
Here is the header layout I want to put above the tabs:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_horizontal"
android:background="#color/green">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/ic_image"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:layout_gravity="center_vertical" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hey!"
android:textColor="#color/white"
android:textSize="24sp"
android:layout_gravity="center_vertical" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I use a RecyclerView for the content below the tabs. I use 3 different Fragments for the Activity.
Here is my Activity:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<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_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="0dp"
android:background="#color/blue"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextAppearance="#style/TabLayout"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/white"
/>
</android.support.design.widget.AppBarLayout>
<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.CoordinatorLayout>
And here is one of my Fragments:
<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.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</android.support.design.widget.CoordinatorLayout>
How can I add the header above the TabLayout and keep normal scrolling behaviors?
You just need a RecyclerView to do that.
Combine your header and tabLayout to a Header view, then add to your RecyclerView.
Check https://github.com/u3breeze/android-RecyclerView-WithHeaderAndFooter. I did a extension of RecyclerView.Adapter. Easy to add header and footer to RecyclerView.