TabLayoutの「選択されていないインジケーター」にも色を付けるには

Transcript

1. 登壇者：みっちゃん TabLayoutの「選択されていないインジケー ター」にも色を付けるには
2. 自己紹介 名前：みっちゃん 会社：STORES inc.（22卒） 役職：Androidエンジニア Twitter Qiita
3. このTabLayoutのデザイン、どう作りますか？ 3
4. よ〜〜〜〜く、見ると・・・？ 4
5. やること 5 1. 選択されたTabのインジケーターに色(黒)をつける 2. 選択されていないTabのインジケーターにも色(グレー)をつける
6. 選択されたTabのインジケーターに色をつける 6 公式ドキュメントにやり方が書かれてる通り
7. 選択されたTabのインジケーターに色をつける 7 命名からも分かる通り 選択されたTabのインジケーターの色を変更する
8. 選択されていないTabのインジケーターに色をつける 8 公式ドキュメントをみても...ない？！？！
9. 工夫してなんとかするしかない 9 結論 • Tabの下にボーダーを配置するようなdrawableを作成 • TabLayoutのbackgroundに設定
10. Tabの下にボーダーを配置するようなdrawableを作成 10
11. Tabの下にボーダーを配置するようなdrawableを作成 11
12. Tabの下にボーダーを配置するようなdrawableを作成 12
13. Tabの下にボーダーを配置するようなdrawableを作成 13
14. Tabの下にボーダーを配置するようなdrawableを作成 14
15. layer-list に対して padding を設定している 15
16. 最終的に描画されるもの 16 さっきのサンプルコードで最終的に 描画されるもの → わかりにくいですね... 背景色が透明の四角形の底辺だけにグレー の枠線が残っている図 です...
17. TabLayoutのbackgroundに設定 17
18. お わ り（♡） 18