TabHost: first loaded tab stays in background after switching tabs

Question

EDIT: Same stuff happening when I used TabLayout+ViewPager.

---

One of my Fragments has a TabHost with 4 tabs. The following only happens with dark theme active (AppCompatDelegate.MODE_NIGHT_YES).

When the fragment is shown for the first time and I change the tab, a ghost effect happens and the first tab stays in the background:

It does not matter which tab is default and which one is clicked after - any combination causes this:

When I exit the fragment and come back, then it is fine.

This is the Component Tree:

I setup the TabHost like this:

    TabHost host = view.findViewById(R.id.tabHost);
    host.setup();

    TabHost.TabSpec spec = host.newTabSpec("one");
    spec.setContent(R.id.tab1);
    spec.setIndicator("", getResources().getDrawable(R.drawable.outline_info_white_24));
    host.addTab(spec);

    //Tab 2
    spec = host.newTabSpec("two");
    spec.setContent(R.id.tab2);
    spec.setIndicator("", getResources().getDrawable(R.drawable.outline_account_balance_white_24));
    host.addTab(spec);

    //Tab 3
    spec = host.newTabSpec("three");
    spec.setContent(R.id.tab3);
    spec.setIndicator("", getResources().getDrawable(R.drawable.outline_notifications_none_white_24));
    host.addTab(spec);

    //Tab 4
    spec = host.newTabSpec("four");
    spec.setContent(R.id.tab4);
    spec.setIndicator("", getResources().getDrawable(R.drawable.outline_public_white_24));
    host.addTab(spec);

What is causing this and how to solve it? It seems like the first loaded tab stays in the background.

Answer 1

Yes... I face this problem too.

you have to try to add layout you need to inflate(replace) layout not add. if you add then when you swipe layout add to another layout to current layout. just replace layout.

 FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
        ft.replace(R.id.main, onlinesong_home); //this line
        ft.commit();

Happy coding!!!

Answer 2

I found the problem - I needed to replace .add() with .replace() when opening up the fragment.

See this answer.

Answer 3

i don't know it is your listview problem or not. But This is my code. I used add(), it works for me.

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;

    @Override
    protected void attachBaseContext(Context newBase) {
        super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
    }

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

        CalligraphyConfig.initDefault(new CalligraphyConfig.Builder()
                .setDefaultFontPath("fonts/Raleway-Regular.ttf")
                .setFontAttrId(R.attr.fontPath)
                .build());

        setContentView(R.layout.activity_sales);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

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

    private void setupViewPager(ViewPager viewPager) {
        MainActivity.ViewPagerAdapter adapter = new MainActivity.ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new ListFragment(), "List");
        adapter.addFragment(new NewListFragment(), "New");
        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

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

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

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

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

Answer 4

Try setting white or any other color as android:background attribute to your fragment's root view. For ex:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorBlue">

<!--Rest of the layout-->

</RelativeLayout>

Here RelativeLayout is my fragment's root view.

That should fix your problem.