Codemotion, profile picture
Uploaded byCodemotion
PDF, PPTX595 views

Nicola Corti - Building UI Consistent Android Apps - Codemotion Milan 2017

The document discusses the importance of consistency in designing Android apps, emphasizing unified design elements like color and typography to enhance user experience. It outlines how consistency contributes to learnability, reduces frustration, and saves resources. Additionally, it provides guidelines and examples for implementing design consistency, specifically mentioning Yelp's Android apps and their style guidelines.

Embed presentation

Download as PDF, PPTX
1 / 105
2 / 105
3 / 105
4 / 105
5 / 105
6 / 105
7 / 105
8 / 105
9 / 105
10 / 105
11 / 105
12 / 105
13 / 105
14 / 105
15 / 105
16 / 105
17 / 105
18 / 105
19 / 105
20 / 105
21 / 105
22 / 105
23 / 105
24 / 105
25 / 105
26 / 105
27 / 105
28 / 105
29 / 105
30 / 105
31 / 105
32 / 105
33 / 105
34 / 105
35 / 105
36 / 105
37 / 105
38 / 105
39 / 105
40 / 105
41 / 105
42 / 105
43 / 105
44 / 105
45 / 105
46 / 105
47 / 105
48 / 105
49 / 105
50 / 105
51 / 105
52 / 105
53 / 105
54 / 105
55 / 105
56 / 105
57 / 105
58 / 105
59 / 105
60 / 105
61 / 105
62 / 105
63 / 105
64 / 105
65 / 105
66 / 105
67 / 105
68 / 105
69 / 105
70 / 105
71 / 105
72 / 105
73 / 105
74 / 105
75 / 105
76 / 105
77 / 105
78 / 105
79 / 105
80 / 105
81 / 105
82 / 105
83 / 105
84 / 105
85 / 105
86 / 105
87 / 105
88 / 105
89 / 105
90 / 105
91 / 105
92 / 105
93 / 105
94 / 105
95 / 105
96 / 105
97 / 105
98 / 105
99 / 105
100 / 105
101 / 105
102 / 105
103 / 105
104 / 105
105 / 105
Building UI Consistent Android Apps Nicola Corti @cortinico nco@yelp.com
Yelp Mission Connecting people with great local businesses.
About me Nicola Corti Android @BizCore nco@yelp.com @cortinico Community Addicted !🍕🕹🎤📸✈🏞
What is Consistency?
“Unified use of Design Elements, such as color, typography, spatial layout and behaviors.
Functional Internal Consistency Visual
External Consistency - Across Product
External Consistency - Across Platform
Benefits • Learnability • Reduce frustrations • Save money/time 💰 Photo by davelawler/CC BY - NC
How to tackle Consistency?
⌘ R⇧+ +
Source: GIPHY
External Examples • Google Material Design • Apple Design Guidelines • Github Primer http://styleguides.io/
github.com/alexpate/awesome-design-systems
Consistency @Yelp
Mobile Apps
yelp.com/styleguide
The Android Styleguide Library
Design Build Share
Design
Does it fit? • Can it be reused? • Is it visible to the user? • Development plan?
User photo User name timestamp friends, media checkins Elite badge description
Attributes <resources>
 </resources>
Attributes <resources>
 <declare-styleable name="UserPassport">
 </declare-styleable>
 </resources>
Attributes <resources>
 <declare-styleable name="UserPassport">
 <!-- Determines user's name -->
 <attr name="userPassportName" format="string"/>
 </declare-styleable>
 </resources>
Attributes <resources>
 <declare-styleable name="UserPassport">
 <!-- Determines user's name -->
 <attr name="userPassportName" format="string"/>
 
 <!-- Determines user's description/role -->
 <attr name="userPassportDescription" format="string"/>
 </declare-styleable>
 </resources>
Attributes <resources>
 <declare-styleable name="UserPassport">
 <!-- Determines user's name -->
 <attr name="userPassportName" format="string"/>
 
 <!-- Determines user's description/role -->
 <attr name="userPassportDescription" format="string"/>
 </declare-styleable>
 <attr name="userPassportStyle" format="reference"/>
 </resources>
Theme
Theme <resources>
 <!—- This theme is the parent of all themes of Yelp's android apps. —->
 <style name="YelpStyleguideTheme"/>
 </resources>
Theme <resources>
 <!—- This theme is the parent of all themes of Yelp's android apps. —->
 <style name="YelpStyleguideTheme" parent=“Theme.AppCompat.Light.DarkActionBar"/>
 </resources>
Theme <resources>
 <!—- This theme is the parent of all themes of Yelp's android apps. —->
 <style name="YelpStyleguideTheme" parent=“Theme.AppCompat.Light.DarkActionBar">
 <item name="userPassportStyle">@style/UserPassport</item>
 </style>
 </resources>
Styles
Styles <style name=“UserPassport"/>
Styles <style name=“UserPassport">
 <item name="userPassportName">Joe Smith</item>
 </style>
Styles <style name=“UserPassport">
 <item name="userPassportName">Joe Smith</item>
 <item name="userPassportDescription">Owner of Sample Business</item>
 </style>
UserPassport
public class UserPassport extends RelativeLayout {

public class UserPassport extends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;

public class UserPassport extends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 public void setName(String name) {
 mUserName.setText(name);
 }
 
 

public class UserPassport extends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 public void setName(String name) {
 mUserName.setText(name);
 }
 
 public void setDescription(String description) {
 if (TextUtils.isEmpty(description)) {
 mDescription.setVisibility(GONE);
 } else {
 mDescription.setVisibility(VISIBLE);
 mDescription.setText(description);
 }
 }
 

public class UserPassport extends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;

public class UserPassport extends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 public UserPassport(final Context context) {
 super(context);
 init(context, null, 0);
 }
 
 public UserPassport(final Context context, final AttributeSet attrs) {
 super(context, attrs);
 init(context, attrs, R.attr.userPassportStyle);
 }
 
 public UserPassport(final Context context, final AttributeSet attrs, final int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 init(context, attrs, defStyleAttr);
 }
public class UserPassport extends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 public UserPassport(final Context context) {
 super(context);
 init(context, null, 0);
 }
 
 public UserPassport(final Context context, final AttributeSet attrs) {
 super(context, attrs);
 init(context, attrs, R.attr.userPassportStyle);
 }
 
