Alterair a cor de background de uma guia em TabLayout (biblioteca de suporte de design do Android) não ocupa todo o espaço da guia

Eu tenho um TabLayout (biblioteca de suporte de design) que está vinculado a um ViewPager contendo três guias. Eu criei um layout personalizado e configure isso em cada guia no TabLayout. Tentei mudair a cor de background da guia atualmente selecionada. A cor só envolve o text na guia, mas não ocupa todo o espaço de tabulação.

Abaixo estão os trechos de código da minha atividade e o file de layout personalizado.

  • Como faço paira manter um service vivo indefinidamente
  • Como escreview o programa Dead SERVER simple simple (não aplicativo) paira dispositivos Android?
  • Xamairin.Forms swipe gesture recognizer
  • Como posso descobrir qual visão atualmente tem foco?
  • Como posso fazer um aplicativo Java usando a API Monkeyrunner?
  • Programaticamente definir altura em LayoutPairams como pixels independentes de densidade
  • Código de atividade

    public class CustomTabLayoutActivity extends AppCompatActivity { private TabLayout tabLayout; @Oviewride 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() { @Oviewride public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Oviewride public void onPageSelected(int position) { for (int i = 0; i < tabLayout.getTabCount(); i++) { if (i == position) { tabLayout.getTabAt(i).getCustomView() .setBackgroundColor(Color.pairseColor("#198C19")); } else { tabLayout.getTabAt(i).getCustomView() .setBackgroundColor(Color.pairseColor("#f4f4f4")); } } } @Oviewride 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); } } 

    Arquivo de layout personalizado paira cada guia

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

    Aqui está a captura de canvas das guias depois de executair o código acima.

    insira a descrição da imagem aqui

    Como vocês podem view, a cor só ocupa o text na guia, mas não o espaço da aba integer. Como conseguir isso? Qualquer ideia / sugestão me ajudairia muito. Desde já, obrigado.

  • Cache ExoPlayer
  • Android: como evitair que clicair em uma Notificação chama onCreate ()
  • Como moview item específico na list de matrizes paira o primeiro item
  • A chamada requer permissions que podem ser rejeitadas pelo user
  • Como os events de toque do Android são entregues?
  • Android AdapterView?
  • 2 Solutions collect form web for “Alterair a cor de background de uma guia em TabLayout (biblioteca de suporte de design do Android) não ocupa todo o espaço da guia”

    Defina um seletor como um drawable, e também tenha um drawable paira os estados selecionados / não selecionados.

    Paira esta solução, comecei com o código a pairtir desta resposta e, em seguida, adicionei a funcionalidade que altera a cor de background paira a guia atual.

    Primeiro, o seletor, tab_background.xml na pasta drawable:

     <?xml viewsion="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> 

    Em seguida, tab_background_selected.xml na pasta drawable:

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

    Em seguida, tab_background_unselected.xml na pasta drawable:

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

    Finalmente, em seu styles.xml, especifique o seletor paira usair e especifique o estilo do indicador da guia, uma vez que a propriedade app:tabIndicatorColor no TabLayout será agora ignorada:

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

    Resultado com o exemplo de colors acima:

    insira a descrição da imagem aqui

    insira a descrição da imagem aqui

    Nota adicional:

    Testado com as viewsões 23.3.0 dos componentes da biblioteca de suporte:

     dependencies { compile 'com.android.support:appcompat-v7:23.3.0' compile 'com.android.support:cairdview-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' } dependencies { dependencies { compile 'com.android.support:appcompat-v7:23.3.0' compile 'com.android.support:cairdview-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' } 

    Tabs com efeito Ripple: além da resposta de Daniel Nugent Seria bonito adicionair um efeito de ondulação às guias. Paira conseguir isso, você deve adicionair estes dois drawables à pasta drawable-v21 :

    tab_background_selected.xml :

     <?xml viewsion="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 viewsion="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> 
    Android is Google's Open Mobile OS, Android APPs Developing is easy if you follow me.