Tabs in tablayout are not showing tab icon

Question

I have created tablayout. And added icons to the left side of each tab. But I am not able to see those icons. Following is code of java file

public class ActivityAllVerification extends AppCompatActivity {

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_all_verification);
        initDefaultSettings();

    }

    private void initDefaultSettings() {
        sessionManager = new SessionManager(ActivityAllVerification.this);
        toolbar = (Toolbar) findViewById(R.id.appbar);
        setSupportActionBar(toolbar);
        ((ImageView) toolbar.findViewById(R.id.bitcoin_logo)).setVisibility(View.GONE);
        TextView txt = (TextView) toolbar.findViewById(R.id.toolbar_txt_title);
        txt.setText("Account Verification");
        getSupportActionBar().setDisplayShowHomeEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowTitleEnabled(false);//disable default action bar title
        // Toast.makeText(this, "" + sessionManager.isUser(), Toast.LENGTH_SHORT).show();
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();
        tabLayout.post(new Runnable() {
            @Override
            public void run() {
                tabLayout.setupWithViewPager(viewPager);
            }
        });

    }

    private void setupTabIcons() {
        TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabOne.setText("PAN CARD");
        tabOne.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_bitcoin_24, 0, 0, 0);
        tabLayout.getTabAt(0).setCustomView(tabOne);

        TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabTwo.setText("AADHAR CARD");
        tabOne.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_bitcoin_24, 0, 0, 0);
        tabLayout.getTabAt(1).setCustomView(tabTwo);

        TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
        tabThree.setText("BACK ACCOUNT");
        tabOne.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_bitcoin_24, 0, 0, 0);
        tabLayout.getTabAt(2).setCustomView(tabThree);
        Toast.makeText(this, "" + sessionManager.isUser(), Toast.LENGTH_SHORT).show();
        if (!sessionManager.isUser())
        {
            TextView tabFour = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
            tabThree.setText("TAX INCOICE");
            tabOne.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_bitcoin_24, 0, 0, 0);
            tabLayout.getTabAt(3).setCustomView(tabFour);
        }
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new FragmentPanCard(), "PAN CARD");
        adapter.addFragment(new FragmentAadharCard(), "AADAHR CARD");
        adapter.addFragment(new FragmentBankAccount(), "BANK ACCOUNT");
        if (!sessionManager.isUser())
            adapter.addFragment(new FragmentTaxInvoice(), "TAX INVOICE");
        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);
        }
    }
}

here from here I have created the custom tabs and in setupTabIcons() I am setting icon on left of tab. Here is code of customtab.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="4dp"
    android:id="@+id/tab"
    android:textColor="@color/colorWhite"
    android:fontFamily="@string/font_fontFamily_medium"/>

and here is code of activity_all_verification.xml

<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="@drawable/background_color">

        <include
            android:id="@+id/appbar"
            layout="@layout/toolbar"></include>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/appbar"
            app:tabGravity="fill"
            app:tabMode="scrollable"
            app:tabIndicatorColor="@color/colorWhite"
            app:tabTextColor="@color/colorWhite"/>


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

for the first time tabs were not displaying properly so from enter link description here I have added the following code in .java file

tabLayout.post(new Runnable() {
        @Override
        public void run() {
            tabLayout.setupWithViewPager(viewPager);
        }
    });

So now its displaying tab text color in black. I want tab text color in white with left side icon.How to achieve it?

Answer 1

I struggled with same problem for a while until I found that if you call notifyDataSetChanged of SectionsPageAdapter after having set the icons, tab icons will not be displayed.

Just make sure to set icons every time after calling notifyDataSetChanged()

private SectionsPagerAdapter mSectionsPagerAdapter;
private ViewPager mViewPager;
TabLayout tabLayout;

private int[] tabIcons = {
    R.drawable.icon_tab_settings,
    R.drawable.icon_tab_edit,
    R.drawable.icon_tab_recordings,
    R.drawable.icon_tab_pentagram
};

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

    ...

    mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
    mViewPager = findViewById(R.id.container);
    mViewPager.setAdapter(mSectionsPagerAdapter);
    mViewPager.setCurrentItem(1);
    tabLayout = findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(mViewPager);

    tabLayout.getTabAt(0).setIcon(tabIcons[0]);
    tabLayout.getTabAt(1).setIcon(tabIcons[1]);
    tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    tabLayout.getTabAt(3).setIcon(tabIcons[3]);


    ...
}

public void refreshView(){
    if(mSectionsPagerAdapter!=null){
        mSectionsPagerAdapter.notifyDataSetChanged();

        //refresh tab icons again
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
        tabLayout.getTabAt(3).setIcon(tabIcons[3]);
    } 
}