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
900
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.7k
事業支援というお仕事
seto_hi
0
390
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.7k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
330
Jetpack Compose
seto_hi
2
700
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.5k
MDCのButtonのCorner Family
seto_hi
1
140
Kyashは なぜ使いやすいのか
seto_hi
1
2.4k
Other Decks in Technology
See All in Technology
持続可能なソフトウェア開発を支える『GitHub CI/CD実践ガイド』
tmknom
4
280
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.2k
Road to Single Activity
yurihondo
1
220
JEP 480: Structured Concurrency
aya_ebata
0
130
Analytics-Backed App Widget Development - Served with Jetpack Glance
miyabigouji
0
380
OCI で始める!! Red Hat OpenShift / Get Started OpenShift on OCI
oracle4engineer
PRO
1
160
DevRelの始め方
moongift
PRO
1
360
グイグイ系QAマネージャーの仕事
sadonosake
0
240
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
300
The XZ Backdoor Story
fr0gger
0
3.5k
AWS SAW を広めたい @四国クラウドお遍路
kazzpapa3
0
230
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
43
14k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
275
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Fireside Chat
paigeccino
31
2.9k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
YesSQL, Process and Tooling at Scale
rocio
167
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
A Tale of Four Properties
chriscoyier
155
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Music & Morning Musume
bryan
46
6k
BBQ
matthewcrist
83
9.1k
Infographics Made Easy
chrislema
239
18k
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