Tablayout Items Dissappears when added with ViewPager

Question

I know this is an already asked Question and whenever i searched for these questions, i got static no of tabs and fragments. i am trying to implement the same logic in a dynamic way. that is, items in my tab are populated from an arraylist.

    public void MethodToPopulateTabs(){
        for (int i = 0;i<tabListings.size();i++){
           TabListing l = tabListings.get(i);
           String a = l.getName();
           int b = l.getImage();

           tabList.addTab(tabList.newTab().setText(a).setIcon(b));
           myTabAdapter = new MyTabAdapter(getSupportFragmentManager(),tabListings);
           tabList.setupWithViewPager(viewpager);
           viewpager.setAdapter(myTabAdapter);
        }
   }

this is my adapter...

public class MyTabAdapter extends FragmentStatePagerAdapter {

     ArrayList<TabListing> tabListings;

     public MyTabAdapter(FragmentManager supportFragmentManager,ArrayList<TabListing> tabListings) {
      super(supportFragmentManager);
      this.tabListings = tabListings;
     }

      @Override
      public Fragment getItem(int position) {
      for (int i = 0;i<tabListings.size();i++){
        OneFragment frag = new OneFragment();
        return frag;
       }
       return null;
      }

    @Override
    public int getCount() {
    return tabListings.size();
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return super.getPageTitle(position);
    }
 }

when i am not setting up the viewpager with tablayout,

i get my result as..Before setting up with viewpager

but when i am setting up the viewpager with tablyout,

i get..After Setting Up the ViewPager

i don't understand, what i may be doing wrong..

Update

Activity's XML

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorBase"
android:fitsSystemWindows="true"
tools:context=".DashBoardActivity">

<include
    android:id="@+id/toolbar"
    layout="@layout/toolbar"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.design.widget.TabLayout
    android:id="@+id/tab_list"
    android:layout_width="0dp"
    app:tabMode="scrollable"
    app:tabGravity="fill"
    app:tabTextColor="@android:color/white"
    app:tabSelectedTextColor="@android:color/white"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/toolbar" />

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@android:color/white"
    app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tab_list" />

<android.support.constraint.ConstraintLayout
    android:id="@+id/constraintLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="@color/colorGrey"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:padding="8dp"
        android:text="Skip Item Selection"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginTop="8dp"
        android:padding="8dp"
        android:text="Order"
        android:textColor="@android:color/white"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Answer 1

change getItem()

@Override
public Fragment getItem(int position) {
    return tabListings.get(position);
}