Scroll over fixed viewpager

Question

I am trying to scroll over fixed viewpager with nested scrollbar. The issue is I am able to scroll content over fixed viewpager but I am unable to swipe viewpager to change product images. I had tried CollapsingToolbar for this but it didn't worked. So I developed another layout which does what I wanted but the thing is it doesn't worked with viewpager. Here is my current layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="org.kiranahouse.activity.SingleProductActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp"
        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="@color/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:collapseIcon="@drawable/back_colored"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp">
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <android.support.v4.view.ViewPager
            android:id="@+id/product_image_pager"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginTop="60dp">
        </android.support.v4.view.ViewPager>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="24dp"
            android:layout_below="@+id/product_image_pager">
            <android.support.design.widget.TabLayout
                android:layout_width="match_parent"
                android:layout_height="24dp"
                android:id="@+id/pager_tab_layout"
                app:tabBackground="@drawable/tab_selector"
                app:tabIndicatorHeight="0dp"
                app:tabGravity="center">
            </android.support.design.widget.TabLayout>
        </LinearLayout>
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v4.widget.NestedScrollView
            android:id="@+id/nestedScroll"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical"
            android:elevation="12dp"
            android:layout_marginBottom="56dp">
            <LinearLayout
                android:paddingTop="250dp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:background="#fafafa">
                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:elevation="4dp"
                        app:cardCornerRadius="2dp">
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical">
                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:padding="16dp">
                                <org.kiranahouse.component.CustomTextView
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:text="Product Name"
                                    android:textColor="@color/normalButtonGradientEnd"
                                    android:ellipsize="end"
                                    android:textAppearance="?android:attr/textAppearanceMedium"
                                    android:id="@+id/product_title"/>
                                <RelativeLayout
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:layout_below="@+id/product_title"
                                    android:layout_marginTop="8dp">
                                    <org.kiranahouse.component.CustomTextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:ellipsize="end"
                                        android:layout_alignParentLeft="true"
                                        android:text="Rs. 1024"
                                        android:id="@+id/actual_price"
                                        android:textAppearance="?android:attr/textAppearanceLarge"
                                        android:textColor="@color/primaryTextColor"
                                        android:layout_centerVertical="true"/>
                                    <org.kiranahouse.component.CustomTextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_toRightOf="@+id/actual_price"
                                        android:layout_marginLeft="16dp"
                                        android:text="Rs. 2999"
                                        android:id="@+id/old_price"
                                        android:layout_centerVertical="true"/>
                                    <org.kiranahouse.component.CustomTextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="28 % Off"
                                        android:layout_alignParentRight="true"
                                        android:background="@drawable/discount_single_product"
                                        android:paddingTop="4dp"
                                        android:paddingBottom="2dp"
                                        android:paddingLeft="8dp"
                                        android:paddingRight="8dp"
                                        android:id="@+id/discount_percentage"
                                        android:layout_centerVertical="true"/>

                                </RelativeLayout>
                            </RelativeLayout>
                            <View
                                android:layout_width="match_parent"
                                android:layout_height="1dp"
                                android:background="@color/customDividerColor"/>
                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal">
                                <LinearLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:orientation="horizontal"
                                    android:gravity="center"
                                    android:layout_weight="1"
                                    android:paddingTop="8dp"
                                    android:paddingBottom="8dp">
                                    <ImageView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:scaleX="-1"
                                        android:layout_gravity="center_vertical"
                                        android:src="@drawable/ic_reply"
                                        android:tint="@color/dividerColor"
                                        android:layout_marginRight="4dp"/>
                                    <org.kiranahouse.component.CustomTextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="Share"
                                        android:textAppearance="?android:attr/textAppearanceSmall"/>
                                </LinearLayout>
                                <View
                                    android:layout_width="1sp"
                                    android:layout_height="match_parent"
                                    android:background="@color/customDividerColor"/>
                                <LinearLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:orientation="horizontal"
                                    android:gravity="center"
                                    android:layout_weight="1"
                                    android:paddingTop="8dp"
                                    android:paddingBottom="8dp">
                                    <ImageView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:scaleX="-1"
                                        android:layout_gravity="center_vertical"
                                        android:src="@drawable/ic_favorite"
                                        android:tint="@color/dividerColor"
                                        android:layout_marginRight="4dp"/>
                                    <org.kiranahouse.component.CustomTextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="Wishlist"
                                        android:textAppearance="?android:attr/textAppearanceSmall"/>
                                </LinearLayout>
                            </LinearLayout>
                        </LinearLayout>

                    </android.support.v7.widget.CardView>

                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:elevation="4dp"
                        app:cardCornerRadius="2dp">
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:padding="16dp"
                            android:orientation="vertical">
                            <org.kiranahouse.component.CustomTextView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:text="Unit"
                                android:textColor="@color/secondaryTextColor"/>
                            <android.support.v7.widget.RecyclerView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_marginTop="8dp">

                            </android.support.v7.widget.RecyclerView>
                        </LinearLayout>

                    </android.support.v7.widget.CardView>
                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:elevation="4dp"
                        app:cardCornerRadius="2dp">
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical"
                            android:padding="16dp">
                            <android.support.v7.widget.RecyclerView
                                android:layout_width="match_parent"
                                android:layout_height="600dp">

                            </android.support.v7.widget.RecyclerView>
                        </LinearLayout>
                    </android.support.v7.widget.CardView>
                </LinearLayout>

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
        <org.kiranahouse.component.CustomButton
            android:layout_width="match_parent"
            android:layout_height="48dp"
            app:radius="0"
            app:startColor="@color/normalButtonGradientStart"
            app:endColor="@color/normalButtonGradientEnd"
            android:text="Add to Cart"
            android:gravity="center"
            android:elevation="20dp"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_alignParentBottom="true"/>
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

