Avoid scrolling in bottom view inside ViewPager inside CoordinatorLayout - android

I have this structure in my main 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:fitsSystemWindows="true"
tools:context="com.pingvalue.example.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="#+id/linear_header"
layout="#layout/product_detail_header" />
<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.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
and this is my layout that I'm using in a fragment inside ViewPager
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="6dp">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableRight="#drawable/ic_insert_emoticon_black_24px"
android:gravity="center_vertical"
android:hint="#string/what_do_you_want_to_say"
android:textSize="16sp" />
<Button
android:layout_width="40dp"
android:layout_height="30dp"
android:layout_marginLeft="6dp"
android:background="#drawable/ic_send_selector"
android:enabled="false" />
</LinearLayout>
</LinearLayout>
I want to achieve the following behaviour. This is a screenshot when AppBarLayout is collapsed:
As you can see the layout with the EditText and Button is visible, but when I scroll up it disappears. I've try with a custom CoordinatorLayout behaviour but it doesn't work because it is not a direct child from my CoordinatorLayout. I've try also changing match_parent to wrap_content but it put empty space below the LinearLayout.


Put the LinearLayout with your EditText in it outside of the CoordinatorLayout and wrap everything in a LinearLayout.
<LinearLayout
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:orientation="vertical"
tools:context="com.pingvalue.example.MainActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=1>
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="#+id/linear_header"
layout="#layout/product_detail_header" />
<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.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="6dp">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableRight="#drawable/ic_insert_emoticon_black_24px"
android:gravity="center_vertical"
android:hint="#string/what_do_you_want_to_say"
android:textSize="16sp" />
<Button
android:layout_width="40dp"
android:layout_height="30dp"
android:layout_marginLeft="6dp"
android:background="#drawable/ic_send_selector"
android:enabled="false" />
</LinearLayout>
</LinearLayout>
This should allow you to have your composer area always visible no matter how far you have scrolled the header.


Try with following layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="6dp"
android:layout_weight="0">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableRight="#drawable/ic_insert_emoticon_black_24px"
android:gravity="center_vertical"
android:hint="#string/what_do_you_want_to_say"
android:textSize="16sp" />
<Button
android:layout_width="40dp"
android:layout_height="30dp"
android:layout_marginLeft="6dp"
android:background="#drawable/ic_send_selector"
android:enabled="false" />
</LinearLayout>
</LinearLayout>


I've tried also adding a NestedScrollView with no result

Related

How to use RecyclerView with CollapsingToolbarLayout. RecyclerView need load more data when bottom reached

My problem is, i want use RecyclerView with CollapsingToolbarLayout. But the issue is CollapsingToolbarLayout not scrolling when RecyclerView scrolling. I cant use Nested Scroll to put RecyclerView, because i want load more data to RecyclerView
<android.support.design.widget.AppBarLayout
android:id="#+id/collapsing_toolbar_appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?themeColorBack">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?themeColorBack"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/image_contain_relative"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="invisible">
<android.support.constraint.ConstraintLayout
android:id="#+id/first_image_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/first_post"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
android:adjustViewBounds="true"
android:contentDescription="#string/latest_post"
android:scaleType="fitXY"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/first_image_container"
android:background="#bb000000"
android:orientation="vertical">
<TextView
android:id="#+id/first_image_category"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:paddingLeft="8dp"
android:paddingStart="8dp"
android:textColor="#color/white"
android:textSize="14sp"
tools:ignore="RtlSymmetry" />
<TextView
android:id="#+id/first_image_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:paddingLeft="8dp"
android:paddingStart="8dp"
android:textColor="#color/white"
android:textSize="14sp"
tools:ignore="RtlSymmetry" />
</LinearLayout>
</RelativeLayout>
<TextView
android:id="#+id/first_post_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:textColor="?themeHeadColorText"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- app:layout_behavior attribute value settings make app tool bar appear while RecyclerView scroll. -->
<android.support.v7.widget.RecyclerView
android:id="#+id/post_recycle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="60dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />

Try like this I hope this will be full fill your requirements.
<?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="250dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#android:color/transparent">
<ImageView
android:id="#+id/ivFeature"
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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/card_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

You can use like this.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/layout_toolbar" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="4dp" />
</LinearLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="18dp"
android:src="#drawable/ic_add" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

pin two elements in Coordinator layout

