SlidingTabLayout with icons only

Question

Following this example i was able to create a SlidingTabLayout with icons only but i would like to center them. Do i need to create a custom view or are there other solutions?

Any help would be appreciated.

Answer 1

Finally i'v figured it out. Here's my code example...

Create a drawable for each tab, in my case i created store_tab.xml and cart_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_store_white_24dp" android:state_selected="true" />
    <item android:drawable="@drawable/ic_store_grey600_24dp" />
</selector>

Create your own pager adapter, which extends from FragmentPageAdapter

public class HomePagerAdapter extends FragmentPagerAdapter {

    private static int[] ICONS = new int[] {
        R.drawable.store_tab,
        R.drawable.cart_tab
    };

    // ...

    @Override
    public CharSequence getPageTitle(int position) {
        return null;
    }

    @Override
    public int getCount() {
        return ICONS.length;
    }

    public int getDrawableId(int position) {
        return ICONS[position];
    }

}

Create the following new method in SlidingTabLayout

protected ImageView createDefaultImageView(Context context) {
    ImageView imageView = new ImageView(context);

    int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
    imageView.setPadding(padding, padding, padding, padding);

    int width = (int) (getResources().getDisplayMetrics().widthPixels / mViewPager.getAdapter().getCount());
    imageView.setMinimumWidth(width);

    return imageView;
}

Then alter the method populateTabStrip inside SlidingTabLayout

private void populateTabStrip() {
    final HomePagerAdapter adapter = (HomePagerAdapter) mViewPager.getAdapter();
    final View.OnClickListener tabClickListener = new TabClickListener();

    for (int i = 0; i < adapter.getCount(); i++) {
        View tabView = null;
        //TextView tabTitleView = null;
        ImageView tabIconView = null;

        /*if (mTabViewLayoutId != 0) {
            // If there is a custom tab view layout id set, try and inflate it
            tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
                    false);
            tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
        }

        if (tabView == null) {
            tabView = createDefaultTabView(getContext());
        }

        if (tabTitleView == null && TextView.class.isInstance(tabView)) {
            tabTitleView = (TextView) tabView;
        }*/

        if (tabView == null) {
            tabView = createDefaultImageView(getContext());
        }

        if (tabIconView == null && ImageView.class.isInstance(tabView)) {
            tabIconView = (ImageView) tabView;
        }

        tabIconView.setImageDrawable(getResources().getDrawable(adapter.getDrawableId(i))); 
        if (mViewPager.getCurrentItem() == i) {
            tabIconView.setSelected(true);
        }
        //tabTitleView.setText(adapter.getPageTitle(i));
        tabView.setOnClickListener(tabClickListener);

        mTabStrip.addView(tabView);
    }
}

Finally alter onPageSelected inside InternalViewPageListener

@Override
public void onPageSelected(int position) {
    for (int i = 0; i < mTabStrip.getChildCount(); i++) {
        mTabStrip.getChildAt(i).setSelected(false);
    }
    mTabStrip.getChildAt(position).setSelected(true);

    if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
        mTabStrip.onViewPagerPageChanged(position, 0f);
        scrollToTab(position, 0);
    }

    if (mViewPagerPageChangeListener != null) {
        mViewPagerPageChangeListener.onPageSelected(position);
    }
}

Final result