AppBarLayout inside ViewPager with scrolling behavior - android

is there a way to put an AppBarLayout inside a ViewPager and get the scrolling behavior working? Background is that I want a header on the first fragment which scrolls out of the screen when the user scrolls down. All other fragments in the ViewPager have no header. My efforts are not successful so far, because the header doesn't scroll. Outside the ViewPager the scrolling workings fine.
I appreciate your help.
Activity layout:
<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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical">
<include layout="#layout/toolbar"/>
<include layout="#layout/toolbar_shadow"/>
</LinearLayout>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_header"
app:menu="#menu/navigation_menu"/>
</android.support.v4.widget.DrawerLayout>
Fragment layout:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/space_between_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:elevation="0dp">
<!-- HEADER -->
<RelativeLayout
android:id="#+id/header_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<include layout="#layout/journal_header" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/button_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_white_24dp"
app:layout_behavior="de.malnvenshorn.slimly.ui.component.ScrollingBehaviorFAB">
<com.github.clans.fab.FloatingActionButton
android:id="#+id/button_add_food"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_restaurant_menu_white_24dp"
fab:fab_size="mini"/>
<com.github.clans.fab.FloatingActionButton
android:id="#+id/button_add_activity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_directions_bike_white_24dp"
fab:fab_size="mini"/>
</com.github.clans.fab.FloatingActionMenu>
</android.support.design.widget.CoordinatorLayout>

From Android Document AppBarLayout
https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html
This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of it's functionality will not work.
Try placing your AppBarlLayout in a CoordinatorLayout .

Related

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.

How to prevent FAB from scrolling with CoordinateLayout in Android

I've the below layout xml for 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:fitsSystemWindows="true"
tools:context=".HomeActivity">
<android.support.design.widget.AppBarLayout
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:theme="#style/AppTheme.Dark.AppBarOverlay"
app:elevation="0dp">
<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.Dark.PopupOverlay">
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:id="#+id/rl_updates"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/ll_footer"
android:layout_below="#+id/ll_fibres_search">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/srl_updates"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_all_requirements"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#color/iron"
android:dividerHeight="1px"/>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/activity_horizontal_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:onClick="onRequirement"
android:overScrollMode="never"
android:src="#drawable/ic_playlist_add_white_24dp"
app:backgroundTint="#color/pink"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
When I scroll the Recycler View, the App Bar collapses just like I wanted it to be. But the problem is the FAB also shifts down a little bit. I set 16dp margin to the bottom but it sticks to the bottom of the screen.
How do I prevent the FAB from shifting down initially?
This is how it looks now
Have you tried taking the FloatingActionButton outside the RelativeLayout and inside the CoordinatorLayout? You can do that and give it the attribute:
android:layout_gravity="bottom|right|end"
instead of:
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
set anchor for your FAB button
app:layout_anchorGravity="bottom|right|end"
android:layout_gravity="right"
Replace RelativeLayout with FrameLayout and add this line to your FAB
android:layout_gravity="right|bottom"
like this
<FrameLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/srl_updates"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_all_requirements"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#color/iron"
android:dividerHeight="1px"/>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_horizontal_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:onClick="onRequirement"
android:layout_gravity="right|bottom"
android:overScrollMode="never"
android:src="#drawable/ic_playlist_add_white_24dp"
app:backgroundTint="#color/pink"/>
</FrameLayout>

Prevent recyclerview from overlapping with toolbar in coordinator layout

Im using the following layout. I want the recyclerview to appear below toolbar.
and I have also included the floating action button.
<?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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container"
android:background="#drawable/bg"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<include layout="#layout/toolbar"/>
</android.support.design.widget.AppBarLayout>
<include
android:layout_below="#+id/appbarLayout"
layout="#layout/fragment_folder_content"
android:layout_height="match_parent"
android:layout_width="match_parent"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/folder_play_all_fab"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_play_arrow_white_48dp"
app:borderWidth="0dp"
app:elevation="6dp"
app:pressedTranslationZ="9dp"
app:rippleColor="#888888"
app:layout_anchor="#+id/appbarLayout"
app:layout_anchorGravity="bottom|center"
/>
</android.support.design.widget.CoordinatorLayout>
The problem is that the recycler view in include tag is overlapping with toolbar.
How can I be able to prevent this from overlapping?

Recycler View with Collapsing toolbar on scroll up toolbar does not collapse

I have an activity with a FrameLayout in which i add or replace several fragments. That activity uses CollapsingToolbarLayout.
In the first scenario I add a fragment with a NestedScrollView, a LinearLayout, a CardView and TextViews. Everything works fine, the scrolling and collapse / expand of toolbar.
In the second scenario, i add a fragment to the FrameLayout with SwipeRefreshLayout and a RecyclerView but the problem is when i scroll up the toolbar does not collapse.
In this video you can see the problem: LINK
The activity layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="340dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
................
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/printerModels"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
style="#style/FabStyle"/>
First scenario fragment layout:
<android:android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:paddingTop="24dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dip"
android:layout_margin="15dp"
android:layout_marginBottom="50dp"
app:cardCornerRadius="3dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="#dimen/model_detail_card_view_margin">
..........
..........
//Several textviews here
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android:android.support.v4.widget.NestedScrollView>
Second scenario layout:
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/contentView"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_users"
android:scrollbars="vertical"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<include
layout="#layout/view_progress"
/>
<include
layout="#layout/view_retry"
/>
<!--</LinearLayout>-->
</android.support.v4.widget.SwipeRefreshLayout>
Disable nested scrolling for RecyclerView in your xml
android:nestedScrollingEnabled="false"
Your coordinate layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="340dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
................
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
//This <include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/printerModels"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
style="#style/FabStyle"/>
content_main.xml
<android:android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</FrameLayout>
</android:android.support.v4.widget.NestedScrollView>

Android Nested Scrollview not scrolling

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!

Categories

Resources