android - viewpager - Color del texto de la pestaña seleccionado personalizado en SlidingTabLayout

tabs with icons

Question

Estoy usando SlidingTabLayout de google ( https://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabLayout.html ).

Funciona bien, pero lo que quiero es poner el título seleccionado en negrita y con un color diferente ...

Respecto a esta publicación: Color del texto de la pestaña personalizado no seleccionado en SlidingTabLayout

Hago un text_tab.xml en drawable con el selector:

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:color="@android:color/selected" android:state_selected="true" />
 <item android:color="@android:color/unselected" />
 </selector>

Cuando en el método populateTabStrip () puse

 tabTitleView.setTextColor(getResources().getColorStateList(R.drawable.text_tab));

El color es siempre el de no seleccionado.

Probablemente estoy haciendo algo mal, o tal vez haya otra forma de personalizar el título de la pestaña seleccionada.

Alguien tiene una idea?

Gracias

Answer 1

1) En primer lugar, cree una carpeta de colores en res (/ res / color)
2) crear el archivo xml selector.xml en la carpeta / res / color

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="@android:color/white" />
<item android:state_focused="true" android:color="@android:color/white" />
<item android:state_pressed="true" android:color="@android:color/white" />
<item android:color="#504f4f" /> 
</selector> 

3) Luego, en el método populateTabStrip () en SlidingTabLayout, coloque esto

tabTitleView.setTextColor(getResources().getColorStateList(R.color.selector));

ahora tiene un selector y puede cambiar el color del texto en cualquier evento que desee

Si eso no funciona, agregue las siguientes líneas de código.
a) en el método populateTabStrip () al final agregue esto

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

y b) cambiar el método onPageSelected () a este

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

Answer 2

Creé una función

private void setTabTextSelected(TextView textView, boolean selected){
        if (selected){
            textView.setTextColor(getResources().getColor(R.color.Black));
            textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
        }
        else{
            textView.setTextColor(getResources().getColor(R.color.ColorPrimaryDark));
            textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 13);

        }

    }

y lo llamó en dos funciones en SlidingTabLayout:

1. al final de populateTabStrip:

setTabTextSelected(tabTitleView, i == mViewPager.getCurrentItem());

2. en onPageSelected:

for (int i = 0; i < mTabStrip.getChildCount(); i++) {
              TextView textView = (TextView) mTabStrip.getChildAt(i);
              setTabTextSelected(textView, position == i);
            }

Answer 3

El problema es que el diseño deslizante no establece el estado del elemento como selected . Aquí está mi enfoque para resolver el problema.

1) Cree el selector de COLOR ( ColorStateList ) para su vista. Puedes imaginarlo de esta manera:

/res/color/tab_text_color.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/white" android:state_selected="true"/>
  <item android:color="@color/black"/>
</selector>

2) Coloque el selector creado en el textColor (u otro requerido) de la vista de su artículo:

<TextView
  ...
  android:textColor="@color/tab_text_color"
  ... />

3) Haga estos cambios en el archivo SlidingTabLayout.java:

View oldSelection = null; // new field indicating old selected item

// method to remove `selected` state from old one
private void removeOldSelection() { 
    if(oldSelection != null) {
        oldSelection.setSelected(false);
    }
}

// improve method scrollToTab() as follows
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) {

        if(positionOffset == 0 && selectedChild != oldSelection) { // added part
            selectedChild.setSelected(true);
            removeOldSelection();
            oldSelection = selectedChild;
        }

        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 void populateTabStrip() {
    removeOldSelection(); // add those two lines
    oldSelection = null;
    ...
}

Answer 4

En caso de que alguien esté interesado en otra solución sin utilizar un archivo de recursos de Selector XML, aquí hay una basada de alguna manera en la respuesta de @Panayiotis.

Agregue los siguientes métodos a la clase SlidingTabStrip.java :

public void setTabTitlesTextColor(int selectedPosition) {
    for (int i = 0; i < getChildCount(); i++) {
        if (TextView.class.isInstance(getChildAt(i))) {
            ((TextView) getChildAt(i)).setTextColor((selectedPosition == i) ? getTabColorizer().getIndicatorColor(i) : Color.argb(90, 0,0,0)  );
        }
    }
}

public SlidingTabLayout.TabColorizer getTabColorizer() {
    if (mCustomTabColorizer != null)
        return mCustomTabColorizer;
    else
        return mDefaultTabColorizer;
}

Llame al método setTabTitlesTextColor () recién creado en onPageSelected y setViewPager en la clase SlidingTabLayout.java como se muestra a continuación:

public void setViewPager(ViewPager viewPager) {
    mTabStrip.removeAllViews();

    mViewPager = viewPager;
    if (viewPager != null) {
        viewPager.setOnPageChangeListener(new InternalViewPagerListener());
        populateTabStrip();
        mTabStrip.setTabTitlesTextColor(viewPager.getCurrentItem());
    }
}

@Override
    public void onPageSelected(int position) {
        if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
            mTabStrip.onViewPagerPageChanged(position, 0f);
            scrollToTab(position, 0);
        }

        mTabStrip.setTabTitlesTextColor(position);

        if (mViewPagerPageChangeListener != null) {
            mViewPagerPageChangeListener.onPageSelected(position);
        }
    }

Answer 5

Pruebe este fragmento de código en su método onCreate ().

tabTitleView.setTabTextColors(
    getResources().getColor(R.color.active), 
    getResources().getColor(R.color.inactive));

Answer 6

Tuve un problema similar pero estaba usando una vista de título de página personalizada con un icono y un texto. Para establecer colores personalizados cuando se selecciona / deselecciona una pestaña, usé el selector creado por @PanayiotisIrakleous, así que muchas gracias a él por publicarlo.

Así es como lo hice:

1- Crea un archivo xml para el selector. Hice un archivo, slidingtab_title_color.xml y lo Drawable en la carpeta Drawable .

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@android:color/white" />
    <item android:state_focused="true" android:color="@android:color/white" />
    <item android:state_pressed="true" android:color="@android:color/white" />
    <item android:color="#504f4f" />
</selector> 

2- Abra su diseño personalizado para el título de la pestaña y agregue el archivo selector en el atributo android:textColor . Mi archivo personalizado se nombra como slidingtab_title_color.xml y tiene el siguiente código:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="10dp"
    android:background="@drawable/ripple_effect">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
<!--Adding the selector file in textColor attribute-->
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:textColor="@drawable/slidingtab_title_color"/>    
</LinearLayout>

3- (Opcional) Si desea cambiar el color del indicador y el fondo de la pestaña deslizante, agregue la siguiente línea al archivo donde está inicializando su SlidingTabLayout -

mSlidingTab.setBackgroundColor(getResources().getColor(R.color.primaryColor));
mSlidingTab.setSelectedIndicatorColors(getResources().getColor(R.color.accentColor));

Solo asegúrese de agregar estas líneas antes de configurar ViewPager para SlidingTabLayout .

Y eso es todo, así es como se verá.

Para aquellos que todavía tienen problemas, aquí está el enlace de bitbucket para la fuente del proyecto y this enlace para todos los proyectos sobre diseño de materiales.