Design System in Android

Design System in Android

Presentation Video on YouTube:


Mahdi Nouri

August 22, 2019


  1. Design System In Android

  2. Who am I? phelat phelat_mahdi

  3. Chapter I What’s a Design System?

  4. What’s a Design System? g

  5. What’s a Design System? g C Component

  6. What’s a Design System? Component g C Component Component Component

  7. Chapter II Benefits of having a Design System

  8. Consistency “Perfectly balanced as all things should be” - Thanos

  9. Productivity “If you spend too much time thinking about a

    thing, you'll never get it done.” - Bruce Lee
  10. Common Language “Meow” means “Woof” in cat.” - George Carlin

  11. Material Design Material is an adaptable system of guidelines, components

    and tools.
  12. Sonnat: Developer’s Perspective Chapter III

  13. C Divar C Sonnat

  14. 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

  15. 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>
  16. 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

  17. 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
  18. NavBar.kt class NavBar : ConstraintLayout, Component, TextWatcher { . .

    . }
  19. 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
  20. 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) }
  21. NavBar.kt override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { super.onMeasure(widthMeasureSpec, heightMeasureSpec)

    if (measuredHeight != dpToPx(56)) { initLayoutParams() } }
  22. 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>
  23. None
  24. None
  25. None
  26. Chapter IV Accessibility

  27. None
  28. 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" />

  29. InfoRowUnExpandable

  30. None
  31. https:!//

  32. Thank You https:!//