How to do tabs with icons

Question

I'm trying to do an activity with tabs and pagerview I found this code in a blog but it does not come like making the tabs have icons instead of text ... I put the code:

ViewPagerAdapter.java

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 addFrag(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

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

Tablayout_in_Android.java

public class Tablayout_in_Android extends Fragment {

    public Tablayout_in_Android() {
        // Required empty public constructor
    }

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

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_tablayout_in__android, container, false);
    }

}

Method onCreate main class

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

        tabLayout = (TabLayout) findViewById(R.id.pestañas);
        tabLayout.setupWithViewPager(viewPager);

    }

    private void addTabs(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new Tablayout_in_Android(), "ONE");
        adapter.addFrag(new Tablayout_in_Android(), "TWO");
        adapter.addFrag(new Tablayout_in_Android(), "THREE");
        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 addFrag(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

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

how can i change text for icons? Thanks

Check this solution: https://stackoverflow.com/a/47495989/2914140. — CoolMind, Jan 19 '19 at 11:39

score 8 · Accepted Answer · answered Apr 28 '17 at 19:23

8

Try this:

tabLayout.setupWithViewPager(mViewPager);
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
    tabLayout.getTabAt(i).setIcon(R.drawable.your_icon);
}

answered Apr 28 '17 at 19:23

Jonathan Aste

1,764
1
13
20

1

Check this solution: http://stackoverflow.com/a/35372182/5658915. You need to create a custom layout and set it to each tab, in your custom layout you can create an imageview to use as tab icon. – Jonathan Aste Apr 28 '17 at 19:37

score 1 · Answer 2 · answered Oct 28 '19 at 14:29

To expand on Jonathan's answer, you can also have a list of icons to show in the tabs. Ensure the icons match the number of tabs you have.

tabLayout.setupWithViewPager(mViewPager);

int[] tabIcons = {
        R.drawable.ic_icon_1,
        R.drawable.ic_icon_2,
        R.drawable.ic_icon_3
};

for(int i=0; i<tabLayout.getTabCount(); i++){
    if(tabLayout.getTabAt(i) != null){
        tabLayout.getTabAt(i).setIcon(tabIcons[i]);
    }
}

Also, you may want to have the icon and tab label to be in a horizontal orientation, the use app:tabInlineLabel="true" in the TabLayout's xml layout

How to do tabs with icons

2 Answers2