how to change tab color in android view pager with tab Strip

Question

This is my Xml:

 <RelativeLayout
            android:id="@+id/content"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_above="@id/footer"
            android:background="#000000"
            android:gravity="center" >

            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textColor="#ffffff" >

                <android.support.v4.view.PagerTabStrip
                    android:id="@+id/pager_title_strip"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top"
                    android:background="#d3d3d3"
                    android:paddingBottom="10dp"
                    android:paddingTop="10dp"
                    android:textColor="#000000" />
            </android.support.v4.view.ViewPager>
        </RelativeLayout>

this is my main actvity :

 public class MainActivity extends FragmentActivity {   
        @Override
        protected void onCreate(Bundle savedInstanceState) {
                    viewPager = (ViewPager) findViewById(R.id.pager);
            mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
            viewPager.setAdapter(new                   ViewPagerAdapter(getSupportFragmentManager()));

    }
    }

this is my viewpageAdapter class:

public class ViewPagerAdapter extends FragmentPagerAdapter {

    final int PAGE_COUNT = 10;
    // Tab Titles
    private String[] tabs = { "Tables", "Water", "Fan"};
Context context;

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public int getCount() {
        return PAGE_COUNT;
    }

    @Override
    public Fragment getItem(int index) {

        switch (index) {
        case 0:
            // Top Rated fragment activity
            return new TableFragment();
        case 1:
            // Games fragment activity
            return new WaterFragment();

        case 2:
            // Movies fragment activity
            return new FancoolerFragment();

}

        return null;
}
@Override
    public CharSequence getPageTitle(int position) {
        return tabs[position];
    }
@Override
    public CharSequence getPageTitle(int position) {
        return tabs[position];
    }

Screen1 is my cureent Screen : Screen2 :Desire Screen please help me how to acchive this i am unable to set text and background color of tab when Particular tab is enabled or open please suggest me how to get this

Answer 1

Their is alternative you can use

 <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#bb455a64"
        app:tabIndicatorColor="@color/red"
        app:tabSelectedTextColor="#aaffff64"
        app:tabIndicatorHeight="4dp"
        app:tabTextAppearance="@layout/drawer_row"
        app:tabTextColor="#FFF" />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

Answer 2

To my knowledge, I think it is not possible with default PagerTabStrip.

Try any of the two solutions for your design,

1. Use buttons as tabs for viewpager

2. Use Custom PagerTitleStrip

   public class PagerSlidingTabStrip extends HorizontalScrollView {

   public interface IconTabProvider {
       public int getPageIconResId(int position);
   }
   
   // @formatter:off
   private static final int[] ATTRS = new int[]{
           android.R.attr.textSize,
           android.R.attr.textColor
   };
   // @formatter:on
   
   private LinearLayout.LayoutParams defaultTabLayoutParams;
   private LinearLayout.LayoutParams expandedTabLayoutParams;
   
   private final PageListener pageListener = new PageListener();
   public OnPageChangeListener delegatePageListener;
   
   private LinearLayout tabsContainer;
   private ViewPager pager;
   
   private int tabCount;
   
   private int currentPosition = 0;
   private float currentPositionOffset = 0f;
   
   private Paint rectPaint;
   private Paint dividerPaint;
   
   private int indicatorColor = 0xEEFFFFFF;
   private int underlineColor = 0x33FFFFFF;
   private int dividerColor = 0x00FFFFFF;
   
   private boolean shouldExpand = false;
   private boolean textAllCaps = true;
   
   private int scrollOffset = 52;
   private int indicatorHeight = 4;
   private int underlineHeight = 2;
   private int dividerPadding = 0;
   private int tabPadding = 0;
   private int dividerWidth = 0;
   
   private int tabTextSize = 14;
   private int tabTextColor = 0xFFFFFFFF;
   private Typeface tabTypeface = null;
   private int tabTypefaceStyle = Typeface.NORMAL;
   
   private int lastScrollX = 0;
   
   private int tabBackgroundResId = R.drawable.background_media_pager_tab;
   
   private Locale locale;
   
   public PagerSlidingTabStrip(Context context) {
       this(context, null);
   }
   
   public PagerSlidingTabStrip(Context context, AttributeSet attrs) {
       this(context, attrs, 0);
   }
   
