Add Icons to SlidingTabLayout instead of Text

问题:

I'm implementing a SlidingTabLayout in my android application. What my query is that I'd like to implement icons in my Sliding Tabs instead of texts for navigation. I searched heavily on the internet for any such tutorial or sample but found none. I also searched a previous question on stackoverflow: Over Here - SlidingTabLayout with Icons. It was slightly informative but didn't really help me out.

To be clear. I require my tabs to consist of icons only. No text.

As I am new to this whole setup, I'd appreciate if you'd post proper code with an explanation. Thank you for your time and effort!

P.S. I also heard about the pagerslidingtabstrip by Andreaz Stuetz and wondered if that would be more suitable for the type of thing I'm going for...

Also: Here is what I would like my sliding tabs to look like. Check out the top of this image.

EDIT : NOW THAT LOLLIPOP (WITH MATERIAL DESIGN) HAS COME OUT. I HAVE SEEN A LOT OF APPS USING A NEW "ONLY ICON" SLIDING-TAB-LAYOUT BELOW THEIR TOOLBAR (ANDROID 5.0 ACTION-BAR). IS THEIR ANY NEW WAY TO IMPLEMENT THIS?? THANKS ONCE AGAIN!

回答1:

The key to this is to return a SpannableString, containing your icon in an ImageSpan, from your PagerAdapter's getPageTitle(position) method:

private int[] imageResId = {
        R.drawable.ic_tab_notifications,
        R.drawable.ic_tab_weather,
        R.drawable.ic_tab_calendar
};

@Override
public CharSequence getPageTitle(int position) {
    Drawable image = 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;
}

Normally this be would be enough, but the default tab created by SlidingTabLayout makes a call to TextView#setAllCaps(true) which effectively disables all ImageSpans, so you'll have to use a custom tab view instead:

res/layout/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"
    />

and where ever you setup/bind to your ViewPager:

SlidingTabLayout slidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
slidingTabLayout.setCustomTabView(R.layout.custom_tab, 0);
slidingTabLayout.setViewPager(viewPager);

(make sure to call setCustomTabView before setViewPager)

回答2:

I solved same problem, but also with changing drawable on selected tab.

Create your drawables for tabs, with two states. first_tab_drawable.xml, second_tab_drawable.xml, third_tab_drawable.xml:

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

Create your own pager adapter, extends from PagerAdapter:

public class MyPagerAdapter extends PagerAdapter {

    private int[] drawablesIds = {
        R.drawable.first_tab_drawable,
        R.drawable.second_tab_drawable,
        R.drawable.third_tab_drawable
    };

    //Constructor and other standard funcs...

    public int getDrawableId(int position){
        //Here is only example for getting tab drawables
        return drawablesIds[position];
    }
    //...
}

Change code of SlidingTabLayout:

private void populateTabStrip() {
    //Here is no more standard PagerAdapter!
    final MyPagerAdapter adapter = (MyPagerAdapter) mViewPager.getAdapter();

    final View.OnClickListener tabClickListener = new TabClickListener();

    for (int i = 0; i < adapter.getCount(); i++) {
        View tabView = null;
        TextView tabTitleView = 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;
        }

        //Set icon, that can be changeable instead setting text.
        //I think the text also can setting here from getPageTitle func.
        //But we interesting only in icon
        tabTitleView.setCompoundDrawablesWithIntrinsicBounds(adapter.getDrawableId(i), 0, 0, 0);
        //Select tab if it is current
        if (mViewPager.getCurrentItem() == i){
            tabView.setSelected(true);
        }
        tabView.setOnClickListener(tabClickListener);

        mTabStrip.addView(tabView);
    }
}

And make really selected TextView title also in SlidingTabLayout in InternalViewPagerListener:

    @Override
    public void onPageSelected(int position) {

        //Clear old selection and make new
        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);
        }
    }

Hope it will be helpful for somebody.

回答3:

To customize SlidingTabLayout the way you want, you only need to modify the method populateTabStrip():

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

        for (int i = 0; i < adapter.getCount(); i++) {
            View tabView = null;

            tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_layout, mTabStrip,
                    false);

            ImageView iconImageView = (ImageView) tabView.findViewById(R.id.tab_layout_icon);
            iconImageView.setImageDrawable(getContext().getResources().getDrawable(getIconResourceArray()[i]));

            tabView.setOnClickListener(tabClickListener);

            mTabStrip.addView(tabView);
        }
    }

Your layout could be something like that:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="75dp"
    android:paddingTop="15dp"
    android:layout_height="50dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/tab_layout_icon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="center" />
</LinearLayout>

The way you implement the getResourceArray() method is up to you. Here is how I did:

public class IconSlidingTabLayout extends HorizontalScrollView {
    private Integer[] mIconResourceArray;

    ...

    public Integer[] getIconResourceArray() {
        return mIconResourceArray;
    }

    public void setIconResourceArray(Integer[] mIconResourceArray) {
        this.mIconResourceArray = mIconResourceArray;
    }
}

In the activity:

