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

Close the Loop: Designing and Developing Togeth...

Close the Loop: Designing and Developing Together (Droidcon NYC, September 2016)

(Co-presented with Zack Simon. Will add link to video when posted.)

Whether you work as a developer or designer at a product company, as an independent contractor, or as part of a team of consultants, you will leave this session with new techniques to streamline your “dev+sign” process, making it a more enjoyable and effective experience for all.

At Big Nerd Ranch we’ve forged a process where Android developers and designers work hand-in-hand throughout the life of a project to support each other in creating the most awesome Android app possible. We will walk you through real examples from the trenches (names will be changes to protect the innocent!) and talk about what we learned from our mistakes.

From presenting a united front in advocating for standard Android conventions, to creating a shared language for common elements to reduce code redundancy and prevent a rat’s nest of styles, we will share details about processes we follow to solve problems we have faced in creating apps for clients.

Kristin Marsicano

September 30, 2016
Tweet

More Decks by Kristin Marsicano

Other Decks in Programming

Transcript

  1. Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA

    Build Sprint Retro Develop Review Design Develop Login
  2. User Stories and Design User can see login screen when

    they launch the app. User can see error text when entering invalid email. User is logged into app after entering valid credentials and pressing the Login button.
  3. “User sees login screen when they launch the app.” Preconditions/Test

    Steps: 1. Make sure user is logged out 2. Click app icon from launch screen
  4. “User sees login screen when they launch the app.” Preconditions/Test

    Steps: 1. Make sure user is logged out 2. Click app icon from launch screen Acceptance Criteria: 1. Login screen is styled according to design, containing 2. toolbar with title of app 3. an email field 4. a password field 5. a login button with active, disabled, pressed, and focused state
  5. “User sees login screen when they launch the app.” Preconditions/Test

    Steps: 1. Make sure user is logged out 2. Click app icon from launch screen Acceptance Criteria: 1. Login screen is styled according to design, containing 2. toolbar with title of app 3. an email field 4. a password field 5. a login button with active, disabled, pressed, and focused state Not Included: Error states for email and password fields Functionality of login button
  6. Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA

    Build Sprint Retro Develop Review Design Develop Login
  7. Atoms: Colors In values/colors.xml: <!-- Custom Colors --> <color name="blue">#48D8FD</color>

    <color name="blueDark">#3EC7EB</color> <color name="red">#FF535F</color> <color name="grayDark">#2C2C2C</color> <color name="grayLight">#DCDCDC</color> <color name="gray">#8A8A8A</color>
  8. Atoms: Colors In values/styles.xml: <style name="AppTheme" parent=“Theme.AppCompat.Light.DarkActionBar"> <color name="colorPrimary">@color/blue</color> <color

    name="colorPrimaryDark">@color/blueDark</color> <color name="colorAccent">@color/red</color> </style> In values/colors.xml: <!-- Custom Colors --> <color name="blue">#48D8FD</color> <color name="blueDark">#3EC7EB</color> <color name="red">#FF535F</color> <color name="grayDark">#2C2C2C</color> <color name="grayLight">#DCDCDC</color> <color name="gray">#8A8A8A</color>
  9. Atoms: Type Styles In values/styles.xml: <!-- Text Styles --> <style

    name="Title" parent="TextAppearance.AppCompat"> <item name="android:fontFamily">sans-serif</item> <item name="android:textStyle">bold</item> <item name="android:textSize">20sp</item> </style> ... <style name="Body" parent="TextAppearance.AppCompat"> <item name="android:fontFamily">sans-serif</item> <item name="android:textStyle">normal</item> <item name="android:textSize">14sp</item> </style> ...
  10. Molecules: EditText In values/styles.xml: <!-- Molecules --> <style name="StandardEditText" parent="Widget.AppCompat.EditText">

    <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/grayDark</item> <item name="android:textColorHint">@color/grayLight</item> </style> ...
  11. Molecules: EditText In values/styles.xml: <!-- Molecules --> <style name="StandardEditText" parent="Widget.AppCompat.EditText">

    <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/grayDark</item> <item name="android:textColorHint">@color/grayLight</item> </style> ...
  12. Molecules: EditText In values/styles.xml: <!-- Molecules --> <style name="StandardEditText" parent="Widget.AppCompat.EditText">

    <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/grayDark</item> <item name="android:textColorHint">@color/grayLight</item> </style> ... <!-- Text Styles --> ... <style name="Body" parent="TextAppearance.AppCompat"> <item name="android:fontFamily">sans-serif</item> <item name="android:textStyle">normal</item> <item name="android:textSize">14sp</item> </style> ...
  13. A Screen is an Organism In layout/activity_login.xml: <LinearLayout ...> <EditText

    android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_email_hint" style="@style/StandardEditText" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_password_hint" style="@style/StandardEditText"/> ... </LinearLayout>
  14. A Screen is an Organism In layout/activity_login.xml: <LinearLayout ...> <EditText

    android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_email_hint" style="@style/StandardEditText" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_password_hint" style="@style/StandardEditText"/> ... </LinearLayout> In values/styles.xml: <style name="StandardEditText" parent="Widget.AppCompat.EditText"> ... </style>
  15. Leveraging the Theme <!-- Base application theme. → <style name="AppTheme"

    parent="Theme.AppCompat.Light.DarkActionBar"> ... <item name="editTextStyle">@style/StandardEditText</item> </style> <!-- Molecules --> <style name="StandardEditText" parent="Base.Widget.AppCompat.EditText"> <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/red</item> <item name="android:textColorHint">@color/blue</item> </style> ...
  16. Theme Style <!-- Base application theme. → <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

    ... <item name="editTextStyle">@style/StandardEditText</item> </style> <!-- Molecules --> <style name="StandardEditText" parent="Base.Widget.AppCompat.EditText"> <item name="android:textAppearance">@style/Body</item> <item name="android:textColor">@color/red</item> <item name="android:textColorHint">@color/blue</item> </style> ... <LinearLayout ...> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_email_hint" style="@style/StandardEditText" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/login_password_hint" style="@style/StandardEditText"/> ... </LinearLayout>
  17. Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA

    Build Sprint Retro Develop Review Design Develop Login
  18. Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA

    Build Sprint Retro Develop Review Design Develop Login
  19. Sprint 2 Stakeholder Review Design Signup Sprint Planning Design QA

    Build Sprint Retro Develop Review Design Develop Login