新しいTabLayoutインジケーターの色と高さを変更する方法


124

新しいをいじってandroid.support.design.widget.TabLayoutみたところ、クラス定義に問題があることがわかりました。インジケーターの色やデフォルトの高さを変更するメソッドはありません。

調査したところ、デフォルトのインジケーターの色はAppThemeから取得されたことがわかりました。具体的にはここから:

<item name="colorAccent">#FF4081</item>

さて、私の場合、を変更するとcolorAccent、この値を背景色として使用する他のすべてのビュー、たとえばProgressBarに影響します

今、indicatorColorをcolorAccent?以外の他のものに変更する方法はありますか?

回答:


250

新しいTabLayoutが値のインジケーターの色を使用するという問題があるため、実装を詳しく調べるcolorAccentことにしましたandroid.support.design.widget.TabLayout。これをカスタマイズするパブリックメソッドがないことがわかりました。しかし、私はTabLayoutのこのスタイル仕様を見つけました:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

このスタイル仕様があれば、次のようにTabLayoutをカスタマイズできます。

<android.support.design.widget.TabLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@id/pages_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="@android:color/white"
    app:tabIndicatorHeight="4dp"/>

また、問題は解決しました。タブインジケーターの色と高さの両方をデフォルト値から変更できます。


5
Javaコードを介して「tabSelectedTextColor」(タブインジケータの色や高さではない)を変更する方法はありますか?
Prakash

2
この問題を修正するために必要な変更は、tabLayout xmlウィジェットのapp:tabIndicatorColor属性だけです。ありがとう!
Braden Holt

私はこれを親スタイルとして作成しました:parent="@style/Base.Widget.Design.TabLayout"
Ultimo_m

このソリューションは合法であることが判明
Nikhil

101

設計サポートライブラリを使用すると、XMLでそれらを変更できます。

TabLayoutインジケーターのを変更するには:

app:tabIndicatorColor="@color/color"

TabLayoutインジケーターの高さを変更するには:

app:tabIndicatorHeight="4dp"

4
この行を入れましたが、色はまだアクセントカラーです
Mahdi

@ケンジこの行がxmlのツールバービットではなく、TabLayoutに配置されていることを確信していますか?作り方が簡単に間違える:)
Wes Winn 2017年

高さのための完璧なソリューション。正常に動作します。マレク、ありがとう。
Hardik Joshi

1
代わりにグラデーションカラーを適用したい場合はどうすればよいですか?
hamza khan

35

Android開発者のコ​​メントにフォローアップを投稿することはできないので、選択したタブインジケーターの色をプログラムで設定する必要がある他の人のための最新の回答を次に示します。

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

同様に、高さ:

tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

これらのメソッドは、最近サポートライブラリのリビジョン23.0.0に追加されただけです。そのため、ソハイルセタイェシの回答はリフレクションを使用しています。


2
setSelectedTabIndicatorHeightは非推奨になりました。何を使用すればよいのでしょうか。
Michalsx


13

最新デザインサポートライブラリV23あなたは、プログラムの色と高さを設定することができます。

ちょうど高さに使用します:

TabLayout.setSelectedTabIndicatorHeight(int height)

ここに公式のjavadocがあります。

色に使用するだけです:

TabLayout.setSelectedTabIndicatorColor(int color)

ここに公式のjavadocがあります。

ここでは、Googleトラッカーで情報を見つけることができます。


色に使用する整数は何ですか?
the_prole 2015年

たとえばColor.REDなどのColorクラスを使用できます
Soumya

setSelectedTabIndicatorHeightが廃止される
APP

9

プログラムでインジケーターの色と高さを変更するには、反射を使用できます。たとえば、インジケーターの色は以下のコードを使用します。

        try {
            Field field = TabLayout.class.getDeclaredField("mTabStrip");
            field.setAccessible(true);
            Object ob = field.get(tabLayout);
            Class<?> c = Class.forName("android.support.design.widget.TabLayout$SlidingTabStrip");
            Method method = c.getDeclaredMethod("setSelectedIndicatorColor", int.class);
            method.setAccessible(true);
            method.invoke(ob, Color.RED);//now its ok
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

インジケータの高さを変更するには、「setSelectedIndicatorColor」の代わりに「setSelectedIndicatorHeight」を使用して、目的の高さで呼び出します。


1
ありがとうございました!これは私を助けます!Googleがサポートライブラリにこのためのメソッドを提供するのを忘れていたようです。
Shinta S

1
パブリック関数としてすでに利用可能な場合、なぜリフレクションを使用するのですか?developer.android.com/reference/android/support/design/widget/...
Androidデベロッパー

@SoheilSetayeshiああ、わかりました。ありがとうございました。おそらくあなたはその時の答えを更新すべきです。
Android開発者

1
しかし、これはサポートライブラリ23.0.0以下のAPIの完璧なソリューションです。ファオ!すばらしい答えです!
sud007 2016年

6

Fotoインジケーターはこれを使用します。

 tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorWhite));//put your color

6

xmlから:

app:tabIndicatorColor="#fff"

javaから:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));


0

この行をコードに挿入してください。色を変更する場合は、括弧内の色の値を変更してください。

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

0

Androidなら簡単です。

public void setTabTextColors(int normalColor, int selectedColor) {
    setTabTextColors(createColorStateList(normalColor, selectedColor));
}

だから、ただ言う

mycooltablayout.setTabTextColors(Color.parseColor("#1464f4"), Color.parseColor("#880088"));

これにより、青の通常色と紫の選択色が得られます。

高さを設定します

public void setSelectedTabIndicatorHeight(int height) {
    mTabStrip.setSelectedIndicatorHeight(height);
}

そして高さについては

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