 public UserPassport(final Context context, final AttributeSet attrs, final int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 init(context, attrs, defStyleAttr);
 }
public class UserPassport extends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 private void init(
 final Context context, final AttributeSet attrs, final int defStyleAttr) { 
 }
 

public class UserPassport extends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 private void init(
 final Context context, final AttributeSet attrs, final int defStyleAttr) { 
 LayoutInflater.from(context).inflate(R.layout.user_passport, this, true); 
 }
 

public class UserPassport extends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 private void init(
 final Context context, final AttributeSet attrs, final int defStyleAttr) { 
 LayoutInflater.from(context).inflate(R.layout.user_passport, this, true); 
 mUserName = (TextView) findViewById(R.id.user_name);
 mDescription = (TextView) findViewById(R.id.description);
 
 }
 

public class UserPassport extends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 private void init(
 final Context context, final AttributeSet attrs, final int defStyleAttr) { 
 LayoutInflater.from(context).inflate(R.layout.user_passport, this, true); 
 mUserName = (TextView) findViewById(R.id.user_name);
 mDescription = (TextView) findViewById(R.id.description);
 
 final TypedArray styles = context.obtainStyledAttributes(attrs, R.styleable.UserPassport, defStyleAttr, 0);
 
 }

public class UserPassport extends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 private void init(
 final Context context, final AttributeSet attrs, final int defStyleAttr) { 
 LayoutInflater.from(context).inflate(R.layout.user_passport, this, true); 
 mUserName = (TextView) findViewById(R.id.user_name);
 mDescription = (TextView) findViewById(R.id.description);
 
 final TypedArray styles = context.obtainStyledAttributes(attrs, R.styleable.UserPassport, defStyleAttr, 0);
 
 setName(styles.getString(R.styleable.UserPassport_userPassportName)); setDescription(styles.getString( R.styleable.UserPassport_userPassportDescription));
 
 }
 

public class UserPassport extends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 private void init(
 final Context context, final AttributeSet attrs, final int defStyleAttr) { 
 LayoutInflater.from(context).inflate(R.layout.user_passport, this, true); 
 mUserName = (TextView) findViewById(R.id.user_name);
 mDescription = (TextView) findViewById(R.id.description);
 
 final TypedArray styles = context.obtainStyledAttributes(attrs, R.styleable.UserPassport, defStyleAttr, 0);
 
 setName(styles.getString(R.styleable.UserPassport_userPassportName)); setDescription(styles.getString( R.styleable.UserPassport_userPassportDescription));
 
 styles.recycle();
 }
 

<style name="UserPassport">
 <item name="userPassportName">Joe Smith</item>
 <item name="userPassportDescription">@null</item>
 <item name="userPassportTint">@color/orange_dark_interface</item>
 <item name="userPassportNameColor">@color/black_regular_interface</item>
 <item name="userPassportSize">Regular</item>
 <item name="userPassportShowName">true</item>
 <item name="userPassportShowIcons">true</item>
 <item name="userPassportEliteYear">-1</item>
 <item name="userPassportFriends">0</item>
 <item name="userPassportReviews">0</item>
 <item name="userPassportPhotos">0</item>
 <item name="userPassportCheckIns">0</item>
 <item name="userPassportShowCheckIn">false</item>
 </style>
<style name="UserPassport.White">
 <item name="userPassportName">Joe Smith</item>
 <item name="userPassportDescription">@null</item>
 <item name="userPassportTint">@color/orange_dark_interface</item>
 <item name="userPassportNameColor">@color/black_regular_interface</item>
 <item name="userPassportSize">Regular</item>
 <item name="userPassportShowName">true</item>
 <item name="userPassportShowIcons">true</item>
 <item name="userPassportEliteYear">-1</item>
 <item name="userPassportFriends">0</item>
 <item name="userPassportReviews">0</item>
 <item name="userPassportPhotos">0</item>
 <item name="userPassportCheckIns">0</item>
 <item name="userPassportShowCheckIn">false</item>
 </style>
<style name="UserPassport.White">
 <item name="userPassportName">Joe Smith</item>
 <item name="userPassportDescription">@null</item>
 <item name="userPassportTint">@color/white_interface</item>
 <item name="userPassportNameColor">@color/white_interface</item>
 <item name="userPassportSize">Regular</item>
 <item name="userPassportShowName">true</item>
 <item name="userPassportShowIcons">true</item>
 <item name="userPassportEliteYear">-1</item>
 <item name="userPassportFriends">0</item>
 <item name="userPassportReviews">0</item>
 <item name="userPassportPhotos">0</item>
 <item name="userPassportCheckIns">0</item>
 <item name="userPassportShowCheckIn">false</item>
 </style>
<style name="UserPassport.White">
 <item name="userPassportTint">@color/white_interface</item>
 <item name="userPassportNameColor">@color/white_interface</item>
 </style>
Color Palette
Illustrations
Assets dependencies {
 
 // Yelp asset libs
 compile 'com.yelp:yelpicons:135.0.0'
 compile ‘com.yelp:yelpdesign:4.0.4’ }
Assets dependencies {
 
 // Yelp asset libs
 compile 'com.yelp:yelpicons:135.0.0'
 compile ‘com.yelp:yelpdesign:4.0.4’ }
Color
Color <color name="black_extra_light_interface">#666666</color>
 <color name="black_regular_interface">#333333</color>
 <color name="blue_dark_interface">#0073bb</color>
 <color name="blue_extra_light_interface">#d0ecfb</color>
 <color name="blue_regular_interface">#0097ec</color>
 <color name="gray_dark_interface">#999999</color>
 <color name="gray_extra_light_interface">#f5f5f5</color>
 <color name="gray_light_interface">#e6e6e6</color>
 <color name="gray_regular_interface">#cccccc</color>
 <color name="green_extra_light_interface">#daecd2</color>
 <color name="green_regular_interface">#41a700</color>
 <color name="mocha_extra_light_interface">#f8e3c7</color>
 <color name="mocha_light_interface">#f1bd79</color>
 <color name="orange_dark_interface">#f15c00</color>
 <color name="orange_extra_light_interface">#ffebcf</color>
 <color name="purple_extra_light_interface">#dad1e4</color>
 <color name="red_dark_interface">#d32323</color>
 <color name="red_extra_light_interface">#fcd6d3</color>
 <color name="slate_extra_light_interface">#cddae2</color>
 <color name="white_interface">#ffffff</color>
 <color name="yellow_dark_interface">#fec011</color>
 <color name="yellow_extra_light_interface">#fff7cc</color>
Color <color name="black_extra_light_interface">#666666</color>
 <color name="black_regular_interface">#333333</color>
 <color name="blue_dark_interface">#0073bb</color>
 <color name="blue_extra_light_interface">#d0ecfb</color>
 <color name="blue_regular_interface">#0097ec</color>
 <color name="gray_dark_interface">#999999</color>
 <color name="gray_extra_light_interface">#f5f5f5</color>
 <color name="gray_light_interface">#e6e6e6</color>
 <color name="gray_regular_interface">#cccccc</color>
 <color name="green_extra_light_interface">#daecd2</color>
 <color name="green_regular_interface">#41a700</color>
 <color name="mocha_extra_light_interface">#f8e3c7</color>
 <color name="mocha_light_interface">#f1bd79</color>
 <color name="orange_dark_interface">#f15c00</color>
 <color name="orange_extra_light_interface">#ffebcf</color>
 <color name="purple_extra_light_interface">#dad1e4</color>
 <color name="red_dark_interface">#d32323</color>
 <color name="red_extra_light_interface">#fcd6d3</color>
 <color name="slate_extra_light_interface">#cddae2</color>
 <color name="white_interface">#ffffff</color>
 <color name="yellow_dark_interface">#fec011</color>
 <color name="yellow_extra_light_interface">#fff7cc</color>
Color <color name="black_extra_light_interface">#666666</color>
 <color name="black_regular_interface">#333333</color>
 <color name="blue_dark_interface">#0073bb</color>
 <color name="blue_extra_light_interface">#d0ecfb</color>
 <color name="blue_regular_interface">#0097ec</color>
 <color name="gray_dark_interface">#999999</color>
 <color name="gray_extra_light_interface">#f5f5f5</color>
 <color name="gray_light_interface">#e6e6e6</color>
 <color name="gray_regular_interface">#cccccc</color>
 <color name="green_extra_light_interface">#daecd2</color>
 <color name="green_regular_interface">#41a700</color>
 <color name="mocha_extra_light_interface">#f8e3c7</color>
 <color name="mocha_light_interface">#f1bd79</color>
 <color name="orange_dark_interface">#f15c00</color>
 <color name="orange_extra_light_interface">#ffebcf</color>
 <color name="purple_extra_light_interface">#dad1e4</color>
 <color name="red_dark_interface">#d32323</color>
 <color name="red_extra_light_interface">#fcd6d3</color>
 <color name="slate_extra_light_interface">#cddae2</color>
 <color name="white_interface">#ffffff</color>
 <color name="yellow_dark_interface">#fec011</color>
 <color name="yellow_extra_light_interface">#fff7cc</color>
Build
Review Template
VCS & CI • git submodule • Run the Build for • submodule • consumer app • business app
Custom Lint Checks
Custom Lint Checks 
 Button b = new Button(context);
 
