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
프로그래밍 방식으로 어떻게 할 수 있습니까?
TSR

1
@TSR, 각 탭에 다른 색상이 필요하지 않으면 tabLayout.setBackgroundColor(colorInt). 각 탭에 필요한 경우 TabLayout에서 하위 항목을 추출 할 수 있습니다.
karl

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>

그리고 이것을 구현하는 방법?
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)올바른 탭인지 확인한 다음을 사용하여 배경색을 변경 하거나 올바른 탭이 아닌 경우 다시 변경해야합니다. 동일한 방법으로 다시 일반 색상.


예, 시도했지만 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"/>

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

-2

가장 간단한 해결책 중 하나는 colors.xml 파일에서 colorPrimary를 변경하는 것입니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.