WinterChilly WinterChilly - 3 months ago 30
Android Question

FontAwesome implementation in tabs at TabLayout

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

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);