FAB not properly displaying with CollapsingToolbar in Fragment

FAB not properly displaying with CollapsingToolbar in Fragment - android

I have a main Activity, which includes a TabLayout inside a CollapsingToolbar. One of my Tabs is a Fragment which contains a FAB in the bottom right hand corner. The issue is that when I go to this Tab, the Collapsing Toolbar is fully open and the FAB is hidden. I can only see it when I Collapse the ToolBar. Is there a way to fix this?
I know that I can place the FAB within my CollapsingToolBar layout, which is in my MainActivity, but I want to/need to keep it in the Fragment Layout instead.
Here is my MainActivity 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:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipToPadding="false"
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:elevation="24dp"
android:layout_height="match_parent"
app:titleEnabled="false"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header_image"
android:alpha="0.5"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_gravity="top"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
style="#style/AppTabLayout"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:fillViewport="true"
android:background="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.markfeldman.tasktrack.activities.MainActivity">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
Here is my Fragment Layout:
<FrameLayout
android:id="#+id/tasks_container"
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="com.markfeldman.tasktrack.fragments.Tasks">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:fabSize="normal"
android:elevation="6dp"
app:backgroundTint="#color/colorPrimary"
android:src="#drawable/ic_add_black_24dp"
android:layout_gravity="end|bottom"
app:pressedTranslationZ="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp" />
</FrameLayout>
This is what it looks like when I first navigate to my tab and the ToolBar is NOT collapsed:
And Here I pull the ToolBar Up:
I can add marginBottom padding to have it be visible at first but then it looks odd when I Collapse the Toolbar. Any suggestions?

Move FAB to activity 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:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipToPadding="false"
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:elevation="24dp"
android:layout_height="match_parent"
app:titleEnabled="false"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header_image"
android:alpha="0.5"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_gravity="top"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
style="#style/AppTabLayout"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:fillViewport="true"
android:background="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.markfeldman.tasktrack.activities.MainActivity">
</android.support.v4.view.ViewPager>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:fabSize="normal"
android:elevation="6dp"
app:backgroundTint="#color/colorPrimary"
android:src="#drawable/ic_add_black_24dp"
app:pressedTranslationZ="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
<!--NEXT 2 LINES SHOULD HELP-->
app:layout_anchor="#id/content"
app:layout_anchorGravity="bottom|end"/>
</android.support.design.widget.CoordinatorLayout>

Related

Click on button is not working which present on top of collapsing toolbar

[enter image description here][1]When i add elevation to btn_layout click start working but when i add image in background of btn_layout then toolbar gets hidden below this layout soo elevation is also not helping for me. So how can i handle the click on button without disturbing toolbar in xml. Thank You.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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=".ScrollingActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/Theme.MyApplication.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_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<LinearLayout
android:id="#+id/btn_layout"
android:layout_width="match_parent"
android:layout_height="200dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="showToast"
android:clickable="true"
android:backgroundTint="#android:color/black"
android:onClick="btnClick"></Button>
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.MyApplication.PopupOverlay" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_scrolling" />
<com.google.android.material.floatingactionbutton.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="#android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>```
[1]: https://i.stack.imgur.com/IHCn6.png

The problem is because your Toolbar is above LinearLayout (btn_layout) which has the button, so the button is overlapped by the Toolbar.
Change your order to be the Toolbar first and then your LinearLayout and it should solve your issue like below:
<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_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.MyApplication.PopupOverlay" />
<LinearLayout
android:id="#+id/btn_layout"
android:layout_width="match_parent"
android:layout_height="200dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="showToast"
android:clickable="true"
android:backgroundTint="#android:color/black"
android:onClick="btnClick"></Button>
</LinearLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>

Place FAB Button Over The Map With Coordinator And NestedScroolView

I would put my FAB on the map
I tried this code but does not work.
My xml file is composed of:
Coordinatorlayout tha including AppBarLayout
that including CollapsingToolbarLayout
that including ImageView
After use a NestedScrollView With LinearLayout
that including A map (com.google.android.gms.maps.SupportMapFragment)
to follow a
FloatingActionButton.
The result is that the FAB is under the Map, and to move the NestedScrollView, i a "tapping" on the bottom.
I use API19 and Android Supporto Design Library, with Android Studio 1.5.
Sorry for the English.
<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:layout_width="match_parent"
android:layout_height="250dp"
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"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/image"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Start second parts of layout NestedScrollView
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="0dp">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="?attr/colorPrimary"
class="com.google.android.gms.maps.SupportMapFragment" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_send_black"
android:layout_gravity="bottom|right"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
EDIT1 - UPDATE 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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="250dp"
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"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/image"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="0dp">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="280dp"
android:background="?attr/colorPrimary"
class="com.google.android.gms.maps.SupportMapFragment" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_fab_add"
android:layout_marginBottom="5dp"
android:layout_marginRight="5dp"
android:layout_gravity="bottom|right"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true" />
</android.support.design.widget.CoordinatorLayout>