 SwitchCompat switchCompat = new SwitchCompat(context);
 
 Snackbar.make(getRootView(), “Test”, LENGTH_SHORT).show();
Custom Lint Checks @SuppressLint("")
 Button b = new Button(context);
 
 @SuppressLint("")
 SwitchCompat switchCompat = new SwitchCompat(context);
 
 @SuppressLint("")
 Snackbar.make(getRootView(), “Test”, LENGTH_SHORT).show();
Custom Lint Checks @SuppressLint("NonStyleguideButtonInstance")
 Button b = new Button(context);
 
 @SuppressLint("")
 SwitchCompat switchCompat = new SwitchCompat(context);
 
 @SuppressLint("")
 Snackbar.make(getRootView(), “Test”, LENGTH_SHORT).show();
Custom Lint Checks @SuppressLint("NonStyleguideButtonInstance")
 Button b = new Button(context);
 
 @SuppressLint("NonStyleguideToggleInstance")
 SwitchCompat switchCompat = new SwitchCompat(context);
 
 @SuppressLint("")
 Snackbar.make(getRootView(), “Test”, LENGTH_SHORT).show();
Custom Lint Checks @SuppressLint("NonStyleguideButtonInstance")
 Button b = new Button(context);
 
 @SuppressLint("NonStyleguideToggleInstance")
 SwitchCompat switchCompat = new SwitchCompat(context);
 
 @SuppressLint("NonStyleguideSnackbarInstance")
 Snackbar.make(getRootView(), “Test”, LENGTH_SHORT).show();
Custom Lint Checks // Using stock Button because […] + Ticket number. @SuppressLint("NonStyleguideButtonInstance")
 Button b = new Button(context);
 
 @SuppressLint("NonStyleguideToggleInstance")
 SwitchCompat switchCompat = new SwitchCompat(context);
 
 @SuppressLint("NonStyleguideSnackbarInstance")
 Snackbar.make(getRootView(), “Test”, LENGTH_SHORT).show();
Custom Lint Checks
Custom Lint Checks <Button
 android:layout_width="match_parent"
 android:layout_height="match_parent" />
 
 <Switch
 android:layout_width="match_parent"
 android:layout_height="match_parent" />
Custom Lint Checks <Button
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:ignore="NonStyleguideButtonTag" />
 
