How Can Custom Tab View Be Implemented Using Setcustomtabview Method In Slidingtabcolor Sample?

I am using Android's SlidingTabColors sample in my application layout. I have three tabs initialized. Due to the default tab layout all the tabs have same layout. I have searched e

Solution 1:

First thing is to look at the original source code from google. You can see that there is a method like this:

publicvoidsetCustomTabView(int layoutResId, int textViewId){
    mTabViewLayoutId = layoutResId;
    mTabViewTextViewId = textViewId;
}

When you take a look at the method populateTabStrip() you can see that there is inflating a custom view (which you have set) when the id isn't 0

...
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);
}
...

That mean that you must call the setCustomTabView() with the Layout as first parameter and the TextView (which will displayed the text) as second parameter. Like

mSlidingTabLayout.setCustomTabView(R.layout.custom_x, R.id.item);

Don't set the layout to 0 (zero). The View will automaticly use the default TabView (which is a single TextView).

The layout, in my example, look like this and is called custom_x.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><TextViewandroid:id="@+id/item"android:layout_width="wrap_content"android:layout_height="wrap_content" /><ImageViewandroid:layout_width="wrap_content"android:src="@drawable/ic_launcher"android:layout_height="wrap_content" /></LinearLayout>

Important! The method setViewPager() must called after setCustomTabView() in your Activity/Fragment.

mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setCustomTabView(R.layout.custom_x, R.id.item);
mSlidingTabLayout.setViewPager(mViewPager);

Then you get a result like this:

It's also as gist available.

Solution 2:

Inside SlidingTabLayout the tabs layout is governed by mTabViewLayoutId and mTabViewTextViewId

just add a method:

/**
 * Set the custom layout to be inflated for the tab views.
 *
 * @param layoutResId Layout id to be inflated
 * @param textViewId  id of the {@link TextView} in the inflated view
 */publicvoidsetCustomTabView(int layoutResId, int textViewId) {
    mTabViewLayoutId = layoutResId;
    mTabViewTextViewId = textViewId;
}

and you are set to go. you should call this method @OnCreate of your activity, you can pass 0 as the first parameter for not to include Layout, and just pass the second param as for the layout id of some TextView. notice that you don't need to inlate the Views as you did

@Layout/my_text_view
 <TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="Hello"android:id="@+id/hello1"
 />

 @onCreateView@OverridepublicvoidonCreate(Bundle savedInstanceState){

     mViewPager = (ViewPager) findViewById(R.id.viewpager);
    mViewPager.setAdapter(newSectionsPagerAdapter(getFragmentManager()));
    tabImageView = (ImageView) findViewById(R.id.tab_image_view);
    // Create the mAdapter that will return a fragment for each of the three// primary sections of the activity.
    slidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
    slidingTabLayout.setDividerColors(getResources().getColor(android.R.color.transparent));
    slidingTabLayout.setSelectedIndicatorColors(getResources().getColor(android.R.color.white));
    slidingTabLayout.setCustomTabView(0, R.layout.my_text_view);
}