Изменение цвета фона вкладки TabLayout (библиотека поддержки дизайна Android) не занимает всего пространства табуляции

У меня есть TabLayout (библиотека поддержки дизайна), которая привязана к ViewPager, содержащему три вкладки. Я разработал собственный макет и установил его на каждую вкладку TabLayout. Я пытаюсь изменить цвет фона выбранной вкладки. Цвет только обтекает текст на вкладке, но не занимает все пространство табуляции.

Ниже приведены фрагменты кода моей активности и файл настраиваемого макета.

Код операции

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

Пользовательский файл макета для каждой вкладки

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

Вот скриншот вкладок после запуска вышеуказанного кода.

Введите описание изображения здесь

Как вы, ребята, видите, цвет занимает только текст на вкладке, но не все пространство табуляции. Как достичь этого? Любые идеи / предложения мне очень помогли бы. Заранее спасибо.

Solutions Collecting From Web of "Изменение цвета фона вкладки TabLayout (библиотека поддержки дизайна Android) не занимает всего пространства табуляции"

Определите селектор как выталкиваемый, а также выберете для выбранных / невыбранных состояний.

Для этого решения я начал с кода из этого ответа , а затем добавил функциональность, которая меняет цвет фона для текущей вкладки.

Во-первых, селектор, 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> 

Затем, 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> 

Затем, 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> 

Наконец, в вашем файле styles.xml укажите используемый селектор, а также укажите стиль индикатора вкладки, так как свойство app:tabIndicatorColor в TabLayout теперь будет игнорироваться:

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

Результат с примером цветов выше:

Введите описание изображения здесь

Введите описание изображения здесь

Дополнительное примечание:

Протестировано с 23.3.0 версиями компонентов библиотеки поддержки:

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

Вкладки с эффектом пульсации: в дополнение к ответу Даниэля Нуджента Было бы красиво добавить эффект пульсации на вкладки. Чтобы добиться этого, вы должны добавить эти две drawable-v21 папку drawable-v21 :

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>