Android Slidingtablayout with Icons

Android SlidingTabLayout with icons

Use mSlidingTabLayout.setCustomTabView(int layoutResId, int textViewId) to inflate a custom layout for the SlidingTabLayout tab views.

When SlidingTabLayout tries to populate the tab strips, initially looks for any specified layout resource to inflate. Otherwise, it inflates default tab view.

Add Icons+Text to TabLayout

Try this way this is exactly what you looking for

http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private int[] tabIcons = {
            R.drawable.ic_tab_favourite,
            R.drawable.ic_tab_call,
            R.drawable.ic_tab_contacts
    };

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

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

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

    private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new OneFragment(), "ONE");
        adapter.addFrag(new TwoFragment(), "TWO");
        adapter.addFrag(new ThreeFragment(), "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 to add Icons to SlidingTabLayout?

I change this function in ViewPagerAdapter.java and add my icon:

@Override
 public CharSequence getPageTitle(int position) {
        Drawable drawable = getContext().getResources().getDrawable(icons[position]);
        drawable.setBounds(0,0,48,48);
        ImageSpan imageSpan = new ImageSpan(drawable);
        SpannableString spannableString = new SpannableString(" ");
        spannableString.setSpan(imageSpan, 0,spannableString.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        return spannableString;
    }

How to put icon in SlidingTab?

Try

private int[] imageResId = {
            R.drawable.ic_home,
            R.drawable.ic_my_timeline,
            R.drawable.ic_my_pages,
            R.drawable.ic_my_groups,
            R.drawable.ic_liked_pages
    };

@Override
public CharSequence getPageTitle(int position) {
    Drawable image = mContext.getResources().getDrawable(imageResId[position]);
     image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
     SpannableString sb = new SpannableString(" ");
     ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
     sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
     return sb;
}

instead of

@Override
public CharSequence getPageTitle(int position) {
    return Titles[position];
}

in your ViewPagerAdapter class.

EDIT1:

In your activity change

adapter = new ViewPagerAdapter(getSupportFragmentManager(), Titles, Numboftabs);

to

adapter = new ViewPagerAdapter(this, getSupportFragmentManager(), Titles, Numboftabs);

Then in your ViewPagerAdapter following changes are needed.

Context mContext;
public ViewPagerAdapter(Context context, FragmentManager fm,CharSequence mTitles[], int mNumbOfTabsumb) {
    super(fm);
    this.mContext = context;
    this.Titles = mTitles;
    this.NumbOfTabs = mNumbOfTabsumb;

}

EDIT2:

try extending FragmentPagerAdapter instead of FragmentStatePagerAdapter in your ViewPagerAdapter.

In your main activity code should be this:

tabs=(SlidingTabLayout)findViewById(R.id.tabs);
tabs.setCustomTabView(R.layout.custom_tab, 0);

Here is custom_tab.xml:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="12sp"
    android:textStyle="bold"
    android:background="?android:selectableItemBackground"
    android:padding="16dp"
    android:gravity="center" />

hope this helps!

---

Related Topics