   public PagerSlidingTabStrip(Context context, AttributeSet attrs, int defStyle) {
       super(context, attrs, defStyle);
   
       setFillViewport(true);
       setWillNotDraw(false);
   
       tabsContainer = new LinearLayout(context);
       tabsContainer.setOrientation(LinearLayout.HORIZONTAL);
       tabsContainer.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
       addView(tabsContainer);
   
       DisplayMetrics dm = getResources().getDisplayMetrics();
   
       scrollOffset = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, scrollOffset, dm);
       indicatorHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, indicatorHeight, dm);
       underlineHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, underlineHeight, dm);
       dividerPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dividerPadding, dm);
       tabPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, tabPadding, dm);
       dividerWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dividerWidth, dm);
       tabTextSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, tabTextSize, dm);
   
       // get system attrs (android:textSize and android:textColor)
   
       TypedArray a = context.obtainStyledAttributes(attrs, ATTRS);
   
       tabTextSize = a.getDimensionPixelSize(0, tabTextSize);
       tabTextColor = a.getColor(1, tabTextColor);
   
       a.recycle();
   
       // get custom attrs
   
       a = context.obtainStyledAttributes(attrs, R.styleable.PagerSlidingTabStrip);
   
       indicatorColor = a.getColor(R.styleable.PagerSlidingTabStrip_pstsIndicatorColor, indicatorColor);
       underlineColor = a.getColor(R.styleable.PagerSlidingTabStrip_pstsUnderlineColor, underlineColor);
       dividerColor = a.getColor(R.styleable.PagerSlidingTabStrip_pstsDividerColor, dividerColor);
       indicatorHeight = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsIndicatorHeight, indicatorHeight);
       underlineHeight = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsUnderlineHeight, underlineHeight);
       dividerPadding = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsDividerPadding, dividerPadding);
       tabPadding = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsTabPaddingLeftRight, tabPadding);
       tabBackgroundResId = a.getResourceId(R.styleable.PagerSlidingTabStrip_pstsTabBackground, tabBackgroundResId);
       shouldExpand = a.getBoolean(R.styleable.PagerSlidingTabStrip_pstsShouldExpand, shouldExpand);
       scrollOffset = a.getDimensionPixelSize(R.styleable.PagerSlidingTabStrip_pstsScrollOffset, scrollOffset);
       textAllCaps = a.getBoolean(R.styleable.PagerSlidingTabStrip_pstsTextAllCaps, textAllCaps);
   
       a.recycle();
   
       rectPaint = new Paint();
       rectPaint.setAntiAlias(true);
       rectPaint.setStyle(Style.FILL);
   
       dividerPaint = new Paint();
       dividerPaint.setAntiAlias(true);
       dividerPaint.setStrokeWidth(dividerWidth);
   
       defaultTabLayoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
       expandedTabLayoutParams = new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f);
   
       if (locale == null) {
           locale = getResources().getConfiguration().locale;
       }
   }
   
   public void setViewPager(ViewPager pager) {
       this.pager = pager;
   
       if (pager.getAdapter() == null) {
           throw new IllegalStateException("ViewPager does not have adapter instance.");
       }
   
       pager.setOnPageChangeListener(pageListener);
   
       notifyDataSetChanged();
   }
   
   public void setOnPageChangeListener(OnPageChangeListener listener) {
       this.delegatePageListener = listener;
   }
   
   public void notifyDataSetChanged() {
   
       tabsContainer.removeAllViews();
   
       tabCount = pager.getAdapter().getCount();
   
       for (int i = 0; i < tabCount; i++) {
   
           if (pager.getAdapter() instanceof IconTabProvider) {
               addIconTab(i, ((IconTabProvider) pager.getAdapter()).getPageIconResId(i));
           } else {
               addTextTab(i, pager.getAdapter().getPageTitle(i).toString());
           }
   
       }
   
       updateTabStyles();
   
       getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
   
           @SuppressWarnings("deprecation")
           @SuppressLint("NewApi")
           @Override
           public void onGlobalLayout() {
   
               if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                   getViewTreeObserver().removeGlobalOnLayoutListener(this);
               } else {
                   getViewTreeObserver().removeOnGlobalLayoutListener(this);
               }
   
               currentPosition = pager.getCurrentItem();
               scrollToChild(currentPosition, 0);
           }
       });
   
   }
   
   private void addTextTab(final int position, String title) {
   
       TextView tab = new TextView(getContext());
       tab.setText(title);
       tab.setGravity(Gravity.CENTER);
       tab.setSingleLine();
   
       addTab(position, tab);
   }
   
   private void addIconTab(final int position, int resId) {
   
       ImageButton tab = new ImageButton(getContext());
       tab.setImageResource(resId);
   
       addTab(position, tab);
   
   }
   
   private void addTab(final int position, View tab) {
       tab.setFocusable(true);
       tab.setOnClickListener(new OnClickListener() {
           @Override
           public void onClick(View v) {
               pager.setCurrentItem(position);
           }
       });
   
       tab.setPadding(tabPadding, 0, tabPadding, 0);
       tabsContainer.addView(tab, position, shouldExpand ? expandedTabLayoutParams : defaultTabLayoutParams);
   }
   
   private void updateTabStyles() {
   
       for (int i = 0; i < tabCount; i++) {
   
           View v = tabsContainer.getChildAt(i);
   
           v.setBackgroundResource(tabBackgroundResId);
   
           if (v instanceof TextView) {
   
               TextView tab = (TextView) v;
               tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, tabTextSize);
               tab.setTypeface(tabTypeface, tabTypefaceStyle);
               tab.setTextColor(tabTextColor);
   
               // setAllCaps() is only available from API 14, so the upper case is made manually if we are on a
               // pre-ICS-build
               if (textAllCaps) {
                   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
                       tab.setAllCaps(true);
                   } else {
                       tab.setText(tab.getText().toString().toUpperCase(locale));
                   }
               }
           }
       }
   
   }
   
   private void scrollToChild(int position, int offset) {
   
       if (tabCount == 0) {
           return;
       }
   
       int newScrollX = tabsContainer.getChildAt(position).getLeft() + offset;
   
       if (position > 0 || offset > 0) {
           newScrollX -= scrollOffset;
       }
   
       if (newScrollX != lastScrollX) {
           lastScrollX = newScrollX;
           scrollTo(newScrollX, 0);
       }
   
   }
   
   @Override
   protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
   
       if (isInEditMode() || tabCount == 0) {
           return;
       }
   
       final int height = getHeight();
   
       // draw indicator line
   
       rectPaint.setColor(indicatorColor);
   
       // default: line below current tab
       View currentTab = tabsContainer.getChildAt(currentPosition);
       float lineLeft = currentTab.getLeft();
       float lineRight = currentTab.getRight();
   
       // if there is an offset, start interpolating left and right coordinates between current and next tab
       if (currentPositionOffset > 0f && currentPosition < tabCount - 1) {
   
           View nextTab = tabsContainer.getChildAt(currentPosition + 1);
           final float nextTabLeft = nextTab.getLeft();
           final float nextTabRight = nextTab.getRight();
   
           lineLeft = (currentPositionOffset * nextTabLeft + (1f - currentPositionOffset) * lineLeft);
           lineRight = (currentPositionOffset * nextTabRight + (1f - currentPositionOffset) * lineRight);
       }
   
       canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height, rectPaint);
   
       // draw underline
   
       rectPaint.setColor(underlineColor);
       canvas.drawRect(0, height - underlineHeight, tabsContainer.getWidth(), height, rectPaint);
   
       // draw divider
   
       dividerPaint.setColor(dividerColor);
       for (int i = 0; i < tabCount - 1; i++) {
           View tab = tabsContainer.getChildAt(i);
           canvas.drawLine(tab.getRight(), dividerPadding, tab.getRight(), height - dividerPadding, dividerPaint);
       }
   }
   
   private class PageListener implements OnPageChangeListener {
   
       @Override
       public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
   
           currentPosition = position;
           currentPositionOffset = positionOffset;
   
           scrollToChild(position, (int) (positionOffset * tabsContainer.getChildAt(position).getWidth()));
   
           invalidate();
   
           if (delegatePageListener != null) {
               delegatePageListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
           }
       }
   
       @Override
       public void onPageScrollStateChanged(int state) {
           if (state == ViewPager.SCROLL_STATE_IDLE) {
               scrollToChild(pager.getCurrentItem(), 0);
           }
   
           if (delegatePageListener != null) {
               delegatePageListener.onPageScrollStateChanged(state);
           }
       }
   
       @Override
       public void onPageSelected(int position) {
           if (delegatePageListener != null) {
               delegatePageListener.onPageSelected(position);
           }
       }
   
   }
   
   public void setIndicatorColor(int indicatorColor) {
       this.indicatorColor = indicatorColor;
       invalidate();
   }
   
   public void setIndicatorColorResource(int resId) {
       this.indicatorColor = getResources().getColor(resId);
       invalidate();
   }
   
   public int getIndicatorColor() {
       return this.indicatorColor;
   }
   
   public void setIndicatorHeight(int indicatorLineHeightPx) {
       this.indicatorHeight = indicatorLineHeightPx;
       invalidate();
   }
   
   public int getIndicatorHeight() {
       return indicatorHeight;
   }
   
   public void setUnderlineColor(int underlineColor) {
       this.underlineColor = underlineColor;
       invalidate();
   }
   
   public void setUnderlineColorResource(int resId) {
       this.underlineColor = getResources().getColor(resId);
       invalidate();
   }
   
   public int getUnderlineColor() {
       return underlineColor;
   }
   
   public void setDividerColor(int dividerColor) {
       this.dividerColor = dividerColor;
       invalidate();
   }
   
   public void setDividerColorResource(int resId) {
       this.dividerColor = getResources().getColor(resId);
       invalidate();
   }
   
   public int getDividerColor() {
       return dividerColor;
   }
   
   public void setUnderlineHeight(int underlineHeightPx) {
       this.underlineHeight = underlineHeightPx;
       invalidate();
   }
   
   public int getUnderlineHeight() {
       return underlineHeight;
   }
   
   public void setDividerPadding(int dividerPaddingPx) {
       this.dividerPadding = dividerPaddingPx;
       invalidate();
   }
   
   public int getDividerPadding() {
       return dividerPadding;
   }
   
   public void setScrollOffset(int scrollOffsetPx) {
       this.scrollOffset = scrollOffsetPx;
       invalidate();
   }
   
   public int getScrollOffset() {
       return scrollOffset;
   }
   
   public void setShouldExpand(boolean shouldExpand) {
       this.shouldExpand = shouldExpand;
       requestLayout();
   }
   
   public boolean getShouldExpand() {
       return shouldExpand;
   }
   
   public boolean isTextAllCaps() {
       return textAllCaps;
   }
   
   public void setAllCaps(boolean textAllCaps) {
       this.textAllCaps = textAllCaps;
   }
   
   public void setTextSize(int textSizePx) {
       this.tabTextSize = textSizePx;
       updateTabStyles();
   }
   
   public int getTextSize() {
       return tabTextSize;
   }
   
   public void setTextColor(int textColor) {
       this.tabTextColor = textColor;
       updateTabStyles();
   }
   
   public void setTextColorResource(int resId) {
       this.tabTextColor = getResources().getColor(resId);
       updateTabStyles();
   }
   
   public int getTextColor() {
       return tabTextColor;
   }
   
   public void setTypeface(Typeface typeface, int style) {
       this.tabTypeface = typeface;
       this.tabTypefaceStyle = style;
       updateTabStyles();
   }
   
   public void setTabBackground(int resId) {
       this.tabBackgroundResId = resId;
   }
   
   public int getTabBackground() {
       return tabBackgroundResId;
   }
   
   public void setTabPaddingLeftRight(int paddingPx) {
       this.tabPadding = paddingPx;
       updateTabStyles();
   }
   
   public int getTabPaddingLeftRight() {
       return tabPadding;
   }
   
   @Override
   public void onRestoreInstanceState(Parcelable state) {
       SavedState savedState = (SavedState) state;
       super.onRestoreInstanceState(savedState.getSuperState());
       currentPosition = savedState.currentPosition;
       requestLayout();
   }
   
   @Override
   public Parcelable onSaveInstanceState() {
       Parcelable superState = super.onSaveInstanceState();
       SavedState savedState = new SavedState(superState);
       savedState.currentPosition = currentPosition;
       return savedState;
   }
   
   static class SavedState extends BaseSavedState {
       int currentPosition;
   
       public SavedState(Parcelable superState) {
           super(superState);
       }
   
       private SavedState(Parcel in) {
           super(in);
           currentPosition = in.readInt();
       }
   
       @Override
       public void writeToParcel(Parcel dest, int flags) {
           super.writeToParcel(dest, flags);
           dest.writeInt(currentPosition);
       }
   
       public static final Creator<SavedState> CREATOR = new Creator<SavedState>() {
           @Override
           public SavedState createFromParcel(Parcel in) {
               return new SavedState(in);
           }
   
           @Override
           public SavedState[] newArray(int size) {
               return new SavedState[size];
           }
       };
   }
   

   }

