Подтвердить что ты не робот

Изменение цвета фона вкладки 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" />

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

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

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

4b9b3361

Ответ 1

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

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

Сначала выберите селектор 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'
}

Ответ 2

Вкладки с эффектом пульсации: В дополнение к Даниэлю Нугенту ответ. Было бы красиво добавить эффект ряби на вкладки. Чтобы достичь этого, вы должны добавить эти две чертежи в папку 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>

Ответ 3

Я знаю, что его довольно поздно ответить на этот вопрос, но имеет другой и простой ответ, не создавая никакого нового фона или селектора. Вкладка-Layout имеет начальное заполнение 12dp в начале и в конце. Просто установите

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

чтобы заполнить цвет на вкладке.