Comment modifier la couleur du texte de l'onglet sélectionné à l'aide de TabLayout à partir du code dans Android?

Question

J'utilise android.support.widget.TabLayout pour faire une vue Tab, et je veux changer la couleur du texte des onglets sélectionnés à partir du code (pas de xml ou par le style). Comment puis-je faire ceci ?

Answer 1

Si vous utilisez la bibliothèque de support design ajouter ce code à votre tabactivity

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FF0000")); 
    tabLayout.setSelectedTabIndicatorHeight((int) (5 * getResources().getDisplayMetrics().density)); 
    tabLayout.setTabTextColors(Color.parseColor("#727272"), Color.parseColor("#ffffff")); 

Cela définira la couleur du texte onglet ainsi que la couleur de l'indicateur onglet dans votre tabactivity.

Answer 2

Copiez ces deux fichiers:

1. SlidingTabLayout.java:

package com.some.package;

import android.content.Context; 
import android.graphics.Color; 
import android.graphics.Typeface; 
import android.os.Build; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.util.AttributeSet; 
import android.util.SparseArray; 
import android.util.TypedValue; 
import android.view.Gravity; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.widget.HorizontalScrollView; 
import android.widget.LinearLayout; 
import android.widget.TextView; 


/** 
* To be used with ViewPager to provide a tab indicator component which give constant feedback as to 
* the user's scroll progress. 
* <p> 
* To use the component, simply add it to your view hierarchy. Then in your 
* {@link android.app.Activity} or {@link android.support.v4.app.Fragment} call 
* {@link #setViewPager(ViewPager)} providing it the ViewPager this layout is being used for. 
* <p> 
* The colors can be customized in two ways. The first and simplest is to provide an array of colors 
* via {@link #setSelectedIndicatorColors(int...)}. The 
* alternative is via the {@link TabColorizer} interface which provides you complete control over 
* which color is used for any individual position. 
* <p> 
* The views used as tabs can be customized by calling {@link #setCustomTabView(int, int)}, 
* providing the layout ID of your custom layout. 
*/ 
public class SlidingTabLayout extends HorizontalScrollView { 
    /** 
    * Allows complete control over the colors drawn in the tab layout. Set with 
    * {@link #setCustomTabColorizer(TabColorizer)}. 
    */ 
    public interface TabColorizer { 

     /** 
     * @return return the color of the indicator used when {@code position} is selected. 
     */ 
     int getIndicatorColor(int position); 

    } 

    private static final int TITLE_OFFSET_DIPS = 24; 
    private static final int TAB_VIEW_PADDING_DIPS = 16; 
    private static final int TAB_VIEW_SIDE_PADDING_DIPS = 18; 

    private static final int TAB_VIEW_TEXT_SIZE_SP = 12; 

    private int mTitleOffset; 

    private int mTabViewLayoutId; 
    private int mTabViewTextViewId; 
    private boolean mDistributeEvenly; 

    private ViewPager mViewPager; 
    private SparseArray<String> mContentDescriptions = new SparseArray<String>(); 
    private ViewPager.OnPageChangeListener mViewPagerPageChangeListener; 

    private final SlidingTabStrip mTabStrip; 
    Context mContext; 

    public SlidingTabLayout(Context context) { 
     this(context, null); 
     mContext = context; 
    } 

    public SlidingTabLayout(Context context, AttributeSet attrs) { 
     this(context, attrs, 0); 
     mContext = context; 
    } 

    public SlidingTabLayout(Context context, AttributeSet attrs, int defStyle) { 
     super(context, attrs, defStyle); 

     // Disable the Scroll Bar 
     setHorizontalScrollBarEnabled(false); 
     // Make sure that the Tab Strips fills this View 
     setFillViewport(true); 

     mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density); 