In your layout.xml

<com.xxx.yyy.PagerSlidingTabStrip
                android:id="@+id/pager_strip"
                android:layout_width="match_parent"
                android:layout_height="48dip"
                android:background="@android:color/transparent" />

            <android.support.v4.view.ViewPager
                android:id="@+id/viewPager"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@android:color/white"></android.support.v4.view.ViewPager>

In your activity,

    PagerSlidingTabStrip mPagerSlidingTabStrip = (PagerSlidingTabStrip) findViewById(R.id.pager_strip);

            mPagerSlidingTabStrip.setShouldExpand(true);
 mPagerSlidingTabStrip.setViewPager(mViewPager);
            mPagerSlidingTabStrip.setOnPageChangeListener(this);

Create attrs.xml in your values folder and add the following code:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="PagerSlidingTabStrip">
        <attr name="pstsIndicatorColor" format="color" />
        <attr name="pstsUnderlineColor" format="color" />
        <attr name="pstsDividerColor" format="color" />
        <attr name="pstsIndicatorHeight" format="dimension" />
        <attr name="pstsUnderlineHeight" format="dimension" />
        <attr name="pstsDividerPadding" format="dimension" />
        <attr name="pstsTabPaddingLeftRight" format="dimension" />
        <attr name="pstsScrollOffset" format="dimension" />
        <attr name="pstsTabBackground" format="reference" />
        <attr name="pstsShouldExpand" format="boolean" />
        <attr name="pstsTextAllCaps" format="boolean" />
    </declare-styleable>

</resources>

Answer 3

I think main solution, it's custom buttons with ViewPager. Just create custom buttons, which switch color if click. And add ViewPager, which change current buttons. Thats all..