TabLayoutのIndicatorに関心した話

tablayoutが二連続で重なる場面があった

<tablayout>...</tablayout>
<tablayout>...</tablayout>

で実行してみたら、なんか見にくい

どうしたものかと、googleると、いい記事をみつけた。

こんなにもtablayoutのIndicatorを設定すると雰囲気が変わるものかと関心した

これが見つけた記事

https://qiita.com/ryo_mm2d/items/15c35f1fc8548a0f0f32

というわけでほぼコピペですが、実装　笑

layout

	...
	<com.google.android.material.tabs.TabLayout	    
		android:id="@+id/tabs"		    
		android:layout_width="match_parent" 
		android:layout_height="wrap_content"
		android:layout_margin="@dimen/margin_default"
		app:tabMode="fixed"
		app:tabInlineLabel="true"
		app:tabIconTint="@android:color/darker_gray"
		app:tabTextColor="@android:color/darker_gray"
		app:tabSelectedTextColor="@android:color/black"
		app:tabIndicator="@drawable/header"
		app:tabIndicatorColor="@android:color/black"
		app:tabIndicatorGravity="stretch"
		app:tabRippleColor="@null"
        >
		...
		...
		...
	</com.google.android.material.tabs.TabLayout>
	...

軽ーく解説を

marginを設定
android:layout_margin="@dimen/margin_default"

tabを動かないように、scroll不可に設定
app:tabMode="fixed"

iconをlabelの横に表示
app:tabInlineLabel="true"

iconの色を一括で揃える
app:tabIconTint="@android:color/darker_gray"

非選択時のlabelのtextの色
app:tabTextColor="@android:color/darker_gray"

選択時のlabelのtextの色
app:tabSelectedTextColor="@android:color/black"

indicatorにするdrawableの設定、色だけ変える場合は、@color/で参照
app:tabIndicator="@drawable/header"

indicatorのカラー
app:tabIndicatorColor="@android:color/black"

strechにすることで、タブの全体を覆うようにしてdrawableが配置される app:tabIndicatorGravity="stretch"

今回はrippleしてほしくなかったので、@null
app:tabRippleColor="@null"

できたやつ

できました！

応援のダウンロードやレビューお願いします！！

https://play.google.com/store/apps/details?id=io.github.povec

タブも動かしてみてください 笑