Tab layout content not showing inside a Fragment layout

Question

I have a BottomNavigationView and it has three tabs. And one BottomNavigationView contains TabLayout. My question is why the TabLayout content isn't showing. Only tab headers are showing.

This is one fragment XML.

 <android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/txt_profile_about_me"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:textAlignment="viewStart"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txt_gathring_count" />



    <android.support.design.widget.TabLayout
        android:id="@+id/profile_tabs"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"

        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txt_profile_about_me"
        app:layout_constraintVertical_bias="1.0"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/profile_viewpager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/white"/>

</android.support.constraint.ConstraintLayout>

And my code is following.

    ViewPager viewPager = (ViewPager) view.findViewById(R.id.profile_viewpager);
        ProfileTabAdapter adapter = new ProfileTabAdapter(getChildFragmentManager());

        // Set the adapter onto the view pager
        viewPager.setAdapter(adapter);

        // Give the TabLayout the ViewPager
        TabLayout tabLayout = (TabLayout) view.findViewById(R.id.profile_tabs);
        tabLayout.setupWithViewPager(viewPager);

Tab contents are not showing. Any advice.

Answer 1

Constrain your viewPager properly.

Try this:

    <android.support.v4.view.ViewPager
    android:id="@+id/profile_viewpager"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@android:color/white"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/profile_tabs"
    app:layout_constraintBottom_toBottomOf="parent"/>