 <Switch
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:ignore="NonStyleguideToggleTag" />
build.gradle
build.gradle android {
 lintOptions {
 
 }
 }
build.gradle android {
 lintOptions {
 abortOnError true
 warningsAsErrors true
 
 }
 }
build.gradle android {
 lintOptions {
 abortOnError true
 warningsAsErrors true
 
 lintConfig file("lint.xml")
 }
 }
build.gradle android {
 lintOptions {
 abortOnError true
 warningsAsErrors true
 
 lintConfig file("lint.xml")
 baseline file("lint-baseline.xml")
 }
 }
Test your component • Your component ❤ Espresso? • Do you handle state changes? • contentDescription ?
Share
Documentation • Provide Javadoc • Add Screenshots • Document Attributes • Document Styles
Screenshots capture • v0.1: Manual Screenshots • v0.2: Automated locally • v0.3: Automated with CI 💫
StyleguideTestApp • Components Showcase • For Designer 🎨 • For Developer 🔧
Taking Screenshots with Espresso public class ScreenshotViewActions {
 
 }
Taking Screenshots with Espresso public class ScreenshotViewActions {
 
 public static ViewAction screenshot(final String folderName, final String fileName) {
 return new ViewAction() {
 
 };
 }
 }
Taking Screenshots with Espresso public class ScreenshotViewActions {
 
 public static ViewAction screenshot(final String folderName, final String fileName) {
 return new ViewAction() {
 // Other methods omitted.
 
 @Override
 public void perform(UiController uiController, View view) {
 ScreenshotsUtil.takeScreenshot(folderName, fileName, view);
 }
 };
 }
 }
Sample Espresso Test
Sample Espresso Test public class StarsViewActivityTests {
 
 }
Sample Espresso Test public class StarsViewActivityTests {
 
 @Test
 public void takeScreenshot() throws InterruptedException {
 onView(withId(R.id.stars_view_4)).perform(setStarsNumber(4));
 
 }
 }
Sample Espresso Test public class StarsViewActivityTests {
 
 @Test
 public void takeScreenshot() throws InterruptedException {
 onView(withId(R.id.stars_view_4)).perform(setStarsNumber(4));
 onView(withId(R.id.stars_view_5)).perform(setStarsNumber(5),
 screenshot(FOLDER_NAME, "stars_with_text"));
 
 }
 }
Sample Espresso Test public class StarsViewActivityTests {
 
 @Test
 public void takeScreenshot() throws InterruptedException {
 onView(withId(R.id.stars_view_4)).perform(setStarsNumber(4));
 onView(withId(R.id.stars_view_5)).perform(setStarsNumber(5),
 screenshot(FOLDER_NAME, "stars_with_text"));
 
 ScreenshotUtil.fullScreenshot(FOLDER_NAME, "stars_fullscreen");
 }
 }
Bend it, don’t break it! Source: GIPHY
We are hiring! www.yelp.com/careers/
Nicola Corti @cortinico nco@yelp.com bit.ly/uiconsistency @YelpEngineering github.com/yelp yelp.com/careers engineeringblog.yelp.com

More Related Content

PDF
Maurizio Moriconi - ARKit: Augmented Reality made simple - Codemotion Milan 2017
byCodemotion
 
PDF
Demi Ben-Ari - Monitoring Big Data Systems Done "The Simple Way" - Codemotion...
byCodemotion
 
PDF
Vincenzo Chianese - REST, for real! - Codemotion Milan 2017
byCodemotion
 
PPTX
Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...
byCodemotion
 
PDF
Matteo Valoriani - How Augment your Reality: different perspective on the Rea...
byCodemotion
 
PPTX
Gabriele Nocco - Massive distributed processing with H2O - Codemotion Milan 2017
byCodemotion
 
PDF
Gabriele Petronella - Mythical trees and where to find them - Codemotion Mila...
byCodemotion
 
PPTX
Massimo Bonanni - L'approccio ai microservizi secondo Service Fabric - Codemo...
byCodemotion
 
Maurizio Moriconi - ARKit: Augmented Reality made simple - Codemotion Milan 2017
byCodemotion
 
Demi Ben-Ari - Monitoring Big Data Systems Done "The Simple Way" - Codemotion...
byCodemotion
 
Vincenzo Chianese - REST, for real! - Codemotion Milan 2017
byCodemotion
 
Steve Sfartz - How to embed Messaging and Video in your apps - Codemotion Mil...
byCodemotion
 
Matteo Valoriani - How Augment your Reality: different perspective on the Rea...
byCodemotion
 
Gabriele Nocco - Massive distributed processing with H2O - Codemotion Milan 2017
byCodemotion
 
Gabriele Petronella - Mythical trees and where to find them - Codemotion Mila...
byCodemotion
 
Massimo Bonanni - L'approccio ai microservizi secondo Service Fabric - Codemo...
byCodemotion
 

Viewers also liked

PDF
Anna Makarudze - Django Girls: Inspiring women to fall in love with programmi...
byCodemotion
 
PPTX
Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopmen...
byCodemotion
 
PDF
Claudio Carboni - ArcGIS platformthe foundation of your idea - Codemotion Mil...
byCodemotion
 
PDF
Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017
byCodemotion
 
PDF
James Williams - Demystifying Constraint Layout - Codemotion Milan 2017
byCodemotion
 
PDF
Tiffany Conroy - Remote device sign-in – Authenticating without a keyboard - ...
byCodemotion
 
PDF
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
byCodemotion
 
PDF
Erik Tiengo - Embedding Cisco Spark and Location applications (ESRI) into bus...
byCodemotion
 
PDF
Erik Wendel - Beyond JavaScript Frameworks: Writing Reliable Web Apps With El...
byCodemotion
 
PDF
Agnieszka Naplocha - Breaking the norm with creative CSS - Codemotion Milan 2017
byCodemotion
 
PPSX
Oded Coster - Stack Overflow behind the scenes - how it's made - Codemotion M...
byCodemotion
 
PDF
Cutting the Fat
byCodemotion
 
PDF
9
byCodemotion
 
PDF
Codemotion rome 2015 bluemix lab tutorial -- Codemotion Rome 2015
byCodemotion
 
PDF
8
byCodemotion
 
PDF
Lean@core lean startup e cloud- - Codemotion Rome 2015
byCodemotion
 
PDF
5
byCodemotion
 
PDF
Engineering Design for Facebook
byCodemotion
 
PDF
6
byCodemotion
 
PDF
29
byCodemotion
 
Anna Makarudze - Django Girls: Inspiring women to fall in love with programmi...
byCodemotion
 
Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopmen...
byCodemotion
 
Claudio Carboni - ArcGIS platformthe foundation of your idea - Codemotion Mil...
byCodemotion
 
Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017
byCodemotion
 
James Williams - Demystifying Constraint Layout - Codemotion Milan 2017
byCodemotion
 
Tiffany Conroy - Remote device sign-in – Authenticating without a keyboard - ...
byCodemotion
 
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
byCodemotion
 
Erik Tiengo - Embedding Cisco Spark and Location applications (ESRI) into bus...
byCodemotion
 
Erik Wendel - Beyond JavaScript Frameworks: Writing Reliable Web Apps With El...
byCodemotion
 
Agnieszka Naplocha - Breaking the norm with creative CSS - Codemotion Milan 2017
byCodemotion
 
Oded Coster - Stack Overflow behind the scenes - how it's made - Codemotion M...
byCodemotion
 
Cutting the Fat
byCodemotion
 
9
byCodemotion
 
Codemotion rome 2015 bluemix lab tutorial -- Codemotion Rome 2015
byCodemotion
 
8
byCodemotion
 
Lean@core lean startup e cloud- - Codemotion Rome 2015
byCodemotion
 
5
byCodemotion
 
Engineering Design for Facebook
byCodemotion
 
6
byCodemotion
 
29
byCodemotion
 

Similar to Nicola Corti - Building UI Consistent Android Apps - Codemotion Milan 2017

PPTX
Layouts in android
bybaabtra.com - No. 1 supplier of quality freshers
 
PDF
Android Design Patterns
byGodfrey Nolan
 
DOCX
Layout
bydeepikasony
 
PPTX
ListView and Custom ListView on Android Development [Thai]
bySomkiat Khitwongwattana
 
PPTX
List adapter with multiple objects
bybaabtra.com - No. 1 supplier of quality freshers
 
PDF
Android UI Fundamentals part 1
byMarcos Paulo Souza Damasceno
 
PDF
Advanced Android gReporter
bynatdefreitas
 
PDF
Creating a Facebook Clone - Part V - Transcript.pdf
byShaiAlmog1
 
PDF
Anko試食会
bysusan335
 
PPTX
Lecture_On_AndroidApp_UserInterface.pptx
byridzah12
 
PDF
Creating custom views
byMu Chun Wang
 
PDF
07_UIAndroid.pdf
byImranS18
 
Layouts in android
bybaabtra.com - No. 1 supplier of quality freshers
 
Android Design Patterns
byGodfrey Nolan
 
Layout
bydeepikasony
 
ListView and Custom ListView on Android Development [Thai]
bySomkiat Khitwongwattana
 
List adapter with multiple objects
bybaabtra.com - No. 1 supplier of quality freshers
 
Android UI Fundamentals part 1
byMarcos Paulo Souza Damasceno
 
Advanced Android gReporter
bynatdefreitas
 
Creating a Facebook Clone - Part V - Transcript.pdf
byShaiAlmog1
 
Anko試食会
bysusan335
 
Lecture_On_AndroidApp_UserInterface.pptx
byridzah12
 
Creating custom views
byMu Chun Wang
 
07_UIAndroid.pdf
byImranS18
 

More from Codemotion

PDF
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...
byCodemotion
 
PDF
Pompili - From hero to_zero: The FatalNoise neverending story
byCodemotion
 
PPTX
Pastore - Commodore 65 - La storia
byCodemotion
 
PPTX
Pennisi - Essere Richard Altwasser
byCodemotion
 
PPTX
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...
byCodemotion
 
PPTX
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019
byCodemotion
 
PPTX
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019
byCodemotion
 
PPTX
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 -
byCodemotion
 
PDF
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...
byCodemotion
 
PDF
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...
byCodemotion
 
PDF
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
byCodemotion
 
PDF
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...
byCodemotion
 
PDF
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019
byCodemotion
 
PDF
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019
byCodemotion
 
PPTX
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019
byCodemotion
 
PPTX
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...
byCodemotion
 
PDF
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...
byCodemotion
 
PDF
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019
byCodemotion
 
PDF
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019
byCodemotion
 
PDF
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
byCodemotion
 
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...
byCodemotion
 
Pompili - From hero to_zero: The FatalNoise neverending story
byCodemotion
 
Pastore - Commodore 65 - La storia
byCodemotion
 
Pennisi - Essere Richard Altwasser
byCodemotion
 
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...
byCodemotion
 
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019
byCodemotion
 
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019
byCodemotion
 
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 -
byCodemotion
 
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...
byCodemotion
 
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...
byCodemotion
 
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
byCodemotion
 
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...
byCodemotion
 
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019
byCodemotion
 
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019
byCodemotion
 
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019
byCodemotion
 
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...
byCodemotion
 
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...
byCodemotion
 
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019
byCodemotion
 
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019
byCodemotion
 
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
byCodemotion
 

Recently uploaded

PDF
Transcript: What Thema can do: Leveraging metadata to support the discoverabi...
byBookNet Canada
 
PDF
Certified AI-Native Foundations Professional.pdf
byMarc Entsminger SPC6, RTE, SSM, SA, SDP
 
PDF
Bettersize | BeSEC Series Product Brochure
byBettersize Instruments
 
PDF
Chapter 3 Cryptography and encryption techniques.pdf
byGetnet Tigabie Askale -(GM)
 
PDF
Certified AI-Empowered SAFe Release Train Engineer.pdf
byMarc Entsminger SPC6, RTE, SSM, SA, SDP
 
PDF
Fortinet Certified Fundamentals in Cybersecurity
byVICTOR MAESTRE RAMIREZ
 
PDF
Agentic-Document-Extraction-2026-Presentation.pdf
byTamanna
 
PDF
What Thema can do: Leveraging metadata to support the discoverability of Firs...
byBookNet Canada
 
PDF
Skills to Pass the UiPath Agentic Automation Associate (UiAAA) Certification
byUiPathCommunity
 
PDF
A Simple Guide to Real Estate Tokenization on XRP Ledger.pdf
byemmajoh2025
 
PPTX
The Lex Wire Precedent: A Technical Standard for Machine-Mediated Authority ...
byJeff Howell
 
PDF
Kubernetes Cloud Native Indonesia Meetup - January 2026
byPrasta Maha
 
PDF
Computer-Based Training (CBT) The Backbone of Modern Technical & Defence Trai...
bycomputerbasedtrainin1
 
PDF
React Mastery: Visual Mental Models to Understand React Deeply
byThomas Gaye
 
PDF
"When every team does things "right", but together it turns into chaos", Yozh...
byFwdays
 
PPTX
2026 SCORM Troubleshooting Rustici + dominKnow.pptx
byRustici Software
 
PDF
AI assisted Software Development - Agentic and Vibe Coding
byAndrei Oros
 
PDF
Transcript: EU regulations for the North American book supply chain - Tech Fo...
byBookNet Canada
 
PDF
B2SMB SaaS Philosophy Lab: Simplicity vs Options
byAnton Shulke
 
PDF
ICT500 - CRITICAL AND CREATIVE THINKING FOR INFORMATION TECHNOLOGY SOLUTIONS:...
by2024432452
 
Transcript: What Thema can do: Leveraging metadata to support the discoverabi...
byBookNet Canada
 
Certified AI-Native Foundations Professional.pdf
byMarc Entsminger SPC6, RTE, SSM, SA, SDP
 
Bettersize | BeSEC Series Product Brochure
byBettersize Instruments
 
Chapter 3 Cryptography and encryption techniques.pdf
byGetnet Tigabie Askale -(GM)
 
Certified AI-Empowered SAFe Release Train Engineer.pdf
byMarc Entsminger SPC6, RTE, SSM, SA, SDP
 
Fortinet Certified Fundamentals in Cybersecurity
byVICTOR MAESTRE RAMIREZ
 
Agentic-Document-Extraction-2026-Presentation.pdf
byTamanna
 
What Thema can do: Leveraging metadata to support the discoverability of Firs...
byBookNet Canada
 
Skills to Pass the UiPath Agentic Automation Associate (UiAAA) Certification
byUiPathCommunity
 
A Simple Guide to Real Estate Tokenization on XRP Ledger.pdf
byemmajoh2025
 
The Lex Wire Precedent: A Technical Standard for Machine-Mediated Authority ...
byJeff Howell
 
Kubernetes Cloud Native Indonesia Meetup - January 2026
byPrasta Maha
 
Computer-Based Training (CBT) The Backbone of Modern Technical & Defence Trai...
bycomputerbasedtrainin1
 
React Mastery: Visual Mental Models to Understand React Deeply
byThomas Gaye
 
"When every team does things "right", but together it turns into chaos", Yozh...
byFwdays
 
2026 SCORM Troubleshooting Rustici + dominKnow.pptx
byRustici Software
 
AI assisted Software Development - Agentic and Vibe Coding
byAndrei Oros
 
Transcript: EU regulations for the North American book supply chain - Tech Fo...
byBookNet Canada
 
B2SMB SaaS Philosophy Lab: Simplicity vs Options
byAnton Shulke
 
ICT500 - CRITICAL AND CREATIVE THINKING FOR INFORMATION TECHNOLOGY SOLUTIONS:...
by2024432452
 

Nicola Corti - Building UI Consistent Android Apps - Codemotion Milan 2017

