Как изменить цвет фона вкладки при использовании TabLayout?

119

Это мой код в основном действии

public class FilterActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_filter);

    // Get the ViewPager and set it's PagerAdapter so that it can display items
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    PageAdapter pageAdapter = new PageAdapter(getSupportFragmentManager(), FilterActivity.this);
    viewPager.setAdapter(pageAdapter);

    // Give the TabLayout the ViewPager
    final TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setupWithViewPager(viewPager);



  }
}

А это мой код в XML

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        android:id="@+id/app_bar"
        layout="@layout/app_bar">
    </include>

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="fill_parent"
        style="@style/MyCustomTabLayout"
        android:layout_height="48dp"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

Я хочу изменить цвет фона одной вкладки, когда она выбрана

Джоэл Лара
источник

Ответы:

285

То, что в конечном итоге сработало для меня, похоже на то, что предложил @ 如果 我 是 DJ, но он tabBackgroundдолжен быть в layoutфайле, а не внутри style, поэтому это выглядит так:

res/layout/somefile.xml:

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

и селектор res/drawable/tab_color_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>
Тако
источник
2
Вы также можете добавить значение цвета к этому атрибуту: например: app: tabBackground: @ color / colorAccent
Вал Мартинес,
Спасибо за решение. Однако с ним я потерял стандартный эффект пульсации.
Кен Ратаначай С.
4
Как я могу сделать это программно?
TSR
1
@TSR, если вам не нужны разные цвета для каждой вкладки, вы можете это сделать tabLayout.setBackgroundColor(colorInt). Если вам это нужно для каждой вкладки, вы можете извлечь ребенок из вашего TabLayout
Карлу
1
чтобы улучшить внешний вид, я думаю, мы должны также добавить state_pressed : <item android: drawable = "@ color / tab_background_selected" android: state_pressed = "true" />
Think Twice Code Once
21

Вы можете попробовать это:

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabBackground">@drawable/background</item>
</style>

В вашем фоновом xml файле:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@color/white" />
    <item android:drawable="@color/black" />
</selector>
如果 我 是 DJ
источник
а как это реализовать?
TSR
13

Добавить атрибут в xml:

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

И создайте в папке с возможностью рисования tab_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>
Хай Ром
источник
5

Вы пробовали проверить API ?

Вам нужно будет создать прослушиватель для OnTabSelectedListenerсобытия, затем, когда пользователь выбирает любую вкладку, вы должны проверить, является ли она правильной, затем изменить цвет фона, используя tabLayout.setBackgroundColor(int color), или, если это неправильная вкладка, убедитесь, что вы вернулись к снова нормальный цвет тем же методом.

sorifiend
источник
Да, я пробовал это, но tabLayout изменяет цвет виджета полной вкладки, и я не могу найти метод в tabLayout.Tab, который изменяет только цвет вкладки, а другие вкладки остаются того же цвета.
Joel Lara
Я не уверен на 100%, что вам нужно. Если вы хотите раскрасить только тело одной вкладки, вы можете добавить контейнер / представление внутри этой вкладки, тогда вы сможете установить цвет фона контейнера / представления в XML, как обычно, например, следующее установит фон в красныйandroid:background=FF0000
sorifiend
Эти другие вопросы / ответы могут вам помочь: stackoverflow.com/questions/30904138/… и stackoverflow.com/a/30755351/1270000
sorifiend
3

Вы можете получить его в xml.

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        app:tabTextColor="@color/colorGray"
        app:tabSelectedTextColor="@color/colorWhite"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
XurajB
источник
2

Поскольку я нашел лучший и подходящий вариант для меня, он также будет работать с анимацией.

Вы можете использовать indicatorего как фон.

Вы можете установить app:tabIndicatorGravity="stretch"атрибут для использования в качестве фона.

Пример:

   <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorGravity="stretch"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/colorAccent">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Chef" />


        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="User" />

    </android.support.design.widget.TabLayout>

Надеюсь, это поможет вам.

Пратик Бутани
источник
Это автоматически принимает цвет акцента. Как придать ей другой цвет, не меняя цвет акцента. спасибо
MindRoasterMir 09
1
Вы можете использовать app:tabIndicatorColor@MindRoasterMir
Pratik Butani
1

Вы можете изменить цвет фона или ряби на каждой вкладке следующим образом:

    //set ripple color for each tab
    for(int n = 0; n < mTabLayout.getTabCount(); n++){

        View tab = ((ViewGroup)mTabLayout.getChildAt(0)).getChildAt(n);

        if(tab != null && tab.getBackground() instanceof RippleDrawable){
            RippleDrawable rippleDrawable = (RippleDrawable)tab.getBackground();
            if (rippleDrawable != null) {
                rippleDrawable.setColor(ColorStateList.valueOf(rippleColor));
            }
        }
    }
Хосе Маурисио
источник
1

После некоторой возни вот как я получил желаемый вид (по крайней мере, в эмуляторе), и он сохраняет эффект ряби.

макет вкладок с селектором вкладок с аргументом цвета

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/tab_selector"
    app:tabIconTint="@drawable/tab_selector"
    app:tabIconTintMode="src_atop"
    app:tabTextColor="@drawable/tab_selector" />

И @drawable/tab_selector:

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

К вашему сведению: это то, что показал эмулятор до того, как я добавил colorаргумент @drawable/tab_selector:

макет вкладок с селектором вкладок без аргумента цвета

Рексар
источник
0

Вы можете изменить цвет фона вкладки с помощью этого атрибута

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/CategoryTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
'android:background="@color/primary_color"/>'
M_Owais
источник
0

Один из способов найти такой индикатор вкладки:

<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@color/normal_unselected_color"
    app:tabIndicatorColor="@color/selected_color"
    app:tabIndicatorGravity="center"
    app:tabIndicatorHeight="150dp"
    app:tabSelectedTextColor="@color/selected_text_color"
    app:tabTextColor="@color/unselected_text_color">

    ..... tab items here .....

</com.google.android.material.tabs.TabLayout>

Хитрость заключается в следующем:

  • Сделайте так, чтобы индикатор табуляции выровнялся по центру
  • Сделайте высоту индикатора достаточно большой, чтобы он покрыл весь выступ

Это также заботится о плавной анимации при переключении вкладок.

Анубхаб Маджи
источник
-2

Одно из самых простых решений - изменить colorPrimary из файла colors.xml.

Ахмад Садик
источник