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>

Valuable

#28126294 – Hinton

I needed it, so I changed codes of SlidingTabLayout little bit to make it easy to use icon for tabs github.com/kimkevin/SlidingIconTabLayout – Laflam

Answer 1

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.

Applicative

Should i need to create a LinearLayout with icon and textView for each and everytab? – Valuable

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. – Applicative

I'm already setting a ViewPager Adapter and now am setting this customTabView also. But i'm still seeing the old tabs only – Valuable

I'm using a ViewPager which has an adapter pastebin.com/HjwTjVEX . This adapter sets the pagetitle. – Valuable

but what if i want only icons? Why do I need to set a textview – Courthouse

TextView is just an option to you. Remove all references to textviews and inflate a new View and before return it personalize the icon, – Salicin

@user1159517, you have set customTabView and then set adapter in viewpager. – Monecious

I needed it, so I changed codes of SlidingTabLayout little bit to make it easy to use icon for tabs github.com/kimkevin/SlidingIconTabLayout – Laflam

@NikolaDespotoski Can we use this method to display a different icon per tab? – Lightness

i wan to display two textview in tabs but this is not working @Valuable – Gleeman

@NikolaDespotoski i wan to display two textview in tabs but this is not working – Gleeman

Answer 2

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.

Aerometry

+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. – Scots

Yes, that might Confuse others. Thank you for pointing that out :) – Aerometry

Answer 3

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.

Bioclimatology

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. – Moniz

I'm getting an error of HorizontalScrollView again and again. – Lobo

how do we set the tab_layout_icon height and width, spread evenly instead of hard coding it? – Glister