studio - Cambiar el color de fondo de una pestaña en TabLayout(biblioteca de soporte de diseño de Android) no ocupa todo el espacio de la pestaña

tablayout android github

Question

Tengo un TabLayout (biblioteca de soporte de diseño) que está vinculado a un ViewPager que contiene tres pestañas. Diseñé un diseño personalizado y lo configuré para cada pestaña en TabLayout. He estado tratando de cambiar el color de fondo de la pestaña seleccionada actualmente. El color solo se envuelve alrededor del texto en la pestaña pero no ocupa todo el espacio de la pestaña.

A continuación se muestran los fragmentos de código de mi actividad y el archivo de diseño personalizado.

Código de actividad

public class CustomTabLayoutActivity extends AppCompatActivity {

private TabLayout tabLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_custom_tab_layout);
    tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
    setupViewPager(viewPager);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    setupTabLayout();
    viewPager.setCurrentItem(0);
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            for (int i = 0; i < tabLayout.getTabCount(); i++) {
                if (i == position) {
                    tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#198C19"));
                } else {
                    tabLayout.getTabAt(i).getCustomView().setBackgroundColor(Color.parseColor("#f4f4f4"));
                }
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });
}


private void setupViewPager(ViewPager viewPager) {
    CustomViewPagerAdapter pagerAdapter = new CustomViewPagerAdapter(getSupportFragmentManager());
    pagerAdapter.addFragments(new OneFragment(), "ONE");
    pagerAdapter.addFragments(new OneFragment(), "TWO");
    pagerAdapter.addFragments(new OneFragment(), "THREE");
    viewPager.setAdapter(pagerAdapter);
}

private void setupTabLayout() {

    TextView customTab1 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    TextView customTab2 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    TextView customTab3 = (TextView) LayoutInflater.from(CustomTabLayoutActivity.this)
            .inflate(R.layout.custom_tab_layout, null);
    customTab1.setText("ONE");
    tabLayout.getTabAt(0).setCustomView(customTab1);
    customTab2.setText("TWO");
    tabLayout.getTabAt(1).setCustomView(customTab2);
    customTab3.setText("THREE");
    tabLayout.getTabAt(2).setCustomView(customTab3);
}
}

Archivo de diseño personalizado para cada pestaña

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/tab"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_gravity="center"
   android:background="#ffffff"
   android:text="Test"
   android:textColor="@android:color/black"
   android:textSize="20sp" />

Aquí está la captura de pantalla de las pestañas después de ejecutar el código anterior.

Como pueden ver, el color solo ocupa el texto en la pestaña pero no todo el espacio de la pestaña. ¿Cómo lograr esto? Cualquier idea / sugerencia me ayudaría mucho. Gracias por adelantado.

Answer 1

Defina un selector como dibujable, y también tenga un dibujable para los estados seleccionados / no seleccionados.

Para esta solución, comencé con el código de esta respuesta y luego agregué la funcionalidad que cambia el color de fondo para la pestaña actual.

Primero, el selector, tab_background.xml en la carpeta tab_background.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_background_selected" android:state_selected="true" />
    <item android:drawable="@drawable/tab_background_unselected" android:state_selected="false" android:state_focused="false" android:state_pressed="false" />
</selector>

Luego, tab_background_selected.xml en la carpeta tab_background_selected.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#d13fdd1a" />
</shape>

Luego, tab_background_unselected.xml en la carpeta tab_background_unselected.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#3F51B5" />
</shape>

Finalmente, en su styles.xml , especifique el selector a usar, y también especifique el estilo del indicador de tabulación, ya que la propiedad app:tabIndicatorColor en TabLayout ahora será ignorada:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabBackground">@drawable/tab_background</item>
    <item name="tabIndicatorColor">#ff00ff</item>
    <item name="tabIndicatorHeight">2dp</item>
</style>

Resultado con los colores de ejemplo anteriores:

Nota adicional:

Probado con las versiones 23.3.0 de los componentes de la biblioteca de soporte:

dependencies {
    compile ''com.android.support:appcompat-v7:23.3.0''
    compile ''com.android.support:cardview-v7:23.3.0''
    compile ''com.android.support:recyclerview-v7:23.3.0''
    compile ''com.android.support:design:23.3.0''
    compile ''com.android.support:support-v4:23.3.0''
}

Answer 2

Sé que es bastante tarde para responder esta pregunta, pero tengo una respuesta diferente y simple sin crear ningún fondo o selector nuevo. El diseño de tabulación tiene un relleno predeterminado de 12dp al inicio y al final. Solo establece

app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"

para rellenar el color en tu pestaña.

Answer 3

Deberías usar:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#63D25B"> <!-- ripple color -->
    <item android:drawable="#d13fdd1a" /> <!-- normal color -->
</ripple>

tab_selector.xml (en la carpeta dibujable):

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#606FC7"> <!-- ripple color -->
    <item android:drawable="#3F51B5" /> <!-- normal color -->
</ripple>

Answer 4

Pestañas con efecto dominó: además de la respuesta de Daniel Nugent Sería hermoso agregar un efecto dominó a las pestañas. Para lograr esto, debe agregar estos dos elementos drawable-v21 carpeta drawable-v21 :

tab_background_selected.xml :

app:tabBackground="@drawable/tab_selector"
android:background="@color/colorNormal"

tab_background_unselected.xml :

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