and these are the screenshots I have taken,

Answer 1

Your ViewPager is not working because it's not receiving any touch event as it is behind the RelativeLayout containing NestedScrollView. So better option is to re-design the layout. Like adding both the RelativeLayouts in a FrameLayout and set clipping parameters. Check the code given below. I checked it and it's working as expected.

<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"
tools:context="org.kiranahouse.activity.SingleProductActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.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="@color/colorPrimary"
        app:collapseIcon="@drawable/back_colored"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        app:contentInsetStartWithNavigation="0dp"
        app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:orientation="vertical">

        <android.support.v4.view.ViewPager
            android:id="@+id/product_image_pager"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginTop="60dp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="24dp"
            android:layout_below="@+id/product_image_pager">

            <android.support.design.widget.TabLayout
                android:id="@+id/pager_tab_layout"
                android:layout_width="match_parent"
                android:layout_height="24dp"
                app:tabBackground="@drawable/tab_selector"
                app:tabGravity="center"
                app:tabIndicatorHeight="0dp" />
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="top"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:paddingTop="250dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/nestedScroll"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="56dp"
            android:elevation="12dp"
            android:scrollbars="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#fafafa"
                    android:orientation="vertical">

                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:elevation="4dp"
                        app:cardCornerRadius="2dp">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical">

                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:padding="16dp">

                                <org.kiranahouse.component.CustomTextView
                                    android:id="@+id/product_title"
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:ellipsize="end"
                                    android:text="Product Name"
                                    android:textAppearance="?android:attr/textAppearanceMedium"
                                    android:textColor="@color/normalButtonGradientEnd" />

                                <RelativeLayout
                                    android:layout_width="match_parent"
                                    android:layout_height="wrap_content"
                                    android:layout_below="@+id/product_title"
                                    android:layout_marginTop="8dp">

                                    <org.kiranahouse.component.CustomTextView
                                        android:id="@+id/actual_price"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_alignParentLeft="true"
                                        android:layout_centerVertical="true"
                                        android:ellipsize="end"
                                        android:text="Rs. 1024"
                                        android:textAppearance="?android:attr/textAppearanceLarge"
                                        android:textColor="@color/primaryTextColor" />

                                    <org.kiranahouse.component.CustomTextView
                                        android:id="@+id/old_price"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_centerVertical="true"
                                        android:layout_marginLeft="16dp"
                                        android:layout_toRightOf="@+id/actual_price"
                                        android:text="Rs. 2999" />

                                    <org.kiranahouse.component.CustomTextView
                                        android:id="@+id/discount_percentage"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_alignParentRight="true"
                                        android:layout_centerVertical="true"
                                        android:background="@drawable/discount_single_product"
                                        android:paddingBottom="2dp"
                                        android:paddingLeft="8dp"
                                        android:paddingRight="8dp"
                                        android:paddingTop="4dp"
                                        android:text="28 % Off" />

                                </RelativeLayout>
                            </RelativeLayout>

                            <View
                                android:layout_width="match_parent"
                                android:layout_height="1dp"
                                android:background="@color/customDividerColor" />

                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal">

                                <LinearLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_weight="1"
                                    android:gravity="center"
                                    android:orientation="horizontal"
                                    android:paddingBottom="8dp"
                                    android:paddingTop="8dp">

                                    <ImageView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_gravity="center_vertical"
                                        android:layout_marginRight="4dp"
                                        android:scaleX="-1"
                                        android:src="@drawable/ic_reply"
                                        android:tint="@color/dividerColor" />

                                    <org.kiranahouse.component.CustomTextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="Share"
                                        android:textAppearance="?android:attr/textAppearanceSmall" />
                                </LinearLayout>

                                <View
                                    android:layout_width="1sp"
                                    android:layout_height="match_parent"
                                    android:background="@color/customDividerColor" />

                                <LinearLayout
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_weight="1"
                                    android:gravity="center"
                                    android:orientation="horizontal"
                                    android:paddingBottom="8dp"
                                    android:paddingTop="8dp">

                                    <ImageView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_gravity="center_vertical"
                                        android:layout_marginRight="4dp"
                                        android:scaleX="-1"
                                        android:src="@drawable/ic_favorite"
                                        android:tint="@color/dividerColor" />

                                    <org.kiranahouse.component.CustomTextView
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="Wishlist"
                                        android:textAppearance="?android:attr/textAppearanceSmall" />
                                </LinearLayout>
                            </LinearLayout>
                        </LinearLayout>

                    </android.support.v7.widget.CardView>

                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:elevation="4dp"
                        app:cardCornerRadius="2dp">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:orientation="vertical"
                            android:padding="16dp">

                            <org.kiranahouse.component.CustomTextView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:text="Unit"
                                android:textColor="@color/secondaryTextColor" />

                            <android.support.v7.widget.RecyclerView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_marginTop="8dp">

                            </android.support.v7.widget.RecyclerView>
                        </LinearLayout>

                    </android.support.v7.widget.CardView>

                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="8dp"
                        android:elevation="4dp"
                        app:cardCornerRadius="2dp">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical"
                            android:padding="16dp">

                            <android.support.v7.widget.RecyclerView
                                android:layout_width="match_parent"
                                android:layout_height="600dp">

                            </android.support.v7.widget.RecyclerView>
                        </LinearLayout>
                    </android.support.v7.widget.CardView>
                </LinearLayout>

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>

        <org.kiranahouse.component.CustomButton
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignParentBottom="true"
            android:elevation="20dp"
            android:gravity="center"
            android:text="Add to Cart"
            android:textAppearance="?android:attr/textAppearanceMedium"
            app:endColor="@color/normalButtonGradientEnd"
            app:radius="0"
            app:startColor="@color/normalButtonGradientStart" />
    </RelativeLayout>

