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>

Answer 1

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.

Answer 2

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.

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.