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
390
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
OpenTelemetry の Log を使いこなそう
biwashi
4
980
エンジニアリングマネージャー“お悩み相談”パネルセッション
ar_tama
1
650
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
3
390
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
6
1k
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
550
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
1
150
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
220
新規事業におけるAIリサーチの活用例
ranxxx
0
140
DatabricksのOLTPデータベース『Lakebase』に詳しくなろう!
inoutk
0
100
20150719_Amazon Nova Canvas Virtual try-onアプリ 作成裏話
riz3f7
0
130
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
120
Featured
See All Featured
Navigating Team Friction
lara
187
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Adopting Sorbet at Scale
ufuk
77
9.5k
Become a Pro
speakerdeck
PRO
29
5.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Music & Morning Musume
bryan
46
6.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Designing Experiences People Love
moore
142
24k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Designing for humans not robots
tammielis
253
25k
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