     mTabStrip = new SlidingTabStrip(context); 
     addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); 
     mContext = context; 
    } 

    /** 
    * Set the custom {@link TabColorizer} to be used. 
    * 
    * If you only require simple custmisation then you can use 
    * {@link #setSelectedIndicatorColors(int...)} to achieve 
    * similar effects. 
    */ 
    public void setCustomTabColorizer(TabColorizer tabColorizer) { 
     mTabStrip.setCustomTabColorizer(tabColorizer); 
    } 

    public void setDistributeEvenly(boolean distributeEvenly) { 
     mDistributeEvenly = distributeEvenly; 
    } 

    /** 
    * Sets the colors to be used for indicating the selected tab. These colors are treated as a 
    * circular array. Providing one color will mean that all tabs are indicated with the same color. 
    */ 
    public void setSelectedIndicatorColors(int... colors) { 
     mTabStrip.setSelectedIndicatorColors(colors); 
    } 

    /** 
    * Set the {@link ViewPager.OnPageChangeListener}. When using {@link SlidingTabLayout} you are 
    * required to set any {@link ViewPager.OnPageChangeListener} through this method. This is so 
    * that the layout can update it's scroll position correctly. 
    * 
    * @see ViewPager#setOnPageChangeListener(ViewPager.OnPageChangeListener) 
    */ 
    public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) { 
     mViewPagerPageChangeListener = listener; 
    } 

    /** 
    * 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 
    */ 
    public void setCustomTabView(int layoutResId, int textViewId) { 
     mTabViewLayoutId = layoutResId; 
     mTabViewTextViewId = textViewId; 
    } 

    /** 
    * Sets the associated view pager. Note that the assumption here is that the pager content 
    * (number of tabs and tab titles) does not change after this call has been made. 
    */ 
    public void setViewPager(ViewPager viewPager) { 
     mTabStrip.removeAllViews(); 

     mViewPager = viewPager; 
     if (viewPager != null) { 

      InternalViewPagerListener listener = new InternalViewPagerListener(); 
      viewPager.setOnPageChangeListener(listener); 
      populateTabStrip(); 
      listener.onPageSelected(0); 
     } 
    } 

    /** 
    * Create a default view to be used for tabs. This is called if a custom tab view is not set via 
    * {@link #setCustomTabView(int, int)}. 
    */ 
    protected TextView createDefaultTabView(Context context) { 
     Typeface typeFace; 

     if (Build.VERSION.SDK_INT < Build.VERSION_CODES.ICE_CREAM_SANDWICH) { 
      typeFace = //set your typeface here 
     }else{ 
      typeFace = //set your typeface here 
     } 

     TextView textView= new TextView(context); 

     textView.setTextColor(context.getResources().getColor(R.color.inactive_tab_color)); 
     textView.setGravity(Gravity.CENTER); 
     textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP); 
     textView.setTypeface(typeFace); 
     textView.setLayoutParams(new LinearLayout.LayoutParams(
       LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.HORIZONTAL)); 

     TypedValue outValue = new TypedValue(); 
     getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, 
       outValue, true); 
     textView.setBackgroundResource(outValue.resourceId); 
     textView.setAllCaps(true); 

     int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density); 
     int sidePadding = (int) (TAB_VIEW_SIDE_PADDING_DIPS * getResources().getDisplayMetrics().density); 
     textView.setPadding(sidePadding, padding, sidePadding, padding); 

     return textView; 
    } 

    private void populateTabStrip() { 
     final PagerAdapter adapter = mViewPager.getAdapter(); 
     final View.OnClickListener tabClickListener = new TabClickListener(); 

     for (int i = 0; i < adapter.getCount(); i++) { 
      View tabView = null; 
      TextView tabTitleView = null; 

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

      if (tabView == null) { 
       tabView = createDefaultTabView(getContext()); 
      } 

      if (tabTitleView == null && TextView.class.isInstance(tabView)) { 
       tabTitleView = (TextView) tabView; 
      } 

      if (mDistributeEvenly) { 
       LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams(); 
       lp.width = 0; 
       lp.weight = 1; 
      } 

      tabTitleView.setText(adapter.getPageTitle(i)); 
      tabView.setOnClickListener(tabClickListener); 
      String desc = mContentDescriptions.get(i, null); 
      if (desc != null) { 
       tabView.setContentDescription(desc); 
      } 

      mTabStrip.addView(tabView); 
      if (i == mViewPager.getCurrentItem()) { 
       tabView.setSelected(true); 
      } 
     } 
    } 

    public void setContentDescription(int i, String desc) { 
     mContentDescriptions.put(i, desc); 
    } 

    @Override 
    protected void onAttachedToWindow() { 
     super.onAttachedToWindow(); 

     if (mViewPager != null) { 
      scrollToTab(mViewPager.getCurrentItem(), 0); 
     } 
    } 

    private void scrollToTab(int tabIndex, int positionOffset) { 
     final int tabStripChildCount = mTabStrip.getChildCount(); 
     if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) { 
      return; 
     } 

     View selectedChild = mTabStrip.getChildAt(tabIndex); 
     if (selectedChild != null) { 
      int targetScrollX = selectedChild.getLeft() + positionOffset; 

      if (tabIndex > 0 || positionOffset > 0) { 
       // If we're not at the first child and are mid-scroll, make sure we obey the offset 
       targetScrollX -= mTitleOffset; 
      } 

      scrollTo(targetScrollX, 0); 
     } 
    } 

    private class InternalViewPagerListener implements ViewPager.OnPageChangeListener { 
     private int mScrollState; 

     @Override 
     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
      int tabStripChildCount = mTabStrip.getChildCount(); 
      if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) { 
       return; 
      } 

      mTabStrip.onViewPagerPageChanged(position, positionOffset); 

      View selectedTitle = mTabStrip.getChildAt(position); 

      int extraOffset = (selectedTitle != null) 
        ? (int) (positionOffset * selectedTitle.getWidth()) 
        : 0; 
      scrollToTab(position, extraOffset); 

      if (mViewPagerPageChangeListener != null) { 
       mViewPagerPageChangeListener.onPageScrolled(position, positionOffset, 
         positionOffsetPixels); 
      } 



     } 

     @Override 
     public void onPageScrollStateChanged(int state) { 
      mScrollState = state; 

      if (mViewPagerPageChangeListener != null) { 
       mViewPagerPageChangeListener.onPageScrollStateChanged(state); 
      } 
     } 

     @Override 
     public void onPageSelected(int position) { 

      if (mScrollState == ViewPager.SCROLL_STATE_IDLE) { 
       mTabStrip.onViewPagerPageChanged(position, 0f); 
       scrollToTab(position, 0); 
      } 
      for (int i = 0; i < mTabStrip.getChildCount(); i++) { 
       mTabStrip.getChildAt(i).setSelected(position == i); 
      } 
      if (mViewPagerPageChangeListener != null) { 
       mViewPagerPageChangeListener.onPageSelected(position); 
      } 

      View selectedTitle = mTabStrip.getChildAt(position); 
      ((TextView) selectedTitle).setTextColor(Color.WHITE); 

      int remainingTabs = mTabStrip.getChildCount() - position; 
      for(int i=0 ;i< mTabStrip.getChildCount(); i++){ 
       if(i == position) 
        continue; 

       View remainingTitles = mTabStrip.getChildAt(i); 
       ((TextView) remainingTitles).setTextColor(mContext.getResources().getColor(R.color.inactive_tab_color)); 
      } 

     } 

    } 

    private class TabClickListener implements View.OnClickListener { 
     @Override 
     public void onClick(View v) { 
      for (int i = 0; i < mTabStrip.getChildCount(); i++) { 
       if (v == mTabStrip.getChildAt(i)) { 
        mViewPager.setCurrentItem(i); 
        return; 
       } 
      } 
     } 
    } 

} 

