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
チームリードになって変わったこと
isaka1022
0
190
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Software Architecture
hschwentner
6
2.1k
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
SwiftUI Viewの責務分離
elmetal
PRO
0
140
Immutable ActiveRecord
megane42
0
130
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
Open source software: how to live long and go far
gaelvaroquaux
0
620
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
How STYLIGHT went responsive
nonsquared
98
5.3k
Documentation Writing (for coders)
carmenintech
67
4.6k
Faster Mobile Websites
deanohume
306
31k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Music & Morning Musume
bryan
46
6.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Docker and Python
trallard
44
3.3k
Six Lessons from altMBA
skipperchong
27
3.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
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