You should put the FAB outside the NestedScrollView

collapsing bar layout and recyclerview

i am implementing collapsingbarlayout and i want my recyclerview inside it. after reading many post i implemted successfully...but the collapsingbarlaouyt isnt collapsing its still at the same position and the recyclerview is working just fine.Recyclerview items are properly scrolling but collapsingbarlayout isnt working.please help
here is my main_activity.xml
<android.support.v4.widget.DrawerLayout 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/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.inthecheesefactory.lab.designlibrary.activity.MainActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="#dimen/expanded_toolbar_title_margin_start"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/header"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<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"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight = "1"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="#dimen/fab_margin_bottom"
android:layout_marginRight="#dimen/fab_margin_right"
android:src="#drawable/ic_plus"
app:borderWidth="0dp"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
<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/nav_header"
app:itemIconTint="#color/nav_item_icon_tint_color"
app:itemTextColor="#color/nav_item_text_color"
app:menu="#menu/navigation_drawer_items" />
</android.support.v4.widget.DrawerLayout>

I know that this is an old question. But if someone finds it (like me)
Try to use
android.support.v4.widget.NestedScrollView
instead
ScrollView

Scrolling with Collapsing Toolbar and Tabs

I'm trying to make a layout with a CollapsingToolbarLayout which has scroll|exitUntilCollapsed flag, and a TabLayout which has scroll|enterAlways scrollFlag property. Basically I want my toolbar to be pinned and show and hide the tabs while scrolling. I've modified the cheesesquare app from https://github.com/chrisbanes/cheesesquare. Here is my layout 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/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="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CollapsingToolbarLayout>
</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.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_discuss"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
And here is the result;
The tabs are not positioned properly. And they don't care about the enterAlways property.

Hey this may solve your problem.
just add android:layout_gravity="bottom" to tablayout and android:gravity="top" to toolbar.

Remove attribute app:layout_behavior="#string/appbar_scrolling_view_behavior" & app:layout_scrollFlags="scroll|enterAlways" from android.support.design.widget.TabLayout and add attribute android:layout_gravity="bottom".
Also set android.support.v7.widget.Toolbar height as 104(Toolbar+TabLayout height) to show both Toolbar and TabLayout during collapsed state.
Here is an working example:
<?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/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="wrap_content"
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="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/image_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:minHeight="?attr/actionBarSize"
android:gravity="top"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="13dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabGravity="fill"
app:tabMode="scrollable"
style="#style/MyCustomTabLayout"/>
</android.support.design.widget.CollapsingToolbarLayout>
</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" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_map"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:backgroundTint="#f44336"
android:src="#drawable/ic_maps_my_location" />
</android.support.design.widget.CoordinatorLayout>
Hope this will help~

I am a bit unclear on what is to be achieved here.
Do you not want the TAB to move up and down while scrolling? If so, you want to put the TabLayout outside the CollapsingToolbarLayout. Because anything that you put inside the CollapsingToolbarLayout, will move on scrolling.
From the comment you have put, I have modified your xml to imitate that of the YouTube screen. The toolbar is put outside the coordinator layout since it's pinned permanently and is not affected by the scrolling. Something that's worth mentioning is "One note: all views using the scroll flag must be declared before views that do not use the flag. This ensures that all views exit from the top, leaving the fixed elements behind." This is taken from the android blogpost http://android-developers.blogspot.in/2015/05/android-design-support-library.html. This is why I have moved the toolbar out of the AppBarLayout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_below="#id/toolbar"
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.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</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>
</RelativeLayout>
I have put the TabLayout static, but you can make it scrollable. If this is not what you are looking for, kindly explain pictorially what is to be achieved here. I will be glad to help.