I am using CoordinatoLayout to try to achieve something like this:
This is my initial view
Scrolled up
I am using Coordinator layout this way but I am a bit confused about it, ¿is it the right way to achieve it? I have tried different ways but I only get one textview pinned on top.
<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/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<LinearLayout
android:id="#+id/toolbar_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_pending_request_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/app_double_padding"
android:paddingRight="#dimen/app_double_padding" />
</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" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="#dimen/app_padding"
android:layout_marginTop="#dimen/app_padding"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="#dimen/app_double_padding"
android:paddingRight="#dimen/app_double_padding">
<com.vipera.onepay.ui.component.custom.CustomTextViewRegular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:text="#string/payment_request_pending_request_text"
android:textAllCaps="true"
android:textSize="#dimen/txt_content_10" />
<com.vipera.onepay.ui.component.custom.CustomButtonLight
style="#style/ButtonSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:background="#drawable/btn_rounded_gradient"
android:paddingEnd="#dimen/payment_request_small_btn_side_small_padding"
android:paddingStart="#dimen/payment_request_small_btn_side_small_padding"
android:text="#string/payment_request_movements_btn"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textSize="#dimen/txt_content_10" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="?attr/colorAccent">
</android.support.design.widget.TabLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="#dimen/app_padding"
android:layout_marginTop="#dimen/app_double_padding"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingLeft="#dimen/app_double_padding"
android:paddingRight="#dimen/app_double_padding">
<com.vipera.onepay.ui.component.custom.CustomTextViewRegular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:text="#string/payment_request_rejected_request_text"
android:textAllCaps="true"
android:textSize="#dimen/txt_content_10" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_rejected_request_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/app_double_padding"
android:paddingRight="#dimen/app_double_padding" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Can somebody explain how to get this? Thanks in advance

CoordinatorLayout Scrolling and Pinning

I have : There is 1. Toolbar, 2. ViewPager, 3. TabLayout, 4. small ViewPager, 5. ViewPager for Fragment which has RecyclerView :)
Desired: When RecyclerView inside 5. ViewPager at below is scrolled, 1.Toolbar, 3.TabLayout, 4.ViewPager must be pinned and ONLY 2.ViewPager should be scrolled and gone like below:
Problem: I can't only pin 2.ViewPager without pinning 1.Toolbar. So it is like, i pin both 1.Toolbar and 2.ViewPager or none of them.
Question: How to only hide 2.ViewPager when scrolling?
Code:
<?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/coordinatorLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_white"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_white"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarFeedNew"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/toolbar_shadow"
android:gravity="center_horizontal"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:id="#+id/toolbarLogoFeedNew"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_gravity="center"
android:gravity="center"
android:src="#drawable/fenerbahce_logo" />
</android.support.v7.widget.Toolbar>
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerTopFeedNew"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#drawable/mavi_bg_gradient"
app:layout_scrollFlags="scroll|enterAlways" />
<LinearLayout
android:id="#+id/layoutTabAndSkor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/haberler_bg"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/genel_haberler_bant"
app:tabGravity="fill"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/color_light_gray"
app:tabTextAppearance="#style/tabLayoutTextAppearance"
app:tabTextColor="#color/color_white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="#null"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerSkorFeedNew"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#null" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/circleIndicatorFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#null"
android:paddingBottom="4dp"
android:paddingTop="4dp"
app:fillColor="#color/color_white"
app:pageColor="#bbbbbb"
app:strokeColor="#bbbbbb" />
</LinearLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<com.pordiva.coreproject.component.NonSwipableViewPager
android:id="#+id/viewPagerPostsFeedNew"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_white"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_white"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarFeedNew"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/toolbar_shadow"
android:gravity="center_horizontal"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:id="#+id/toolbarLogoFeedNew"
android:layout_width="wrap_content"
android:layout_height="32dp"
android:layout_gravity="center"
android:gravity="center"
android:src="#drawable/fenerbahce_logo" />
</android.support.v7.widget.Toolbar>
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerTopFeedNew"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#drawable/mavi_bg_gradient"
app:layout_scrollFlags="scroll|enterAlways" />
</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">
<LinearLayout
android:id="#+id/layoutTabAndSkor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/haberler_bg"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/genel_haberler_bant"
app:tabGravity="fill"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/color_light_gray"
app:tabTextAppearance="#style/tabLayoutTextAppearance"
app:tabTextColor="#color/color_white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="#null"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerSkorFeedNew"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#null" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/circleIndicatorFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#null"
android:paddingBottom="4dp"
android:paddingTop="4dp"
app:fillColor="#color/color_white"
app:pageColor="#bbbbbb"
app:strokeColor="#bbbbbb" />
</LinearLayout>
</LinearLayout>
<com.pordiva.coreproject.component.NonSwipableViewPager
android:id="#+id/viewPagerPostsFeedNew"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_white" />

If i underestood that correctly, you can use CollapsingToolbarLayout with this flag:
app:layout_scrollFlags="scroll|exitUntilCollapsed"
Which says:
Scroll the view and after it Collapsed, exit (or your purpose, hide it
after Collapsed).
Here is a good example of how that is working: https://github.com/TheLittleNaruto/SupportDesignExample
Just put your contents into it for after it collapsed, then it will hide or exit that view.i think this is what you were looking for.
EDIT: use it with your own implementation.
Or something like this actually:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarFeedNew"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerTopFeedNew"
android:layout_width="match_parent"
android:layout_height="150dp" />
<!--Perhaps a ViewPager-->
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayoutFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
app:tabMode="scrollable" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="#null"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/viewPagerSkorFeedNew"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#null" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/circleIndicatorFeedNew"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#null"
android:paddingBottom="4dp"
android:paddingTop="4dp"
app:fillColor="#color/color_white"
app:pageColor="#bbbbbb"
app:strokeColor="#bbbbbb" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
Hope that helps.