mSlidingTabLayout = (IconSlidingTabLayout) findViewById(R.id.icon_sliding_tab_layout);
Integer[] iconResourceArray = { R.drawable.news_tab_icon,
        R.drawable.challenges_tab_icon, R.drawable.trophies_tab_icon,
        R.drawable.leaderboard_tab_icon };
mSlidingTabLayout.setIconResourceArray(iconResourceArray);

Be aware that in order to have access to R.layout.tab_layout*, you have to import yourpackage.R instead of android.R as it is by default in SlidingTabStrip.

回答4:

Ok.. there are many ways of implementing this change. This is the most quick and dirty one, just for the idea..

Substitue the method SlidingTabLayout.populateTabStrip() for this..

    private void populateTabStrip() {
    final OnClickListener tabClickListener = new TabClickListener();

    View tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_notif_icon_only, mTabStrip, false);
    tabView.setOnClickListener(tabClickListener);
    mTabStrip.addView(tabView);

    tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_weather_icon_only, mTabStrip, false);
    tabView.setOnClickListener(tabClickListener);
    mTabStrip.addView(tabView);

    tabView = LayoutInflater.from(getContext()).inflate(R.layout.tab_calendar_icon_only, mTabStrip, false);
    tabView.setOnClickListener(tabClickListener);
    mTabStrip.addView(tabView);

Create each layout this way LinearLayout > ImageView elements, src pointing to icon..

回答5:

Your Adapter should implements PagerSlidingTabStrip.IconTabProvider.

Then in getPageIconResIdyou can return id of image resource:

public class ViewPagerAdapter extends FragmentPagerAdapter implements 
PagerSlidingTabStrip.IconTabProvider {

   private static final int[] icons = {R.drawable.image1, R.drawable.image2, R.drawable.image3};

    @Override
    public int getPageIconResId(int i) {
        return icons[i];
    }
}

Keep in mind that only image will be shown, text won't.

回答6:

I know that this thread if fairly old, but i wanted to share my solution to this problem nevertheless, because it might be helpful for some. It works quite nice, even for different drawables depending on the selected state.

First of i did define two array inside the SlidingTabLayout class (this could easily be outsourced to another class):

private int[] imageResId = {
        R.drawable.multi_random,
        R.drawable.single_random,
        R.drawable.known_person,
};

private int[] imageResSelected = {
        R.drawable.multi_random_selected,
        R.drawable.single_random_selected,
        R.drawable.known_person_selected
};

private int mOldPosition = 0;

Now we alter the populateTabStrip() method inside the SlidingTabLayout:

 for (int i = 0; i < adapter.getCount(); i++) {
            View tabView = null;
            ImageView tabImageView = null;

            if (mTabViewLayoutId != 0) { // HAS TO BE SET FOR THE MOMENT!
                // If there is a custom tab view layout id set, try and inflate it
                tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
                        false);
                tabImageView = (ImageView) tabView.findViewById(mTabViewTextViewId);
            }

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

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

            int resourceId;
            if (i == mViewPager.getCurrentItem()) {
                resourceId = imageResSelected[i];
                mOldPosition = i;
            } else {
                resourceId = imageResId[i];
            }
            tabImageView.setImageResource(resourceId);
            tabView.setOnClickListener(tabClickListener);

            mTabStrip.addView(tabView);
        }

To update the image according to which tab is selected we add some lines to the onPageSelected method

// This Method is called once the transition is finished
// Change the drawable of the old one..
ImageView view = (ImageView) mTabStrip.getChildAt(mOldPosition);
view.setImageResource(imageResId[mOldPosition]);

// And now change it of the current one
view = (ImageView) mTabStrip.getChildAt(position);
view.setImageResource(imageResSelected[position]);

mOldPosition = position;

Finally we need to add a custom Tab View:

mSlidingTabLayout.setCustomTabView(R.layout.custom_tab, 0);

Like this one

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:padding="16dp"
          android:layout_weight="1"
          android:src="@drawable/multi_random"
        />

This solution is far from perfect, but works for my needs. Maybe i could help someone with this.

回答7:

I recently implemented this library called ViewPagerAddons. It includes SlidingTabLayoutColors, which is exactly what you need. Simply let your pager adapter implement SlidingTabLayouColors.ImageProvider interface, override getPageImage method and return the image resource ids according to the page positions. Simple.

Here's the link to the library (set up instructions included): https://bitbucket.org/enthusiast94/viewpageraddons/src

回答8:

I followed Jeremy's answer and its working fine. AFAIK there is no new way of doing this. Most apps are now removing the toolbar altogether and adding a custom slidingtabstrip recommended by google.

If you have any specific questions let me know. iv got my app looking a lot like the screenshot you have posted. I feel this material design update was focusing more on enabling custom animations and effects.

回答9:

Just returning null from the getPageTitle() method did it for me:

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

回答10:

Check this solution link androidhive about material design tabs /viewpager

A very good website about android solutions. Hope you will find a solution.

回答11:

Extend your main activity from FragmentActivity. Also implement this class from ActionBar.TabListener as we are adding Tabs

// For Adding Tabs

for (String tab_name : tabs) {
actionBar.addTab(actionBar.newTab().setIcon(R.drawable.drawable_id)
.setTabListener(this));
}

Check here.