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
54
TabLayoutの「選択されていないインジケーター」にも色を付けるには
みっちゃん
June 14, 2023
Tweet
Share
More Decks by みっちゃん
See All by みっちゃん
パソコン音痴な私がモバイル開発界隈でぬくぬく成長している理由
mitchan
0
270
ドキュメントから adbコマンドの仕組みを読み解く
mitchan
1
190
2024年は難読化と仲良くなりたい
mitchan
0
260
STORES二年生が得た新しい視点
mitchan
0
240
Material Design とは
mitchan
0
67
勉強方法としてのコミュニティ活用
mitchan
0
710
Android端末のNFCを無効化しようとしてダメだった話
mitchan
1
4.6k
頑張ってKotlin率をちょっとあげた話
mitchan
0
180
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Thoughts on Productivity
jonyablonski
64
4.1k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Raft: Consensus for Rubyists
vanstee
134
6.5k
What's new in Ruby 2.0
geeforr
338
31k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
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