  • 1.
    Building UI ConsistentAndroid Apps Nicola Corti @cortinico nco@yelp.com
  • 3.
    Yelp Mission Connecting peoplewith great local businesses.
  • 4.
    About me Nicola Corti Android@BizCore nco@yelp.com @cortinico Community Addicted !🍕🕹🎤📸✈🏞
  • 5.
  • 6.
    “Unified use ofDesign Elements, such as color, typography, spatial layout and behaviors.
  • 7.
  • 8.
    External Consistency -Across Product
  • 9.
    External Consistency -Across Platform
  • 10.
    Benefits • Learnability • Reducefrustrations • Save money/time 💰 Photo by davelawler/CC BY - NC
  • 11.
  • 12.
  • 13.
  • 15.
    External Examples • GoogleMaterial Design • Apple Design Guidelines • Github Primer http://styleguides.io/
  • 16.
  • 18.
  • 19.
  • 22.
  • 25.
  • 26.
  • 27.
  • 28.
    Does it fit? •Can it be reused? • Is it visible to the user? • Development plan?
  • 29.
    User photo Username timestamp friends, media checkins Elite badge description
  • 30.
  • 31.
  • 32.
    Attributes <resources>
 <declare-styleable name="UserPassport">
 <!-- Determinesuser's name -->
 <attr name="userPassportName" format="string"/>
 </declare-styleable>
 </resources>
  • 33.
    Attributes <resources>
 <declare-styleable name="UserPassport">
 <!-- Determinesuser's name -->
 <attr name="userPassportName" format="string"/>
 