I built two samples with parallax and one with RecyclerView on top of AppbarLayout
One with only parallax is
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!--
OUTLINE
<CoordinatorLayout>
<AppbarLayout>
<CollapsingToolbarLayout>
<ImageView/>
<Toolbar/>
<TabLayout/>
</CollapsingToolbarLayout>
</ AppbarLayout >
<NestedScrollView/>
</CoordinatorLayout>
-->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:id="#+id/ivHeader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:layout_gravity="top"
android:layout_marginBottom="?attr/actionBarSize" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/transparent"
app:tabIconTint="#F57C00"
app:tabIndicatorColor="#F57C00"
app:tabIndicatorHeight="4dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#F5F5F5"
app:tabTextColor="#FFE0B2" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager2"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And the one that RecyclerView above AppbarLayout is
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/htab_maincontent"
android:layout_width="match_parent"
android:background="#EEEEEE"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!--
OUTLINE
<CoordinatorLayout>
<AppbarLayout>
<CollapsingToolbarLayout>
<ImageView/>
<Toolbar/>
<TabLayout/>
</CollapsingToolbarLayout>
</ AppbarLayout >
<NestedScrollView/>
</CoordinatorLayout>
-->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="330dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:id="#+id/ivHeader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:layout_gravity="top"
android:layout_marginBottom="?attr/actionBarSize" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/transparent"
app:tabIconTint="#F57C00"
app:tabIndicatorColor="#F57C00"
android:translationY="-30dp"
app:tabIndicatorHeight="4dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#F5F5F5"
app:tabTextColor="#FFE0B2" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/constraintLayout"
app:behavior_overlapTop="30dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager2"
android:layout_width="match_parent"
android:background="#fff"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And setting TabLayout translationY on scroll with
// Check if scrolling up or down
var initTransitionY = tabLayout.translationY
tabLayout.post {
initTransitionY = tabLayout.translationY
}
appbar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
//Check if the view is collapsed
if (abs(verticalOffset) >= appbar.totalScrollRange) {
collapsingToolbar.title = "Collapsed"
} else {
collapsingToolbar.title = ""
}
tabLayout.translationY =
initTransitionY + initTransitionY * (verticalOffset / appBarLayout.totalScrollRange.toFloat())
})
For full samples and other samples you can check out this repo

add android:layout_gravity="bottom" to android.support.design.widget.TabLayout

Android AppBarLayout pushes ViewPager down

I have below xml file which has 1)Toolbar 2)TabLayout 3)Custom View and 4) ViewPager. When i put Toolbar, TabLayout, Custom View inside AppBarLayout, it pushes ViewPager down as like this:
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/feed_coordinator_layout"
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:fitsSystemWindows="true">
<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|enterAlways"
app:statusBarScrim="?attr/colorAccent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_alt"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary_color"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="none"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/feed_sliding_tabs_alt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/accent_color"
app:tabTextColor="#color/accent_color_per_70" />
<LinearLayout
android:id="#+id/activity_feed_fl_canli_skor"
android:layout_width="match_parent"
android:layout_height="52dp"
android:background="#drawable/mac_back"
android:orientation="vertical">
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/activity_feed_alt_view_pager"
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.FloatingActionButton
android:id="#+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_feed_new_post"
android:theme="#style/FabTheme"
android:visibility="invisible"
app:backgroundTint="#color/primary_color"
app:borderWidth="0dp"
app:layout_anchor="#id/feed_coordinator_layout"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
When i scroll down, Toolbar gets hidden which is good. But My ViewPager overflows main screen and bottom of ViewPager is not visible. What can i try?
When i scroll up Toolbar gets invisible and ViewPager is pulled up and fully visible in screen. But Toolbar only responds to scroll of 1st page of ViewPager. trick: For now i put paddingBottom to frament inside ViewPager

This is not an actual solution but for time being I added this line of code in view pager and its working:
android:paddingBottom="?attr/actionBarSize"
so my full layout is:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.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"
android:paddingBottom="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingBottom="4dp"
android:paddingTop="4dp" />
</android.support.v4.view.ViewPager>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#mipmap/ic_search" />

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

FAB not properly displaying with CollapsingToolbar in Fragment - android

Related

Click on button is not working which present on top of collapsing toolbar

Place FAB Button Over The Map With Coordinator And NestedScroolView

collapsing bar layout and recyclerview

Scrolling with Collapsing Toolbar and Tabs

Android AppBarLayout pushes ViewPager down

Categories

Resources