How to put RelativeLayout inside CoordinatorLayout

I'm trying to recreate the search box as it is in Airbnb Android app.
So I'm using CoorinatorLayout with Toolbar and RecyclerView.
But when I insert something inside the Coordinator besides those two things, it doesn't show up.
Here is my 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:id="#+id/slidingLayout"
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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="20dp"
android:background="#drawable/rounded_background"
android:orientation="horizontal"
android:padding="6dp"
app:layout_scrollFlags="scroll|enterAlways">
<EditText
android:id="#+id/search"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="6"
android:background="#null"
android:fontFamily="sans-serif-light"
android:hint="Unesite grad"
android:paddingLeft="16dp"
android:paddingStart="16dp" />
<ImageView
android:id="#+id/cancelSearch"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_cancel" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/appbar"
android:background="#ffffff"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
But actually if this even worked, I would have the trouble of putting the search box above the RecyclerView.
I have tried to put everything inside the RelativeLayout but that didn't work.
Here is also the picture of what I'm trying to make
EDIT:
Here is the code with RelativeLayout
<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/slidingLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
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:background="#00000000">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="20dp"
android:background="#drawable/rounded_background"
android:orientation="horizontal"
android:padding="6dp"
app:layout_scrollFlags="scroll|enterAlways">
<EditText
android:id="#+id/search"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="6"
android:background="#null"
android:fontFamily="sans-serif-light"
android:hint="Unesite grad"
android:paddingLeft="16dp"
android:paddingStart="16dp" />
<ImageView
android:id="#+id/cancelSearch"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_cancel" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/appbar"
android:background="#ffffff"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>

I was trying to do something a little similar, but with an ad banner at the bottom of the screen. My solution was to wrap the RelativeLayout outside the CoordinatorLayout as so:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/ad_view">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<com.google.android.gms.ads.AdView
android:id="#+id/ad_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_gravity="center|bottom"
app:adSize="SMART_BANNER"
app:adUnitId="#string/admob_id" />
</RelativeLayout>
The toolbar properly hides when scrolling inside the RecyclerView and everything seems to be working just fine. I would imagine if you followed a similar principle you should be good-to-go.

If you want remove status bar white colour, you must remove the next line
<item name="android:statusBarColor">#android:color/transparent</item>`
in v21/styles.xml
Thanks for example.

<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/slidingLayout"
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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red"
app:layout_scrollFlags="scroll|enterAlways"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="20dp"
android:background="#drawable/rounded_background"
android:orientation="horizontal"
android:padding="6dp"
app:layout_scrollFlags="scroll|enterAlways">
<EditText
android:id="#+id/search"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="6"
android:background="#null"
android:fontFamily="sans-serif-light"
android:hint="Unesite grad"
android:paddingLeft="16dp"
android:paddingStart="16dp"/>
<ImageView
android:id="#+id/cancelSearch"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_cancel" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/appbar"
android:background="#ffffff"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Check if this works for you.

Clickable CardView inside NestedScroll doesn't trigger scrolling

I have a layout with a CoordinatorLayout, and AppBarLayout and a NestedScrollView, inside the NestedScrollView I have multiple CardViews, everything works ok until I set the CardViews to be clickable, then if I start a scroll within a CardView, scroll doesn't work.
This is my layout:
<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_height="256dp"
android:layout_width="match_parent"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app: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:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary">
<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_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_gravity="fill_vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="0dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#color/primary" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="4dp"
android:paddingLeft="7dp"
android:paddingRight="7dp"
android:paddingBottom="7dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lines="1"
android:includeFontPadding="false"
android:text="Title1"
style="#android:style/TextAppearance.Medium" />
<TextView
android:lines="2"
android:text="Description 1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
...
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

The issue comes to daylight when the ScrollView isn't filled with content. I think it's a very weird bug in Android.
The 'solution'..
<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"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_height="256dp"
android:layout_width="match_parent"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app: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:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary">
<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_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_gravity="fill_vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="0dp"
app:cardUseCompatPadding="true"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#cdcdcd"
android:clickable="true"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="4dp"
android:paddingLeft="7dp"
android:paddingRight="7dp"
android:paddingBottom="7dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lines="1"
android:includeFontPadding="false"
android:text="Title1"
style="#android:style/TextAppearance.Medium"/>
<TextView
android:lines="2"
android:text="Description 1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1000dp"
android:orientation="vertical"
android:layout_margin="4dp"
android:background="#c1c1c1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20pt"
android:text="some content..."/>
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

It seems like the same problem as here: Scroll doesn't work in NestedScrollView when try to scroll from views with click events
This is the kind of workaround for your problem
https://stackoverflow.com/a/32887429/2165810
But you shuld also use setPreventCornerOverlap(false) for your CardView to avoid problems with CardView

As people have noted, the problem is when the CardView sits fully within the screen it won't trigger scrolling from the card. Scrolling still works from views within the CollapsingToolbarLayout.
My solution was to add android:layout_marginBottom="100dp" to the CardView so that the bottom edge is offscreen thus allowing scrolling.

Categories

Resources