 <!-- Determines user's description/role -->
 <attr name="userPassportDescription" format="string"/>
 </declare-styleable>
 </resources>
  • 34.
    Attributes <resources>
 <declare-styleable name="UserPassport">
 <!-- Determinesuser's name -->
 <attr name="userPassportName" format="string"/>
 
 <!-- Determines user's description/role -->
 <attr name="userPassportDescription" format="string"/>
 </declare-styleable>
 <attr name="userPassportStyle" format="reference"/>
 </resources>
  • 35.
  • 36.
    Theme <resources>
 <!—- This themeis the parent of all themes of Yelp's android apps. —->
 <style name="YelpStyleguideTheme"/>
 </resources>
  • 37.
    Theme <resources>
 <!—- This themeis the parent of all themes of Yelp's android apps. —->
 <style name="YelpStyleguideTheme" parent=“Theme.AppCompat.Light.DarkActionBar"/>
 </resources>
  • 38.
    Theme <resources>
 <!—- This themeis the parent of all themes of Yelp's android apps. —->
 <style name="YelpStyleguideTheme" parent=“Theme.AppCompat.Light.DarkActionBar">
 <item name="userPassportStyle">@style/UserPassport</item>
 </style>
 </resources>
  • 39.
  • 40.
  • 41.
  • 42.
    Styles <style name=“UserPassport">
 <item name="userPassportName">JoeSmith</item>
 <item name="userPassportDescription">Owner of Sample Business</item>
 </style>
  • 43.
  • 44.
    public class UserPassportextends RelativeLayout {

  • 45.
    public class UserPassportextends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;

  • 46.
    public class UserPassportextends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 public void setName(String name) {
 mUserName.setText(name);
 }
 
 

  • 47.
    public class UserPassportextends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 public void setName(String name) {
 mUserName.setText(name);
 }
 
 public void setDescription(String description) {
 if (TextUtils.isEmpty(description)) {
 mDescription.setVisibility(GONE);
 } else {
 mDescription.setVisibility(VISIBLE);
 mDescription.setText(description);
 }
 }
 

  • 48.
    public class UserPassportextends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;

  • 49.
    public class UserPassportextends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 public UserPassport(final Context context) {
 super(context);
 init(context, null, 0);
 }
 
 public UserPassport(final Context context, final AttributeSet attrs) {
 super(context, attrs);
 init(context, attrs, R.attr.userPassportStyle);
 }
 
 public UserPassport(final Context context, final AttributeSet attrs, final int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 init(context, attrs, defStyleAttr);
 }
  • 50.
    public class UserPassportextends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 public UserPassport(final Context context) {
 super(context);
 init(context, null, 0);
 }
 
 public UserPassport(final Context context, final AttributeSet attrs) {
 super(context, attrs);
 init(context, attrs, R.attr.userPassportStyle);
 }
 
 public UserPassport(final Context context, final AttributeSet attrs, final int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 init(context, attrs, defStyleAttr);
 }
  • 51.
    public class UserPassportextends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 private void init(
 final Context context, final AttributeSet attrs, final int defStyleAttr) { 
 }
 

  • 52.
    public class UserPassportextends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 private void init(
 final Context context, final AttributeSet attrs, final int defStyleAttr) { 
 LayoutInflater.from(context).inflate(R.layout.user_passport, this, true); 
 }
 

  • 53.
    public class UserPassportextends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 private void init(
 final Context context, final AttributeSet attrs, final int defStyleAttr) { 
 LayoutInflater.from(context).inflate(R.layout.user_passport, this, true); 
 mUserName = (TextView) findViewById(R.id.user_name);
 mDescription = (TextView) findViewById(R.id.description);
 
 }
 

  • 54.
    public class UserPassportextends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 private void init(
 final Context context, final AttributeSet attrs, final int defStyleAttr) { 
 LayoutInflater.from(context).inflate(R.layout.user_passport, this, true); 
 mUserName = (TextView) findViewById(R.id.user_name);
 mDescription = (TextView) findViewById(R.id.description);
 
 final TypedArray styles = context.obtainStyledAttributes(attrs, R.styleable.UserPassport, defStyleAttr, 0);
 
 }

  • 55.
    public class UserPassportextends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 private void init(
 final Context context, final AttributeSet attrs, final int defStyleAttr) { 
 LayoutInflater.from(context).inflate(R.layout.user_passport, this, true); 
 mUserName = (TextView) findViewById(R.id.user_name);
 mDescription = (TextView) findViewById(R.id.description);
 
 final TypedArray styles = context.obtainStyledAttributes(attrs, R.styleable.UserPassport, defStyleAttr, 0);
 
 setName(styles.getString(R.styleable.UserPassport_userPassportName)); setDescription(styles.getString( R.styleable.UserPassport_userPassportDescription));
 
 }
 

