Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

みっちゃん
June 14, 2023
33

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

みっちゃん

June 14, 2023
Tweet

Transcript

  1. 登壇者:みっちゃん
    TabLayoutの「選択されていないインジケー
    ター」にも色を付けるには

    View full-size slide

  2. 自己紹介
    名前:みっちゃん
    会社:STORES inc.(22卒)
    役職:Androidエンジニア
    Twitter
    Qiita

    View full-size slide

  3. このTabLayoutのデザイン、どう作りますか?
    3

    View full-size slide

  4. よ〜〜〜〜く、見ると・・・?
    4

    View full-size slide

  5. やること
    5
    1. 選択されたTabのインジケーターに色(黒)をつける
    2. 選択されていないTabのインジケーターにも色(グレー)をつける

    View full-size slide

  6. 選択されたTabのインジケーターに色をつける
    6
    公式ドキュメントにやり方が書かれてる通り

    View full-size slide

  7. 選択されたTabのインジケーターに色をつける
    7
    命名からも分かる通り
    選択されたTabのインジケーターの色を変更する

    View full-size slide

  8. 選択されていないTabのインジケーターに色をつける
    8
    公式ドキュメントをみても...ない?!?!

    View full-size slide

  9. 工夫してなんとかするしかない
    9
    結論
    ● Tabの下にボーダーを配置するようなdrawableを作成
    ● TabLayoutのbackgroundに設定

    View full-size slide

  10. Tabの下にボーダーを配置するようなdrawableを作成
    10

    View full-size slide

  11. Tabの下にボーダーを配置するようなdrawableを作成
    11

    View full-size slide

  12. Tabの下にボーダーを配置するようなdrawableを作成
    12

    View full-size slide

  13. Tabの下にボーダーを配置するようなdrawableを作成
    13

    View full-size slide

  14. Tabの下にボーダーを配置するようなdrawableを作成
    14

    View full-size slide

  15. layer-list に対して padding を設定している
    15

    View full-size slide

  16. 最終的に描画されるもの
    16
    さっきのサンプルコードで最終的に
    描画されるもの →
    わかりにくいですね...
    背景色が透明の四角形の底辺だけにグレー
    の枠線が残っている図
    です...

    View full-size slide

  17. TabLayoutのbackgroundに設定
    17

    View full-size slide

  18. お わ り(♡)
    18

    View full-size slide