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
MDCのBottomAppBarのShadowの実現方法
Search
HiroYUKI Seto
January 28, 2019
Technology
0
980
MDCのBottomAppBarのShadowの実現方法
2019/1/28
potatotips #58
HiroYUKI Seto
January 28, 2019
Tweet
Share
More Decks by HiroYUKI Seto
See All by HiroYUKI Seto
Androidアプリの 安全なリファクタリングを行うパターン集
seto_hi
2
4.9k
UI TestやVisual Regression Testを コスパ良くやる
seto_hi
3
1.8k
事業支援というお仕事
seto_hi
0
410
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
400
Jetpack Compose
seto_hi
2
780
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.7k
MDCのButtonのCorner Family
seto_hi
1
190
Kyashは なぜ使いやすいのか
seto_hi
1
2.5k
Other Decks in Technology
See All in Technology
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
2
280
With Devin -AIの自律とメンバーの自立
kotanin0
2
850
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
os1ma
5
270
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
220
Kiroから考える AIコーディングツールの潮流
s4yuba
1
470
Recoil脱却の現状と挑戦
kirik
3
480
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
160
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
200
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
110
【CEDEC2025】LLMを活用したゲーム開発支援と、生成AIの利活用を進める組織的な取り組み
cygames
PRO
1
1.8k
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
120
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
420
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Rails Girls Zürich Keynote
gr2m
95
14k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
How to train your dragon (web standard)
notwaldorf
96
6.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Scaling GitHub
holman
461
140k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Transcript
גࣜձࣾϊϋφɹށ༏೭ .%$ͷ#PUUPN"QQ#BSͷ 4IBEPXͷ࣮ݱํ๏
ށ༏೭ˏTFUP@IJ גࣜձࣾϊϋφ ΞϓϦΤϯδχΞɺ ϦαʔνɺࢪࡦɺσβΠϯ
None
.BUFSJBM%FTJHO$PNQPOFOUT
#PUUPN"QQ#BS
04͕4IBEPXΛඳը͢Δ݅ w "OESPJEˢ w &MFWBUJPO͕ΑΓେ͖͍ w 7JFXͷ0VUMJOF͕ํܗ • Outline.MODE_ROUND_RECT w
·ͨತਤܗ • Outline.MODE_CONVEX_PATH
#PUUPN"QQ#BS
Ͳ͏ͬͯ ࣮ݱ͞Ε͍ͯΔͷ
#PUUPN"QQ#BS࣮ EdgeTreatment topEdgeTreatment = new BottomAppBarTopEdgeTreatment(…); ShapeAppearanceModel appBarModel = materialShapeDrawable.getShapeAppearanceModel();
appBarModel.setTopEdge(topEdgeTreatment); materialShapeDrawable.setShadowCompatibilityMode( SHADOW_COMPAT_MODE_ALWAYS); … ViewCompat. setBackground(this, materialShapeDrawable);
#PUUPN"QQ#BS5PQ&EHF5SFBUNFOU @Override public void getEdgePath(…) { … shapePath.lineTo(…) shapePath.addArc(…) shapePath.addArc(…)
shapePath.addArc(…) shapePath.lineTo(…) … }
BEE"SD BEE"SD BEE-JOF BEE-JOF #PUUPN"QQ#BS BEE"SD
.BUFSJBM4IBQF%SBXBCMFESBX MaterialShapeDrawable.drawCompatShadow → EdgeShadowOperation.draw → ShadowCompatOperation.draw → ShadowRenderer.drawCornerShadow / ShadowRenderer.drawEdgeShadow
canvas.drawBitmap(shadowLayer, …)
4IBEPX3FOEFSFSESBX$PSOFS4IBEPX … cornerShadowPaint.setShader( new RadialGradient( …, Shader.TileMode.CLAMP)); … canvas.drawArc( …,
cornerShadowPaint); …
4IBEPX3FOEFSFS ΜΓ
None
·ͱΊ w #PUUPN"QQ#BS.BUFSJBM4IBQF%SBXBCMFΛ͏ w .BUFSJBM4IBQF%SBXBCMFͷ5PQ&EHF͕ #PUUPN"QQ#BS5PQ&EHF5SFBUNFOU w #PUUPN"QQ#BS5PQ&EHF5SFBUNFOU BSDͰ͘΅ΈΛදݱ͍ͯ͠Δ w
Өͷඳը4IBEPX3FOEFSFS
None