</FrameLayout>
</android.support.design.widget.CoordinatorLayout>

Answer 2

Problem:

As stated in the above answer, you have used a nestedscrollview after the view pager with the parent as coordinatorlayout, which will stack the nestedscrollview over the view pager instead of aligning it linearly(as its not a linear layout). Now, giving padding top to the nestedscrollview content and making the view pager under the nestedscrollview visible will not allow you to interact with it as the touch interaction is still with the nestedscrollview's transparent overlay view over the viewpager.

Solution:

The right way to achieve what you want is by using CollapsingToolbarLayout.

1.Create a CollapsingToolbarlayout inside the appBarLayout, wrap the toolbar with the collapsing toolbar layout(i.e Move the toolbar inside the collapsing toolbar layout).

2.Define the fixed height you want for the view pager as the height of appbar layout.

3.Give the content scrim color as the color you want for the toolbar when the collapsing toolbar collapses instead of giving background color for the toolbar.

4.Move the Relative Layout containing the ViewPager and TabLayout inside the CollapsingToolbarLayout, above the toolbar

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="250dp"
    app:elevation="0dp"
    android:theme="@style/AppTheme.AppBarOverlay">
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        app:contentScrim="#FAFAFA"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <android.support.v4.view.ViewPager
                android:id="@+id/product_image_pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
            </android.support.v4.view.ViewPager>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="24dp"
                android:layout_below="@+id/product_image_pager">
                <android.support.design.widget.TabLayout
                    android:layout_width="match_parent"
                    android:layout_height="24dp"
                    android:id="@+id/pager_tab_layout"
                    app:tabIndicatorHeight="0dp"
                    app:tabGravity="center">
                </android.support.design.widget.TabLayout>
            </LinearLayout>
        </RelativeLayout>
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:theme="@style/MyActionBarTheme"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_collapseMode="pin">
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Alternatively you could go with the root as LinearLayout instead of coordinatorlayout.

Though these are the only two right ways to achieve something similar to what you ask for, but if you ask for the view pager to be fixed behind instead of collapsing, then you won't be able to interact with it. In your case fixing a view pager and scrolling content over it doesn't make any sense because anyways you are gonna scroll an entire layout obscuring/hiding the view pager.So using the above solution will emulate the same thing that you would want to achieve using a fixed view pager and an over scroll content.