  • 56.
    public class UserPassportextends RelativeLayout {
 
 private TextView mUserName;
 private TextView mDescription;
 
 private void init(
 final Context context, final AttributeSet attrs, final int defStyleAttr) { 
 LayoutInflater.from(context).inflate(R.layout.user_passport, this, true); 
 mUserName = (TextView) findViewById(R.id.user_name);
 mDescription = (TextView) findViewById(R.id.description);
 
 final TypedArray styles = context.obtainStyledAttributes(attrs, R.styleable.UserPassport, defStyleAttr, 0);
 
 setName(styles.getString(R.styleable.UserPassport_userPassportName)); setDescription(styles.getString( R.styleable.UserPassport_userPassportDescription));
 
 styles.recycle();
 }
 

  • 57.
    <style name="UserPassport">
 <item name="userPassportName">JoeSmith</item>
 <item name="userPassportDescription">@null</item>
 <item name="userPassportTint">@color/orange_dark_interface</item>
 <item name="userPassportNameColor">@color/black_regular_interface</item>
 <item name="userPassportSize">Regular</item>
 <item name="userPassportShowName">true</item>
 <item name="userPassportShowIcons">true</item>
 <item name="userPassportEliteYear">-1</item>
 <item name="userPassportFriends">0</item>
 <item name="userPassportReviews">0</item>
 <item name="userPassportPhotos">0</item>
 <item name="userPassportCheckIns">0</item>
 <item name="userPassportShowCheckIn">false</item>
 </style>
  • 58.
    <style name="UserPassport.White">
 <item name="userPassportName">JoeSmith</item>
 <item name="userPassportDescription">@null</item>
 <item name="userPassportTint">@color/orange_dark_interface</item>
 <item name="userPassportNameColor">@color/black_regular_interface</item>
 <item name="userPassportSize">Regular</item>
 <item name="userPassportShowName">true</item>
 <item name="userPassportShowIcons">true</item>
 <item name="userPassportEliteYear">-1</item>
 <item name="userPassportFriends">0</item>
 <item name="userPassportReviews">0</item>
 <item name="userPassportPhotos">0</item>
 <item name="userPassportCheckIns">0</item>
 <item name="userPassportShowCheckIn">false</item>
 </style>
  • 59.
    <style name="UserPassport.White">
 <item name="userPassportName">JoeSmith</item>
 <item name="userPassportDescription">@null</item>
 <item name="userPassportTint">@color/white_interface</item>
 <item name="userPassportNameColor">@color/white_interface</item>
 <item name="userPassportSize">Regular</item>
 <item name="userPassportShowName">true</item>
 <item name="userPassportShowIcons">true</item>
 <item name="userPassportEliteYear">-1</item>
 <item name="userPassportFriends">0</item>
 <item name="userPassportReviews">0</item>
 <item name="userPassportPhotos">0</item>
 <item name="userPassportCheckIns">0</item>
 <item name="userPassportShowCheckIn">false</item>
 </style>
  • 60.
    <style name="UserPassport.White">
 <item name="userPassportTint">@color/white_interface</item>
 <itemname="userPassportNameColor">@color/white_interface</item>
 </style>
  • 61.
  • 62.
  • 63.
    Assets dependencies {
 
 // Yelpasset libs
 compile 'com.yelp:yelpicons:135.0.0'
 compile ‘com.yelp:yelpdesign:4.0.4’ }
  • 64.
    Assets dependencies {
 
 // Yelpasset libs
 compile 'com.yelp:yelpicons:135.0.0'
 compile ‘com.yelp:yelpdesign:4.0.4’ }
  • 65.
  • 66.
    Color <color name="black_extra_light_interface">#666666</color>
 <color name="black_regular_interface">#333333</color>
 <colorname="blue_dark_interface">#0073bb</color>
 <color name="blue_extra_light_interface">#d0ecfb</color>
 <color name="blue_regular_interface">#0097ec</color>
 <color name="gray_dark_interface">#999999</color>
 <color name="gray_extra_light_interface">#f5f5f5</color>
 <color name="gray_light_interface">#e6e6e6</color>
 <color name="gray_regular_interface">#cccccc</color>
 <color name="green_extra_light_interface">#daecd2</color>
 <color name="green_regular_interface">#41a700</color>
 <color name="mocha_extra_light_interface">#f8e3c7</color>
 <color name="mocha_light_interface">#f1bd79</color>
 <color name="orange_dark_interface">#f15c00</color>
 <color name="orange_extra_light_interface">#ffebcf</color>
 <color name="purple_extra_light_interface">#dad1e4</color>
 <color name="red_dark_interface">#d32323</color>
 <color name="red_extra_light_interface">#fcd6d3</color>
 <color name="slate_extra_light_interface">#cddae2</color>
 <color name="white_interface">#ffffff</color>
 <color name="yellow_dark_interface">#fec011</color>
 <color name="yellow_extra_light_interface">#fff7cc</color>
  • 67.
    Color <color name="black_extra_light_interface">#666666</color>
 <color name="black_regular_interface">#333333</color>
 <colorname="blue_dark_interface">#0073bb</color>
 <color name="blue_extra_light_interface">#d0ecfb</color>
 <color name="blue_regular_interface">#0097ec</color>
 <color name="gray_dark_interface">#999999</color>
 <color name="gray_extra_light_interface">#f5f5f5</color>
 <color name="gray_light_interface">#e6e6e6</color>
 <color name="gray_regular_interface">#cccccc</color>
 <color name="green_extra_light_interface">#daecd2</color>
 <color name="green_regular_interface">#41a700</color>
 <color name="mocha_extra_light_interface">#f8e3c7</color>
 <color name="mocha_light_interface">#f1bd79</color>
 <color name="orange_dark_interface">#f15c00</color>
 <color name="orange_extra_light_interface">#ffebcf</color>
 <color name="purple_extra_light_interface">#dad1e4</color>
 <color name="red_dark_interface">#d32323</color>
 <color name="red_extra_light_interface">#fcd6d3</color>
 <color name="slate_extra_light_interface">#cddae2</color>
 <color name="white_interface">#ffffff</color>
 <color name="yellow_dark_interface">#fec011</color>
 <color name="yellow_extra_light_interface">#fff7cc</color>
  • 68.
    Color <color name="black_extra_light_interface">#666666</color>
 <color name="black_regular_interface">#333333</color>
 <colorname="blue_dark_interface">#0073bb</color>
 <color name="blue_extra_light_interface">#d0ecfb</color>
 <color name="blue_regular_interface">#0097ec</color>
 <color name="gray_dark_interface">#999999</color>
 <color name="gray_extra_light_interface">#f5f5f5</color>
 <color name="gray_light_interface">#e6e6e6</color>
 <color name="gray_regular_interface">#cccccc</color>
 <color name="green_extra_light_interface">#daecd2</color>
 <color name="green_regular_interface">#41a700</color>
 <color name="mocha_extra_light_interface">#f8e3c7</color>
 <color name="mocha_light_interface">#f1bd79</color>
 <color name="orange_dark_interface">#f15c00</color>
 <color name="orange_extra_light_interface">#ffebcf</color>
 <color name="purple_extra_light_interface">#dad1e4</color>
 <color name="red_dark_interface">#d32323</color>
 <color name="red_extra_light_interface">#fcd6d3</color>
 <color name="slate_extra_light_interface">#cddae2</color>
 <color name="white_interface">#ffffff</color>
 <color name="yellow_dark_interface">#fec011</color>
 <color name="yellow_extra_light_interface">#fff7cc</color>
  • 69.
  • 70.
  • 71.
    VCS & CI •git submodule • Run the Build for • submodule • consumer app • business app
  • 72.
  • 73.
    Custom Lint Checks 
 Buttonb = new Button(context);
 
