How do I show sibling views at the end of viewPager?

Question

The FrameLayout and TextView are not visible even after placing them in ScrollView. The ViewPager and FrameLayout are replaced with different android.support.v4.app.Fragmentgments. I want FrameLayout and TextView to be displayed at the end of ViewPager(after scrolling if it exceeds screen height).

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <include
        layout="@layout/layout_appbar" />

    <ScrollView
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:layout_width="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="wrap_content">

            <android.support.v4.view.ViewPager
                android:id="@+id/view_pager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <FrameLayout
                android:layout_width="match_parent"
                android:id="@+id/view_container"
                android:layout_height="wrap_content"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_gravity="center_horizontal"
                android:text="@string/app_name"/>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

if you want a persistent view at the bottom of the `ViewPager`, you can add `android:layout_above="@+id/bottomView` xml attribute inside the `ViewPager`, and add `android:layout_alignParentBottom="true"` inside the bottomView. — Sabeeh, Oct 04 '16 at 08:38
Thanks for reply. With above solution, the `viewPager` is scrolling above bottom view. But I want the bottom view to appear at the end of `viewPager` after scrolling. — Sushant Dhamanekar, Oct 04 '16 at 09:40
Finally this link helped me solve my problem - http://stackoverflow.com/questions/32330639/dynamic-height-viewpager/32410274#32410274 — Sushant Dhamanekar, Oct 04 '16 at 11:49

Sabeeh · Answer 1 · 2016-10-04T11:29:35.060

TLDR; Simply add ScrollView and FrameLayout containers inside a layout, inflate this layout inside a Fragment, add child fragments to those FrameLayout containers in the onViewCreated() of this fragment, return this fragment from the getItem() of PagerAdapter.

Inflate following layout in your MainActivity/MainFragment,

R.layout.frag_main:

<RelativeLayout android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

</RelativeLayout>

Setup the ViewPager with some PagerAdapter and return the required fragment from the getItem() method of the adapter like this

    @Override
    public Fragment getItem(int position) {
         return ViewPagerFragment.newInstance(position);
     }

inside ViewPagerFragment

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = null;
        int position = getArguments().getInt(ARG_POSITION);
        switch (position) {
            case 0:
                view = inflater.inflate(R.layout.page_0, container, false);
                break;
            case 1:
                view = ... //page 1 layout
                break;
            case 2:
                view = ... //page 2 layout
                break;
        }

        return view;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        if (view.findViewById(R.id.view_container2) != null) {
            getChildFragmentManager().beginTransaction()
                    .add(R.id.view_container, new FrameLayoutFragment())
                    .commit();
        }

    }

Now for a page at position in the ViewPagerFragment, you can inflate

R.layout.page_0:

<ScrollView
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:layout_width="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="wrap_content">

        <--your ViewPagerFragment content here-->

        <FrameLayout
            android:layout_width="match_parent"
            android:id="@+id/view_container"
            android:layout_height="wrap_content"/>

    </LinearLayout>
</ScrollView>

There you have it

Different fragments for ViewPager and FrameLayout
Since FrameLayoutFragment is added to the bottom of your ViewPagerFragment, it is visible after scrolling down.

This is not the solution what I want. I have added animation to `ViewPager` and I want only it to be animated. Anyway I solved my problem with above posted link. Thanks for your help. — Sushant Dhamanekar, Oct 04 '16 at 11:53

How do I show sibling views at the end of viewPager?

1 Answers1