CODEWITHSUNDEEP
androidxmllayoutandroid-viewpagerscrollable
D. Math
D. Math

Reputation: 329

Scrollable Layout on top of ViewPager

I am creating an app with an AppBar and below this one, a (Relative)Layout.

Like in Facebook Messenger :

enter image description here

You can see the AppBar and below it a Layout with three buttons (TOUS, MESSENGER, SMS).

When I scroll, my Layout including the three buttons does not move, it stays "pinned" at the same position (on top). My objective is to make that the Layout with the thress buttons pass behind the AppBar and does not stay in the view.

Here is my actual 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/main_content"
    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.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways|snap" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            app:tabIndicatorColor="@color/fullWhite"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:background="@color/background_grey_white">

        <!-- These part has to scroll and pass behind the AppBar when the user is scrolling, but it does not work at the moment, it stays "pinned" at the top of the screen -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="13sp"
            android:id="@+id/content_frame">
            <include layout="@layout/tous_messenger_sms"/>
        </RelativeLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/separator_color"/>
    </LinearLayout>

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

What do I have to change to make it work ?

Can someone help me? Thank you!

Upvotes: 0

Views: 623

Answers (1)

Todor Kostov
Todor Kostov

Reputation: 1839

Just move the RelativeLayout into the layout of the first element of the ViewPager. In this way when you swipe, the elements in the RelativeLayout will disappear, because the current tab was changed.

Upvotes: 1

Related Questions