Jak zmienić kolor tła karty podczas korzystania z TabLayout?

119

To jest mój kod w głównym działaniu

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



  }
}

A to jest mój kod w 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>

Chcę zmienić kolor tła jednej karty, gdy jest ona zaznaczona

Joel Lara
źródło

Odpowiedzi:

285

To, co ostatecznie zadziałało, jest podobne do tego, co zasugerował @ 如果 我 是 DJ, ale tabBackgroundpowinno być w layoutpliku, a nie w środku style, więc wygląda to tak:

res/layout/somefile.xml:

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

i selektor 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>
Tako
źródło
2
Możesz również dodać wartość koloru do tego atrybutu: np.: App: tabBackground: @ color / colorAccent
Val Martinez
Dziękuję za rozwiązanie. Jednak straciłem z nim domyślny efekt tętnienia.
Ken Ratanachai S.,
4
Jak mogę to zrobić programowo?
TSR
1
@TSR, jeśli nie potrzebujesz różnych kolorów dla każdej karty, możesz to zrobić tabLayout.setBackgroundColor(colorInt). Jeśli potrzebujesz go dla każdej karty, możesz wyodrębnić dzieci ze swojego TabLayout
karl
1
Aby poprawić wygląd i styl, myślę, że powinniśmy również dodać state_pressed : <item android: drawable = "@ color / tab_background_selected" android: state_pressed = "true" />
Pomyśl dwa razy kod raz
21

Możesz spróbować tego:

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

W pliku XML w tle:

<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
źródło
i jak to wdrożyć?
TSR
13

Dodaj atrybut w xml:

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

I utwórz w folderze do rysowania, 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>
Hai Rom
źródło
5

Czy próbowałeś sprawdzić API ?

Będziesz musiał utworzyć detektor dla OnTabSelectedListenerzdarzenia, a następnie, gdy użytkownik wybierze jakąkolwiek kartę, powinieneś sprawdzić, czy jest ona właściwa, a następnie zmienić kolor tła za pomocą tabLayout.setBackgroundColor(int color), lub jeśli nie jest to poprawna karta, upewnij się, że zmieniłeś z powrotem na normalny kolor ponownie tą samą metodą.

sorifiend
źródło
Tak, próbowałem, ale tabLayout zmienia kolor widżetu pełnej karty i nie mogę znaleźć metody na tabLayout.Tab, która zmienia tylko kolor karty, a inne karty pozostają w tym samym kolorze.
Joel Lara
Nie jestem w 100% pewien, czego szukasz. Jeśli chcesz pokolorować tylko treść jednej karty, możesz dodać kontener / widok wewnątrz tej karty, wtedy powinieneś być w stanie ustawić kolor tła kontenera / widoku w XML tak jak normalnie, na przykład poniższe ustawienie ustawi tło na czerwonoandroid:background=FF0000
sorifiend
Te inne pytania / odpowiedzi mogą ci pomóc: stackoverflow.com/questions/30904138/ ... i stackoverflow.com/a/30755351/1270000
sorifiend
3

Możesz to mieć w pliku 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
źródło
2

Jak znalazłem najlepszą i odpowiednią opcję dla mnie i będzie działać również z animacją.

Możesz użyć indicatorgo jako tła.

Możesz ustawić app:tabIndicatorGravity="stretch"atrybut, który będzie używany jako tło.

Przykład:

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

Mam nadzieję, że to ci pomoże.

Pratik Butani
źródło
To automatycznie przyjmuje kolor akcentu. Jak nadać mu inny kolor bez zmiany koloru akcentu. dzięki
MindRoasterMir
1
Możesz użyć app:tabIndicatorColor@MindRoasterMir
Pratik Butani
1

Możesz zmienić kolor tła lub tętnienia każdej karty w następujący sposób:

    //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));
            }
        }
    }
José Maurício
źródło
1

Po jakimś zamieszaniu w ten sposób uzyskałem pożądany wygląd (przynajmniej w emulatorze) i utrzymuje efekt tętnienia.

układ kart z selektorem kart z argumentem koloru

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

Oraz @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: To właśnie pokazał emulator, zanim dodałem colorargument do @drawable/tab_selector:

układ kart z selektorem kart bez argumentu koloru

rexxar
źródło
0

Za pomocą tego atrybutu możesz zmienić kolor tła karty

<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
źródło
-2

Jednym z najprostszych rozwiązań jest zmiana colorPrimary z pliku colors.xml.

Ahmad Sadiq
źródło