Android UI Elements in tabbed view not loading

Question

I'm using a FragmentStatePagerAdapter to manage three tabbed Fragments that each have a ListView and a button. When the parent Fragment loads the via the ViewPager and PagerAdapter, the Button is missing but the ListView still shows. Switching to another tab in the Fragment causes the buttons to show up as they were supposed to.

Why isn't the button showing on the first view load?

public class DetailsPagerAdapter extends FragmentStatePagerAdapter {
    private Creature creature;

    public DetailsPagerAdapter(FragmentManager fm, Creature creature) {
        super(fm);
        this.creature = creature;
    }


    @Override
    public Fragment getItem(int position) {
        switch(position) {
            case 0:
                return StatFragment.newInstance(creature);
            case 1:
                return ModFragment.newInstance(creature);
            case 2:
                return ResourceFragment.newInstance(creature);
        }

        return new Fragment();
    }

    @Override
    public int getCount() {
        return 3;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch(position) {
            case 0:
                return "Stats";
            case 1:
                return "Mods";
            case 2:
                return "Resources";
        }

        return "";
    }
}

Details Fragment - Contains the tabs

public class CreatureDetailFragment extends Fragment {

    private Creature creature;
    private DetailsPagerAdapter detailsPagerAdapter;
    private ViewPager viewPager;
    private TabLayout tabs;

    public CreatureDetailFragment() {
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if (getArguments().containsKey(Creature.ID_INTENT_MESSAGE)) {
            this.creature = Creature.get(this.getContext(), getArguments().getLong(Creature.ID_INTENT_MESSAGE, 0l));

            Activity activity = this.getActivity();
            CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) activity.findViewById(R.id.toolbar_layout);

            if (collapsingToolbarLayout != null) {
                collapsingToolbarLayout.setTitle(this.creature.name);
            }

            this.detailsPagerAdapter = new DetailsPagerAdapter(this.getActivity().getSupportFragmentManager(), creature);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        View view = inflater.inflate(R.layout.fragment_creature_details_tabbed, container, false);

        this.viewPager = (ViewPager) view.findViewById(R.id.viewPager);
        this.viewPager.setAdapter(this.detailsPagerAdapter);

        this.tabs = (TabLayout) view.findViewById(R.id.tabLayout);
        this.tabs.setupWithViewPager(this.viewPager);

        return view;
    }
}

Parent layout that contains tabs

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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" tools:context=".DetailActivity">

    <android.support.design.widget.AppBarLayout android:id="@+id/appbar"
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar android:id="@+id/detail_toolbar"
            android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay"
            />

        <android.support.design.widget.TabLayout android:id="@+id/tabLayout"
            android:layout_width="match_parent" android:layout_height="wrap_content"
            android:fillViewport="false" />

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

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

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

Tab Layout

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

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabListView"
        android:layout_alignParentTop="true"
        android:layout_above="@+id/btnAddItem" />

    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnAddItem"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:textColor="#d5d5d5"
        android:background="#000"
        android:textSize="24dp"
        android:alpha=".7"
        android:src="@drawable/ic_action_add" />

</RelativeLayout>

Answer 1

It seems that CoordinatorLayout wasn't the best layout to use for my tab fragment. The ListView was pushing the button out of the viewable space on first load and, for some reason, was only being rendered when redrawing the view.

I switched it to RelativeLayout and added some attributes to the ViewPager:

<android.support.v4.view.ViewPager android:id="@+id/viewPager"
        android:layout_width="match_parent" android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_below="@+id/appbar" />