Fragment appearing multiple times in tabLayout

Question

I didn't find any relevant posts to this problem. I am trying to implement simple tabs (tab layout) with swipe using this tutorial. However, my fragment is appearing multiple times even when I click for the first time. Please find below the relevant code. Will appreciate any help provided.

FragmentPagerAdapter Implementation:

public class SectionsPageAdapter extends FragmentPagerAdapter {

private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();

public SectionsPageAdapter(FragmentManager manager) {
    super(manager);

}

public void addFragment(Fragment fragment, String title) {
    mFragmentList.add(fragment);
    mFragmentTitleList.add(title);
}

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

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

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

Main Class:

SectionsPageAdapter mSectionsPageAdapter = new 
SectionsPageAdapter(getSupportFragmentManager());

// Set up the ViewPager with the sections adapter and add fragments.
ViewPager mViewPager = (ViewPager) findViewById(R.id.container);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);

mSectionsPageAdapter.addFragment(new TodayFragment(), "TAB1");
mSectionsPageAdapter.addFragment(new WeeklyFragment(), "TAB2");
mSectionsPageAdapter.addFragment(new PhotosFragment(), "TAB3");
mViewPager.setAdapter(mSectionsPageAdapter);
tabLayout.setupWithViewPager(mViewPager);

main.xml

<?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
    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: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:paddingTop="10dp"
            android:theme="@style/AppTheme.AppBarOverlay">

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

            </android.support.v7.widget.Toolbar>

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

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

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

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

Fragments are one liner so I don't think there is any problem there. Please find below 2 screenshots taken 1) onLoading activity 2) after clicking on tab2 for 1st time.

Answer 1

Can you share with us the layout code for your second fragment? Id like to see if the lack of a solid background may be causing the issue.