2. SlidingTabStrip.java:

   paquet com.some.package;

   import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; importez android.util.TypedValue; importer android.view.View; importez android.widget.LinearLayout;

   classe SlidingTabStrip étend LinearLayout {

   private static final int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 0; 
   private static final byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0x26; 
   private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 2; 
   private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xFF33B5E5; 
   
   private final int mBottomBorderThickness; 
   private final Paint mBottomBorderPaint; 
   
   private final int mSelectedIndicatorThickness; 
   private final Paint mSelectedIndicatorPaint; 
   
   private int mSelectedPosition; 
   private float mSelectionOffset; 
   
   private SlidingTabLayout.TabColorizer mCustomTabColorizer; 
   private final SimpleTabColorizer mDefaultTabColorizer; 
   
   SlidingTabStrip(Context context) { 
       this(context, null); 
   } 
   
   SlidingTabStrip(Context context, AttributeSet attrs) { 
       super(context, attrs); 
       setWillNotDraw(false); 
   
       final float density = getResources().getDisplayMetrics().density; 
   
       TypedValue outValue = new TypedValue(); 
       context.getTheme().resolveAttribute(android.R.attr.colorForeground, outValue, true); 
       final int themeForegroundColor = outValue.data; 
   
       int defaultBottomBorderColor = setColorAlpha(themeForegroundColor, 
         DEFAULT_BOTTOM_BORDER_COLOR_ALPHA); 
   
       mDefaultTabColorizer = new SimpleTabColorizer(); 
       mDefaultTabColorizer.setIndicatorColors(DEFAULT_SELECTED_INDICATOR_COLOR); 
   
       mBottomBorderThickness = (int) (DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS * density); 
       mBottomBorderPaint = new Paint(); 
       mBottomBorderPaint.setColor(defaultBottomBorderColor); 
   
       mSelectedIndicatorThickness = (int) (SELECTED_INDICATOR_THICKNESS_DIPS * density); 
       mSelectedIndicatorPaint = new Paint(); 
   } 
   
   void setCustomTabColorizer(SlidingTabLayout.TabColorizer customTabColorizer) { 
       mCustomTabColorizer = customTabColorizer; 
       invalidate(); 
   } 
   
   void setSelectedIndicatorColors(int... colors) { 
       // Make sure that the custom colorizer is removed 
       mCustomTabColorizer = null; 
       mDefaultTabColorizer.setIndicatorColors(colors); 
       invalidate(); 
   } 
   
   void onViewPagerPageChanged(int position, float positionOffset) { 
       mSelectedPosition = position; 
       mSelectionOffset = positionOffset; 
       invalidate(); 
   } 
   
   @Override 
   protected void onDraw(Canvas canvas) { 
       final int height = getHeight(); 
       final int childCount = getChildCount(); 
       final SlidingTabLayout.TabColorizer tabColorizer = mCustomTabColorizer != null 
         ? mCustomTabColorizer 
         : mDefaultTabColorizer; 
   
       // Thick colored underline below the current selection 
       if (childCount > 0) { 
        View selectedTitle = getChildAt(mSelectedPosition); 
        int left = selectedTitle.getLeft(); 
        int right = selectedTitle.getRight(); 
        int color = tabColorizer.getIndicatorColor(mSelectedPosition); 
   
        if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1)) { 
         int nextColor = tabColorizer.getIndicatorColor(mSelectedPosition + 1); 
         if (color != nextColor) { 
          color = blendColors(nextColor, color, mSelectionOffset); 
         } 
   
         // Draw the selection partway between the tabs 
         View nextTitle = getChildAt(mSelectedPosition + 1); 
         left = (int) (mSelectionOffset * nextTitle.getLeft() + 
           (1.0f - mSelectionOffset) * left); 
         right = (int) (mSelectionOffset * nextTitle.getRight() + 
           (1.0f - mSelectionOffset) * right); 
        } 
   
        mSelectedIndicatorPaint.setColor(color); 
   
        canvas.drawRect(left, height - mSelectedIndicatorThickness, right, 
          height, mSelectedIndicatorPaint); 
       } 
   
       // Thin underline along the entire bottom edge 
       canvas.drawRect(0, height - mBottomBorderThickness, getWidth(), height, mBottomBorderPaint); 
   
   } 
   
   /** 
   * Set the alpha value of the {@code color} to be the given {@code alpha} value. 
   */ 
   private static int setColorAlpha(int color, byte alpha) { 
       return Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color)); 
   } 
   
   /** 
   * Blend {@code color1} and {@code color2} using the given ratio. 
   * 
   * @param ratio of which to blend. 1.0 will return {@code color1}, 0.5 will give an even blend, 
   *    0.0 will return {@code color2}. 
   */ 
   private static int blendColors(int color1, int color2, float ratio) { 
       final float inverseRation = 1f - ratio; 
       float r = (Color.red(color1) * ratio) + (Color.red(color2) * inverseRation); 
       float g = (Color.green(color1) * ratio) + (Color.green(color2) * inverseRation); 
       float b = (Color.blue(color1) * ratio) + (Color.blue(color2) * inverseRation); 
       return Color.rgb((int) r, (int) g, (int) b); 
   } 
   
   private static class SimpleTabColorizer implements SlidingTabLayout.TabColorizer { 
       private int[] mIndicatorColors; 
   
       @Override 
       public final int getIndicatorColor(int position) { 
        return mIndicatorColors[position % mIndicatorColors.length]; 
       } 
   
       void setIndicatorColors(int... colors) { 
        mIndicatorColors = colors; 
       } 
   } 
   

   }

