CODEWITHSUNDEEP
android
user3718930
user3718930

Reputation: 381

PagerSlidingTabStrip -How to change tab background color

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

Upvotes: 3

Views: 4361

Answers (3)

code_geek
code_geek

Reputation: 71

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

Upvotes: 0

Vivek Chahar
Vivek Chahar

Reputation: 101

I recommend you to use android:background rather than pstsTabBackground

Upvotes: 0

Javier Mendon&#231;a
Javier Mendon&#231;a

Reputation: 2060

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

Upvotes: 1

Related Questions