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
Design System in Android
Search
Mahdi Nouri
August 22, 2019
Programming
0
400
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
WindowInsetsだってテストしたい
ryunen344
1
190
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
330
Benchmark
sysong
0
250
Effect の双対、Coeffect
yukikurage
5
1.4k
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
690
VS Code Update for GitHub Copilot
74th
1
310
ニーリーにおけるプロダクトエンジニア
nealle
0
110
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
300
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
310
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
190
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Pragmatic Product Professional
lauravandoore
35
6.7k
KATA
mclloyd
29
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
33
5.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Site-Speed That Sticks
csswizardry
10
660
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Gamification - CAS2011
davidbonilla
81
5.3k
Navigating Team Friction
lara
187
15k
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