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
71
TabLayoutの「選択されていないインジケーター」にも色を付けるには
みっちゃん
June 14, 2023
Tweet
Share
More Decks by みっちゃん
See All by みっちゃん
DroidKaigi初めて登壇したレポ
mitchan
1
86
実践!難読化ガイド
mitchan
0
1.4k
「実践!難読化ガイド」事前予告編
mitchan
0
160
画面遷移 〜iOSとAndroid〜
mitchan
0
29
パソコン音痴な私がモバイル開発界隈でぬくぬく成長している理由
mitchan
0
330
ドキュメントから adbコマンドの仕組みを読み解く
mitchan
1
230
2024年は難読化と仲良くなりたい
mitchan
0
300
STORES二年生が得た新しい視点
mitchan
0
250
Material Design とは
mitchan
0
81
Featured
See All Featured
Producing Creativity
orderedlist
PRO
341
39k
Into the Great Unknown - MozCon
thekraken
31
1.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Gamification - CAS2011
davidbonilla
80
5k
Six Lessons from altMBA
skipperchong
26
3.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
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