PagerSlidingTabStrip -How to change the background color of a tab

I am using the PagerSlidingTabStrip library.

I don't know how to change the background color of the tabs. 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 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

+3


source to share


3 answers


If you look at the instructions on github when setting up, you can see that you can change the background using this attribute pstsTabBackground

:: The background selection of each tab should be StateListDrawable.



If that doesn't work, you can change it anyway in the Styles.xml file . Btw are you sure you are using the correct view? I think you should use com.astuetz.PagerSlidingTabStrip

for more details https://github.com/astuetz/PagerSlidingTabStrip

+1


source


I recommend that you use android: background , not pstsTabBackground



0


source


The best way to change the color of the tab is to simply change the background color of the text in onCreate()

, for example:

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) {

            }
        });

      

As the text changes, the background color of the text may not be visible. In this case, you can set a custom background for the selected and deselected tab using the layer list, for example

<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>

      

Symbolic for a deleted tab

0


source