Android SlidingTabLayout with icons

Question

I am using google's SlidingTabLayout in my view, but i want to add icons to the tabs. I'm using this http://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabLayout.html Can anyone please help?

void setUpPager(View view){
    mViewPager = (ViewPager) view.findViewById(R.id.viewpager);
    mViewPager.setAdapter(new TabsPagerAdapter(getActivity()));
    mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
    mSlidingTabLayout.setViewPager(mViewPager);
  }

Here is my xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

  <android.common.view.SlidingTabLayout
      android:id="@+id/sliding_tabs"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />

  <android.support.v4.view.ViewPager
      android:id="@+id/viewpager"
      android:layout_width="match_parent"
      android:layout_height="0px"
      android:layout_weight="1"
      android:background="@android:color/white"/>

</LinearLayout>

http://stackoverflow.com/questions/28125794/slidingtablayout-with-icons-only — Daniel, Feb 05 '15 at 10:45
I needed it, so I changed codes of SlidingTabLayout little bit to make it easy to use icon for tabs https://github.com/kimkevin/SlidingIconTabLayout — kimkevin, Jul 13 '15 at 06:18

score 16 · Answer 1 · edited Apr 30 '15 at 13:39

Just want to give example for the Correct and accepted answer. :)
Firstly, add the tabs and set their custom view when you are adding the adapter to your viewpager. For example see following lines:

mViewpager = (ViewPager) view.findViewById(R.id.pager);

//Do something with your view before setting up adapter

ViewPager.setAdapter(mSectionsPagerAdapter);
mSlidingTabLayout = (SlidingTabLayout) View().findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setCustomTabView(R.layout.custom_tab_title, R.id.tabtext);
mSlidingTabLayout.setViewPager(mViewPager);

Where sliding_tabs are the tabs_titles to be added and are defined in xml file of the viewpager like:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <com.packagename.SlidingTabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />

    <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/sliding_tabs"
        tools:context=".ActivityUser"
        android:fitsSystemWindows="true"
        android:textStyle="bold"
        android:textSize="20dp"/>

</RelativeLayout>

and where custom_tab_title is a separate xml file in your layout folder.For example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/titletab">

    <ImageView
    android:id="@+id/tabimage"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:layout_marginLeft="2dp"
    />

    <TextView
    android:id="@+id/tabtext"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:gravity="bottom"
    android:paddingBottom="15dp"
    android:paddingLeft="4dp"
    android:paddingRight="4dp"/>

</LinearLayout>

and you can set the image for a particular tab by:

Drawable tab_image = getResources().getDrawable(getResources().getIdentifier("image_name_in_drawable", "drawable", "com.packagename"));
tab_image.setBounds(0, 0, 40, 40);  //Setting up the resolution for image
ImageSpan imageSpanresource = new ImageSpan(tab_image);
//Notice the additional space at the end of the String
resourcesstring = "Tab1 ";
//here we are setting up the position to display image..
SpannableString viewpager_tab_title = new SpannableString(resourcesstring ); 
viewpager_tab_title.setSpan(imageSpanresource, resourcesstring.length()-1, resourcesstring.length(), 0);

Notice that I have added an additional space to the viewpager_tab_title and am setting up the image to that position, so that the actual string is displayed completely.

+1, Your answer is perfect and working fine, however, you are using `resourcesstring` in the end which might confuse others (it confused me ;) ). So, I am editing your answer slightly. — Rohan Kandwal, Apr 30 '15 at 13:37
Yes, that might Confuse others. Thank you for pointing that out :) — sahil shekhawat, Apr 30 '15 at 13:47

Nikola Despotoski · Accepted Answer · 2014-05-02T03:55:53.787

15

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.

edited May 02 '14 at 03:55

answered May 02 '14 at 03:43

Nikola Despotoski

49,966
15
119
148

Should i need to create a LinearLayout with icon and textView for each and everytab? – user1159517 May 02 '14 at 03:49
Just create one layout and supply the resource id of it and the title textview to the method, SlidingTabLayout will inflate it for all your tabs itself. – Nikola Despotoski May 02 '14 at 03:50
I'm already setting a ViewPager Adapter and now am setting this customTabView also. But i'm still seeing the old tabs only – user1159517 May 02 '14 at 04:17
I'm using a ViewPager which has an adapter http://pastebin.com/HjwTjVEX . This adapter sets the pagetitle. – user1159517 May 02 '14 at 04:28
3

but what if i want only icons? Why do I need to set a textview – Adifyr May 05 '14 at 06:48
TextView is just an option to you. Remove all references to textviews and inflate a new View and before return it personalize the icon, – Joaquin Iurchuk Jan 19 '15 at 17:32
@user1159517, you have set customTabView and then set adapter in viewpager. – Krunal Indrodiya Jan 20 '15 at 11:51
1

I needed it, so I changed codes of SlidingTabLayout little bit to make it easy to use icon for tabs https://github.com/kimkevin/SlidingIconTabLayout – kimkevin Jul 13 '15 at 06:16
@NikolaDespotoski Can we use this method to display a different icon per tab? – Mornor Aug 05 '15 at 09:05
i wan to display two textview in tabs but this is not working @user1159517 – Erum Aug 08 '15 at 13:19
@NikolaDespotoski i wan to display two textview in tabs but this is not working – Erum Aug 08 '15 at 13:20

score 13 · Answer 3 · answered Nov 14 '14 at 17:51

To customize SlidingTabLayout the way you want, you only need to modify the method populateTabStrip(). With this approach, you do not need care about any TextView.

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.

Worked for me too. Thanks! For those of you wanting to do the same, please note that you don't have to create a separate class called IconSlidingTabLayout. If you want, you can just add those 3 methods to Google's SlidingTabLayout java file and you are ready to go. — Simon, Apr 11 '15 at 20:31
I'm getting an error of `HorizontalScrollView` again and again. — Anshul Tyagi, Oct 28 '15 at 07:37
how do we set the `tab_layout_icon` height and width, spread evenly instead of hard coding it? — lionelmessi, Feb 24 '16 at 05:44

Android SlidingTabLayout with icons

3 Answers3

Linked