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はずなので、次のようになります。layoutstyle

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

4
これをプログラムでどのように実行できますか?
TSR 2017年

1
@TSR、タブごとに異なる色が必要ない場合は、行うことができますtabLayout.setBackgroundColor(colorInt)。タブごとに必要な場合は、TabLayoutから子を抽出できます
karl

1
ルックアンドフィールを向上させるために、私たちはまた、追加すべきだと思うstate_pressed<state_pressed =「true」を/項目は、Android:描画可能=アンドロイド「色@ / tab_background_selected」>は、
1回2回のコードを考えて

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%わかりません。1つのタブの本体のみに色を付ける場合は、そのタブ内にコンテナー/ビューを追加できます。次に、通常のように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"/>'

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.