La modifica del colore di sfondo di una scheda in TabLayout (libreria di supporto di progettazione Android) non occupa l'intero spazio di tabulazione

Question

Ho un TabLayout (libreria di supporto alla progettazione) che è legato a un ViewPager che contiene tre schede. Ho progettato un layout personalizzato e l'ho impostato su ogni scheda in TabLayout. Ho cercato di cambiare il colore di sfondo della scheda attualmente selezionata. Il colore si avvolge solo attorno al testo nella scheda ma non occupa l'intero spazio della tabulazione.

Di seguito sono riportati i frammenti di codice della mia attività e il file di layout personalizzato.

Codice attività

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

file di layout personalizzato per ogni scheda

<?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" /> 

Ecco lo screenshot delle schede dopo l'esecuzione del codice di cui sopra.

Come voi potete vedere, il colore occupa solo il testo nella scheda, ma non l'intero spazio scheda. Come ottenere questo? Qualsiasi idea/suggerimento mi aiuterebbe molto. Grazie in anticipo.

Answer 1

Definire un selettore come disegnabile e avere anche un disegno per gli stati selezionati/non selezionati.

Per questa soluzione, ho iniziato con il codice da this answer e ho aggiunto la funzionalità che modifica il colore di sfondo per la scheda corrente.

In primo luogo, il selettore, tab_background.xml nella cartella drawable:

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

Poi, tab_background_selected.xml nella cartella drawable:

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

Poi, tab_background_unselected.xml nella cartella drawable :

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

Infine, nel proprio styles.xml, specificare il sele ctor da usare, e anche specificare l'indicatore di stile scheda, dal momento che la proprietà app:tabIndicatorColor nel TabLayout sarà ora ignorato:

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

Risultato con l'esempio i colori di cui sopra:

Nota aggiuntiva:

testato con il 23.3.0 versioni dei componenti di libreria di supporto:

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

schede con effetto a catena: Oltre alla risposta di Daniel Nugent Sarebbe bello aggiungere un effetto a catena per le schede.Al fine di raggiungere questo obiettivo, è necessario aggiungere questi due drawable a drawable-v21 cartella:

tab_background_selected.xml:

<?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_background_unselected.xml:

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

so che è abbastanza tardi per rispondere a questa domanda, ma avere una risposta semplice & semplice senza creare alcun nuovo sfondo o selettore. Tab-Layout ha padding predefinito di 12dp al suo inizio & fine. Basta impostare

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

per riempire il colore nella scheda.