Fragment height on CollapsingToolbarLayout with TabLayout and ViewPager

Question

I'm facing a problem which i tried really hard, but couldn't find a proper solution using view pager.

I have an activity with CollapsingToolbarLayout, TabLayout and ViewPager that loads 3 fragments, as image below:

My problem is with the height of the fragments, the image itself shows what's happening.

What can i do to vertically center the content of the fragments?

Below is my layout file:

<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/coordinator_layout"
    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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="306dp" android:minHeight="306dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/iv_header_no_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/grey_300"
                android:fitsSystemWindows="true"
                android:scaleType="centerInside"
                android:src="@drawable/ic_photo_camera"
                android:tint="@color/primary_text_color"
                app:layout_collapseMode="parallax" />

            <ImageView
                android:id="@+id/iv_header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <ImageView
                android:id="@+id/iv_header_overlay"
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:background="@drawable/toolbar_gradient"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="pin" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:gravity="top"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:titleMarginTop="15dp" />

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

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        android:background="@color/background"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/primary_text_color"
        app:tabSelectedTextColor="@color/primary_text_color"
        app:tabTextColor="@color/secondary_text_color" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="50dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

PS's: - I'm using the latest support library, today is 25.1.0 - All fragments height are wrap_content

Thanks in advance

Answer 1

Unfortunately there is no good way to center the content because of the layout behavior attribute you added to the view pager.

Essentially the content is already centered because as you scroll down, the toolbar collapses which moves the fragment into a "centered" position.

You could either put the content at the top of the fragment so it appears centered initially or take some form of programmatic approach that calculates the initial centered position based on the height of the screen.

Moreover, view pagers do not support a height of wrap content out of the box for fragments. This may be another source of the issue you're encountering.