FontAwesome implementation in tabs at TabLayout

Question

I want to implement fontawesome in tabs. This are the main things that matter.

MainActivity in OnCreate:

    viewPager = (ViewPager) findViewById(R.id.pager);
    setupViewPager(viewPager);    //Kreiramo viewpager oz. klic funkcije
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    if (tabLayout != null) {
        tabLayout.setupWithViewPager(viewPager);  //Poveže tab_layout z viewpagerjem
    }

A method that is in MainActivity for viewpager:

private void setupViewPager(ViewPager viewPager) {
    AdapterViewPager adapter = new AdapterViewPager(getSupportFragmentManager());
    //Kreiraš fragment, ki bo v ViewPagerju
    adapter.addFragment(new Fragment1(), "HOME");
    adapter.addFragment(new Fragment2(), "HEART");
    adapter.addFragment(new Fragment3(), "CRITERIA");
    viewPager.setAdapter(adapter);
    viewPager.setOffscreenPageLimit(2);
}

Custom AdapterViewPager:

public class AdapterViewPager extends FragmentStatePagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();


    public AdapterViewPager(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);
    }

    @Override
    public int getItemPosition(Object object) {
        return POSITION_NONE;
    }
}

How can accomplish this? Any ideas?

Answer 1

I used font Awesome in TabLayout but it's a bit nasty.

1- Put font Icon in your asset/font folder.

2- Use following code to apply your font:

private void changeTabsFont() {

        Typeface font = Typeface.createFromAsset(getAssets(),"fonts/font-awsome.ttf"); 
        ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
        int tabsCount = vg.getChildCount();
        for (int j = 0; j < tabsCount; j++) {
            ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
            int tabChildsCount = vgTab.getChildCount();
            for (int i = 0; i < tabChildsCount; i++) {
                View tabViewChild = vgTab.getChildAt(i);
                if (tabViewChild instanceof TextView) {
                    ((TextView) tabViewChild).setTypeface(font);
                }
            }
        }
    } 

3- Now just copy your font-awesome code in your string resource and use them, in your TabLayout.

<string name="icon_home">&#xf015;</string>

4- (alternative of 3) Override getTitle of your adapter:

 @Override
        public CharSequence getPageTitle(int position) {
            switch (position) {
                case POSITION_HOME:
                    return mContext.getResources().getString(R.string.icon_home);
             //  ... other title

            }
        }

Because Tablayout doesn't have setTypeface method you have to use such code. if you use PagerSlidingTabStrip it have such method and you can easily apply your font.

tabs.setTypeface(typeFace , 0);