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
890
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
680
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
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.8k
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
390
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
AWSでRAGを作る法方
sonoda_mj
1
140
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
スレットハンティングについて知っておきたいこと
hacket
0
130
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
Featured
See All Featured
Practical Orchestrator
shlominoach
185
10k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Web development in the modern age
philhawksworth
203
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Debugging Ruby Performance
tmm1
71
11k
GraphQLとの向き合い方2022年版
quramy
36
13k
Infographics Made Easy
chrislema
238
18k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
4 Signs Your Business is Dying
shpigford
178
21k
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