 SwitchCompat switchCompat = new SwitchCompat(context);
 
 Snackbar.make(getRootView(), “Test”, LENGTH_SHORT).show();
  • 74.
    Custom Lint Checks @SuppressLint("")
 Buttonb = new Button(context);
 
 @SuppressLint("")
 SwitchCompat switchCompat = new SwitchCompat(context);
 
 @SuppressLint("")
 Snackbar.make(getRootView(), “Test”, LENGTH_SHORT).show();
  • 75.
    Custom Lint Checks @SuppressLint("NonStyleguideButtonInstance")
 Buttonb = new Button(context);
 
 @SuppressLint("")
 SwitchCompat switchCompat = new SwitchCompat(context);
 
 @SuppressLint("")
 Snackbar.make(getRootView(), “Test”, LENGTH_SHORT).show();
  • 76.
    Custom Lint Checks @SuppressLint("NonStyleguideButtonInstance")
 Buttonb = new Button(context);
 
 @SuppressLint("NonStyleguideToggleInstance")
 SwitchCompat switchCompat = new SwitchCompat(context);
 
 @SuppressLint("")
 Snackbar.make(getRootView(), “Test”, LENGTH_SHORT).show();
  • 77.
    Custom Lint Checks @SuppressLint("NonStyleguideButtonInstance")
 Buttonb = new Button(context);
 
 @SuppressLint("NonStyleguideToggleInstance")
 SwitchCompat switchCompat = new SwitchCompat(context);
 
 @SuppressLint("NonStyleguideSnackbarInstance")
 Snackbar.make(getRootView(), “Test”, LENGTH_SHORT).show();
  • 78.
    Custom Lint Checks //Using stock Button because […] + Ticket number. @SuppressLint("NonStyleguideButtonInstance")
 Button b = new Button(context);
 
 @SuppressLint("NonStyleguideToggleInstance")
 SwitchCompat switchCompat = new SwitchCompat(context);
 
 @SuppressLint("NonStyleguideSnackbarInstance")
 Snackbar.make(getRootView(), “Test”, LENGTH_SHORT).show();
  • 79.
  • 80.
    Custom Lint Checks <Button
 android:layout_width="match_parent"
 android:layout_height="match_parent"/>
 
 <Switch
 android:layout_width="match_parent"
 android:layout_height="match_parent" />
  • 81.
    Custom Lint Checks <Button
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:ignore="NonStyleguideButtonTag"/>
 
 <Switch
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:ignore="NonStyleguideToggleTag" />
  • 82.
  • 83.
  • 84.
    build.gradle android {
 lintOptions {
 abortOnErrortrue
 warningsAsErrors true
 
 }
 }
  • 85.
    build.gradle android {
 lintOptions {
 abortOnErrortrue
 warningsAsErrors true
 
 lintConfig file("lint.xml")
 }
 }
  • 86.
    build.gradle android {
 lintOptions {
 abortOnErrortrue
 warningsAsErrors true
 
 lintConfig file("lint.xml")
 baseline file("lint-baseline.xml")
 }
 }
  • 87.
    Test your component •Your component ❤ Espresso? • Do you handle state changes? • contentDescription ?
  • 88.
  • 89.
    Documentation • Provide Javadoc •Add Screenshots • Document Attributes • Document Styles
  • 90.
    Screenshots capture • v0.1:Manual Screenshots • v0.2: Automated locally • v0.3: Automated with CI 💫
  • 94.
    StyleguideTestApp • Components Showcase •For Designer 🎨 • For Developer 🔧
  • 95.
    Taking Screenshots withEspresso public class ScreenshotViewActions {
 
 }
  • 96.
    Taking Screenshots withEspresso public class ScreenshotViewActions {
 
 public static ViewAction screenshot(final String folderName, final String fileName) {
 return new ViewAction() {
 
 };
 }
 }
  • 97.
    Taking Screenshots withEspresso public class ScreenshotViewActions {
 
 public static ViewAction screenshot(final String folderName, final String fileName) {
 return new ViewAction() {
 // Other methods omitted.
 
 @Override
 public void perform(UiController uiController, View view) {
 ScreenshotsUtil.takeScreenshot(folderName, fileName, view);
 }
 };
 }
 }
  • 98.
  • 99.
    Sample Espresso Test publicclass StarsViewActivityTests {
 
 }
  • 100.
    Sample Espresso Test publicclass StarsViewActivityTests {
 
 @Test
 public void takeScreenshot() throws InterruptedException {
 onView(withId(R.id.stars_view_4)).perform(setStarsNumber(4));
 
 }
 }
  • 101.
    Sample Espresso Test publicclass StarsViewActivityTests {
 
 @Test
 public void takeScreenshot() throws InterruptedException {
 onView(withId(R.id.stars_view_4)).perform(setStarsNumber(4));
 onView(withId(R.id.stars_view_5)).perform(setStarsNumber(5),
 screenshot(FOLDER_NAME, "stars_with_text"));
 
 }
 }
  • 102.
    Sample Espresso Test publicclass StarsViewActivityTests {
 
 @Test
 public void takeScreenshot() throws InterruptedException {
 onView(withId(R.id.stars_view_4)).perform(setStarsNumber(4));
 onView(withId(R.id.stars_view_5)).perform(setStarsNumber(5),
 screenshot(FOLDER_NAME, "stars_with_text"));
 
 ScreenshotUtil.fullScreenshot(FOLDER_NAME, "stars_fullscreen");
 }
 }
  • 103.
    Bend it, don’tbreak it! Source: GIPHY
  • 104.
  • 105.