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
340
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
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
Open Source Swift Workshop - Foundation and first party libraries
ikesyo
0
100
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
Docker ハンズオン / docker-hands-on
suzukihoge
51
16k
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
480
GitHub Copilot Tips and Tricks
yuichielectric
26
7.4k
Ruby製社内ツールのGo移行
bgpat
2
260
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
340
Creating Retro-Style Photos Using Swift
ski
1
340
WebComponentsで フレームワークを1ページに共存させる
webuilder240
0
150
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
1.1k
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
510
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
24
5.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Docker and Python
trallard
33
2.6k
4 Signs Your Business is Dying
shpigford
174
21k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
The Invisible Side of Design
smashingmag
293
49k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Fireside Chat
paigeccino
19
2.6k
Facilitating Awesome Meetings
lara
39
5.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
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