Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design System in Android

Design System in Android

Presentation Video on YouTube: https://youtu.be/NDCiq9rQn5c

Mahdi Nouri

August 22, 2019
Tweet

Other Decks in Programming

Transcript

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

    thing, you'll never get it done.” - Bruce Lee
  2. 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
  3. 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
  4. 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) }
  5. 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>