Je ne l'ai pas écrit ces deux fichiers ci-dessus. Je l'ai pris sur le site officiel de documentation Android.

Maintenant, prenez le widget SlidingTabLayout dans votre fichier XML de mise en page.

et enfin ajouter ce code à votre activité/Fragment:

CONTENT = new String [] { "A", "B", "C", "D"};

mPager = (ViewPager) view.findViewById(R.id.pager); 
SlidingTabsAdapter adapter =new SlidingTabsAdapter(getChildFragmentManager()); 

     mPager.setAdapter(adapter); 

     mPager.setCurrentItem(0); 

     slidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs); 
     slidingTabLayout.setDistributeEvenly(true); 
     slidingTabLayout.setSelectedIndicatorColors(getResources().getColor(someColorID)); 
     slidingTabLayout.setViewPager(mPager); 

SlidingTabsAdapter private class étend FragmentPagerAdapter {

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

@Override 
public Fragment getItem(int position) { 

    Fragment fragment; 
    Bundle b; 

    switch (position){ 

     case 0: 

      fragment = new FragmentA(); 

     break; 

     case 1: 

      fragment = new FragmentB(); 

     break; 

     case 2: 

      fragment = new FragmentC(); 

     break; 

     case 3: 

      fragment = new FragmentD(); 

     break; 

     default: 

      fragment = new FragmentZ(); 

    } 

    return fragment; 
} 

@Override 
public CharSequence getPageTitle(int position) { 
    return CONTENT[position % CONTENT.length].toUpperCase(); 
} 

@Override 
public int getCount() { 
    return CONTENT.length; 
} 

}

