PagerSlidingTabStrip -How to change tab background color

Question

I'm using PagerSlidingTabStrip library .

I don't know how can I change tabs background color . I tried to change it from xml like this :

<android.support.v4.view.PagerTitleStrip 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/title"
    android:paddingTop="4dp"
    android:layout_gravity="top"
    android:background="#222222"
    android:paddingBottom="4dp"
     >
</android.support.v4.view.PagerTitleStrip>

but it didn't work .

this is the mainActivity :

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
    pager = (ViewPager) findViewById(R.id.pager);
    adapter = new MyPagerAdapter(getSupportFragmentManager());
    pager.setAdapter(adapter);
    final int pageMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 4, getResources().getDisplayMetrics());
    pager.setPageMargin(pageMargin);
    tabs.setViewPager(pager);
    tabs.setTabBackground(Color.RED);
    changeColor(currentColor);
}

Could you help me ?

thanks you

score 1 · Answer 1 · edited May 23 '17 at 12:23

1

If you look at the instructions in github under customization, you can see you can change the background with this attribute: pstsTabBackground : Background drawable of each tab, should be a StateListDrawable.

If that doesn't work you can in any case change it in the Styles.xml file. Btw, are you sure you are using the right view? I think you should use com.astuetz.PagerSlidingTabStrip check https://github.com/astuetz/PagerSlidingTabStrip for more details

edited May 23 '17 at 12:23

Community

1
1

answered Aug 11 '14 at 08:15

Javier Mendonça

1,970
1
17
25

thanks for the reply . I'm sure i'm using com.astuetz.PagerSlidingTabStrip . I edit and post my oncreate . The attribute you said , I use it in this way : tabs.setTabBackground(Color.RED); is it the correct way ? – user3718930 Aug 11 '14 at 11:11
1

@user3718930 I asked because I see your view is `android.support.v4.view.PagerTitleStrip` and not `com.astuetz.PagerSlidingTabStrip`... I don't know about setting the color programmatically although you can always create a drawable and set the style you want for the tabs (I advice the latter). You should get your answer [here](http://stackoverflow.com/q/24470524/761668), refer to that post. – Javier Mendonça Aug 11 '14 at 11:36

score 0 · Answer 2 · answered Jul 16 '15 at 11:26

0

I recommend you to use android:background rather than pstsTabBackground

answered Jul 16 '15 at 11:26

Vivek Chahar

81
1
5

code_geek · Answer 3 · 2016-03-04T07:16:54.160

The best way to change Tab color is to simply change the text background color in onCreate() like:

mTabsLinearLayout = ((LinearLayout) tabs.getChildAt(0));
            for (int i = 0; i < mTabsLinearLayout.getChildCount(); i++) {
                    TextView tv = (TextView) mTabsLinearLayout.getChildAt(i);

                            if (i == currentPosition) {
                             tv.setBackgroundColor(getResources().getColor(R.color.caldroid_white));
                       } else {
                            tv.setBackgroundColor(getResources().getColor(R.color.gray));
                        }
                }


        tabs.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                currentPosition = position;
                for(int i=0; i < mTabsLinearLayout.getChildCount(); i++){
                                        TextView tv = (TextView) mTabsLinearLayout.getChildAt(i);
                                        if(i == position){
                                                tv.setBackgroundColor(getResources().getColor(R.color.caldroid_white));
                                            } else {
                                                tv.setBackgroundColor(getResources().getColor(R.color.gray));
                                            }
                                    }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

With edition changing background color of textview may invisible indicator. In this case you can set custom background for selected and deselected tab with layer-list like

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
    <shape android:shape="rectangle">
        <solid android:color="@color/blue_light" />

    </shape>
</item>

<!-- MAIN SHAPE -->
<item  android:bottom="4dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/dashboard_selected_tab" />
    </shape>
</item>

Similerly for deselcted tab

PagerSlidingTabStrip -How to change tab background color

3 Answers3