Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TabLayoutの「選択されていないインジケーター」にも色を付けるには
Search
みっちゃん
June 14, 2023
0
97
TabLayoutの「選択されていないインジケーター」にも色を付けるには
みっちゃん
June 14, 2023
Tweet
Share
More Decks by みっちゃん
See All by みっちゃん
Android値受け渡し大全 〜 設計を制する者が「渡す」を制す 〜
mitchan
0
6.2k
2024年にチャレンジしたことを振り返るぞ
mitchan
0
240
DroidKaigi初めて登壇したレポ
mitchan
1
180
実践!難読化ガイド
mitchan
0
3k
「実践!難読化ガイド」事前予告編
mitchan
0
280
画面遷移 〜iOSとAndroid〜
mitchan
0
250
パソコン音痴な私がモバイル開発界隈でぬくぬく成長している理由
mitchan
0
500
ドキュメントから adbコマンドの仕組みを読み解く
mitchan
1
330
2024年は難読化と仲良くなりたい
mitchan
0
380
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Six Lessons from altMBA
skipperchong
28
4k
Typedesign – Prime Four
hannesfritz
42
2.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Transcript
登壇者:みっちゃん TabLayoutの「選択されていないインジケー ター」にも色を付けるには
自己紹介 名前:みっちゃん 会社:STORES inc.(22卒) 役職:Androidエンジニア Twitter Qiita
このTabLayoutのデザイン、どう作りますか? 3
よ〜〜〜〜く、見ると・・・? 4
やること 5 1. 選択されたTabのインジケーターに色(黒)をつける 2. 選択されていないTabのインジケーターにも色(グレー)をつける
選択されたTabのインジケーターに色をつける 6 公式ドキュメントにやり方が書かれてる通り
選択されたTabのインジケーターに色をつける 7 命名からも分かる通り 選択されたTabのインジケーターの色を変更する
選択されていないTabのインジケーターに色をつける 8 公式ドキュメントをみても...ない?!?!
工夫してなんとかするしかない 9 結論 • Tabの下にボーダーを配置するようなdrawableを作成 • TabLayoutのbackgroundに設定
Tabの下にボーダーを配置するようなdrawableを作成 10
Tabの下にボーダーを配置するようなdrawableを作成 11
Tabの下にボーダーを配置するようなdrawableを作成 12
Tabの下にボーダーを配置するようなdrawableを作成 13
Tabの下にボーダーを配置するようなdrawableを作成 14
layer-list に対して padding を設定している 15
最終的に描画されるもの 16 さっきのサンプルコードで最終的に 描画されるもの → わかりにくいですね... 背景色が透明の四角形の底辺だけにグレー の枠線が残っている図 です...
TabLayoutのbackgroundに設定 17
お わ り(♡) 18