Answer 3

Il est si simple en utilisant XML. Ajoutez simplement les 2 attributs suivants dans la disposition de votre onglet.

app:tabSelectedTextColor="@color/color_primary_text" 
app:tabTextColor="@color/color_secondary_text" 

Ainsi, votre code ressemblerait à quelque chose comme ça.

<android.support.design.widget.TabLayout 
    android:id="@+id/tab_layout" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true" 
    android:layout_alignParentStart="true" 
    android:layout_gravity="bottom" 
    android:background="@color/button_background" 
    android:fillViewport="true" 
    app:tabBackground="@drawable/fixed_bottom_button" 
    app:tabIndicatorColor="@color/color_primary_text" 
    app:tabMode="fixed" 
    app:tabSelectedTextColor="@color/color_primary_text" 
    app:tabTextColor="@color/color_secondary_text" /> 

Answer 4

S'il vous plaît consulter ci-dessous réponse

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
     @Override 
     public void onTabSelected(TabLayout.Tab tab) { 
      View view = tab.getCustomView(); 
      RelativeLayout relativeLayout = (RelativeLayout) view.findViewById(R.id.layout_background); 
      relativeLayout.setBackgroundColor(ContextCompat.getColor(getActivity(), R.color.white)); 
      TypefacedTextView selectedText = (TypefacedTextView) view.findViewById(R.id.txt_tab_name); 
      selectedText.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary)); 

     } 

     @Override 
     public void onTabUnselected(TabLayout.Tab tab) { 
      View view = tab.getCustomView(); 
      RelativeLayout relativeLayout = (RelativeLayout) view.findViewById(R.id.layout_background); 
      relativeLayout.setBackgroundColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary)); 
      TypefacedTextView selectedText = (TypefacedTextView) view.findViewById(R.id.txt_tab_name); 
      selectedText.setTextColor(ContextCompat.getColor(getActivity(), R.color.white)); 
     } 

     @Override 
     public void onTabReselected(TabLayout.Tab tab) { 

     } 
    }); 

où tabLayout est objet de TabLayout classe