Як змінити колір фону вкладки під час використання 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
Val Martinez

Дякую за рішення. Однак я втратив ефект пульсацій за замовчуванням.
Ken Ratanachai S.

4
Як я можу це зробити програмно?
ТСР

1
@TSR, якщо вам не потрібні різні кольори для кожної вкладки, ви можете це зробити tabLayout.setBackgroundColor(colorInt). Якщо вам це потрібно для кожної вкладки, ви можете дістати дітей зі своєї TabLayout
karl

1
щоб покращити зовнішній вигляд, я думаю, ми також повинні додати state_press : <item android: dravable = "@ color / tab_background_selected" android: state_press = "true" />
Подумайте два рази код

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>

і як це здійснити?
ТСР

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), або якщо це не правильна вкладка, переконайтеся, що ви повернетесь до звичайний колір знову тим же методом.


Так, я спробував це, але tabLayout змінює повний колір віджета вкладки, і я не можу знайти метод на tabLayout.Tab, який змінює лише колір вкладки, а інші вкладки залишаються тим самим кольором.
Джоель Лара

Я не на 100% впевнений у тому, що ти шукаєш. Якщо ви хочете пофарбувати тіло лише однієї вкладки, тоді ви можете додати контейнер / вигляд всередині цієї вкладки, тоді ви повинні мати можливість встановити контейнер / переглянути фоновий колір у XML як звичайний, наприклад, наступне встановить фон to redandroid: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"/>

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

1
Ви можете використовувати app:tabIndicatorColor@MindRoasterMir
Пратік Бутані

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>

FYI: Це показав емулятор, перш ніж я додав 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"/>'

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.