Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Design System in Android
Mahdi Nouri
August 22, 2019
Programming
0
240
Design System in Android
Presentation Video on YouTube:
https://youtu.be/NDCiq9rQn5c
Mahdi Nouri
August 22, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
Android入門
hn410
0
300
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
290
スモールチームがAmazon Cognitoでコスパよく作るサービス間連携認証
tacke_jp
2
160
New Relicを使った Observabilityの実現方法と活用例 / gocon 2022 spring after talk
budougumi0617
0
1k
アプリのログをチーム外で活用してもらうためにやったこと
shotakashihara
0
160
2022 FrontEnd Training
mixi_engineers
1
150
Learning DDD輪読会#4 / Learning DDD Book Club #4
suzushin54
1
110
人類には難しいZynqで組み込みRust
ikemori
0
480
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
3
1.6k
Git Rebase
bkuhlmann
7
1k
プログラミングを勉強したいと言われたら
yuba_4
0
380
tfcon2022_Web3Dひとめぐり.pdf
emadurandal
0
790
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
343
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
In The Pink: A Labor of Love
frogandcode
130
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Documentation Writing (for coders)
carmenhchung
48
2.5k
What the flash - Photography Introduction
edds
61
9.8k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Designing Experiences People Love
moore
130
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Transcript
Design System In Android
Who am I? phelat phelat_mahdi
Chapter I What’s a Design System?
What’s a Design System? g
What’s a Design System? g C Component
What’s a Design System? Component g C Component Component Component
Component
Chapter II Benefits of having a Design System
Consistency “Perfectly balanced as all things should be” - Thanos
Productivity “If you spend too much time thinking about a
thing, you'll never get it done.” - Bruce Lee
Common Language “Meow” means “Woof” in cat.” - George Carlin
Material Design Material is an adaptable system of guidelines, components
and tools.
Sonnat: Developer’s Perspective Chapter III
C Divar C Sonnat
colors.xml <color name="brand_primary">#A62626</color> <color name="brand_secondary">#8FA62626</color> <color name="brand_hint">#52A62626</color> <color name=“brand_divider">#1FA62626</color> colors.xml
colors.xml <color name=“error_primary">#FF0000</color> <color name="warning_primary">#E65100</color> <color name=“warning_secondary">#FBC02D</color> <color name="success_secondary">#7CB342</color> <color
name="success_primary">#2E7D32</color> <color name="message_primary">#D7F5FF</color> <color name="message_hint">#3DD7F5FF</color>
fontsizes.xml <dimen name="title_1_font">20sp</dimen> <dimen name="title_2_font">18sp</dimen> <dimen name="regular_font">16sp</dimen> <dimen name="small_font">14sp</dimen> <dimen
name="tiny_font">12sp</dimen>
Sketch Component bar / nav / NavBar Android Package bar
/ nav Component Name NavBar Shape Drawable shape_nav_bar_gradient Selector Drawable - States navigable[true/false], enableGradient[true, false], enableSearch[true, false] Attributes alpha, title, subtitle, actions
NavBar.kt class NavBar : ConstraintLayout, Component, TextWatcher { . .
. }
NavBar.kt private lateinit var gradientBackground: View private lateinit var background:
View private lateinit var navigation: AppCompatImageView private lateinit var actionContainer: LinearLayout private lateinit var title: AppCompatTextView private lateinit var subtitle: AppCompatTextView private lateinit var searchBar: AppCompatEditText private lateinit var clearSearchIcon: AppCompatImageView
NavBar.kt private fun initActionsContainer() { val params = LayoutParams( LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT ).apply { topToTop = LayoutParams.PARENT_ID leftToLeft = LayoutParams.PARENT_ID bottomToBottom = LayoutParams.PARENT_ID } actionContainer = LinearLayout(context).apply { id = ACTION_CONTAINER_ID gravity = Gravity.CENTER_VERTICAL orientation = LinearLayout.HORIZONTAL } addView(actionContainer, params) }
NavBar.kt override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { super.onMeasure(widthMeasureSpec, heightMeasureSpec)
if (measuredHeight != dpToPx(56)) { initLayoutParams() } }
attrs.xml <declare-styleable name="NavBar"> <!-- STATES --> <attr name="navigable" format="boolean" />
<attr name="enableGradient" format="boolean" /> <attr name="animateLayoutChanges" format="boolean" /> <attr name="enableSearch" format="boolean" /> <!-- ATTRIBUTES --> <attr name="title" /> <attr name="subtitle" /> <attr name="alpha" format="float" /> </declare-styleable>
None
None
None
Chapter IV Accessibility
None
activity_main.xml <ImageView android:id="@+id/shareIcon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="@string/string_action_search_label" app:srcCompat="@drawable/ic_search_icon_secondary_24dp" />
InfoRowUnExpandable
None
https:!//contrastratio.github.io
Thank You https:!//jobs.cafebazaar.ir