Etsy - Android & Design

•

37 likes•6,422 views

Etsy's Paul Lau (Product Designer) and Deniz Veli (Engineering Manager) talk about the collaborative design and development process building Android apps at Etsy

Technology

• Dimensions - 10 inch Tablets
• res/values-sw720dp/dimens.xml

• In code TabletSupportUtil
• res/values/bools.xml
• res/values-sw600dp/bools.xml
• res/values-sw720dp/bools.xml

• Touch States
• 10 % black (#1A000000)
• Shapes for Android 2.3
• Animations for that gentle touch

Android Resource System
• colors.xml
• integers.xml
• styles.xml
• strings.xml
• Overall best practice - don’t rely on
constants in your layout or drawable
XML or in your code. Use the Android
resource system to help you.

• Cutting assets
• Densities
• OLD - mdpi - hdpi - xhdpi
• NEW - hdpi - xhdpi - xxhdpi
• 3 sizes is plenty - older devices
can scale - don’t make your
designer angry

ICON FONTSS!!!11!
• WHOAAAAA
• Fewer assets
• Open Source Comin

Stop, Collaborate, and Listen.
www.etsy.com/careers

Resources
• Blur Effect like Etsy via
Stackoverflow
• Android Staggered Grid via
Github
• Export Asset Script
• Code as Craft
Deniz Veli
@denizmveli
Paul Lau
@paulingford

Similar to Etsy - Android & Design

UI and UX for Mobile DevelopersMohamed Nabil, MSc.

Creating apps that work on all screen sizesRavi Vyas

Ts android supporting multiple screenConfiz

Designing Android apps for multiple screensAbhijeet Dutta

AndroidfragmentNarender Singh

Infinum Android Talks #03 - Android Design Best Practices - for Designers and...Infinum

Android training day 3Vivek Bhusal

Android resourcesma-polimi

Supporting multiple screens on androidLi SUN

Fernando F. Gallego - Efficient Android Resources 101Fernando Gallego

How to deal with Fragmentation on AndroidSittiphol Phanvilai

Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent WebRita Troyer

Making Your Site Printable: Booster ConferenceAdrian Roselli

The state of front end architecture_in_2015Aidan Foster

Cross Device UI DesigningDeepu S Nath

Consistent UI Across Android DevicesIrene Duke

Xamarin Evolve 2014 - Designing Android UIs for the Ever Changing Device Land...mstonis

Coding for different resolutionsRobin Srivastava

Responsive Web Design: Clever Tips and TechniquesVitaly Friedman

Android Programming BasicDuy Do Phan

Similar to Etsy - Android & Design (20)

UI and UX for Mobile Developers

Creating apps that work on all screen sizes

Ts android supporting multiple screen

Designing Android apps for multiple screens

Androidfragment

Infinum Android Talks #03 - Android Design Best Practices - for Designers and...

Android training day 3

Android resources

Supporting multiple screens on android

Fernando F. Gallego - Efficient Android Resources 101

How to deal with Fragmentation on Android

Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web

Making Your Site Printable: Booster Conference

The state of front end architecture_in_2015

Cross Device UI Designing

Consistent UI Across Android Devices

Xamarin Evolve 2014 - Designing Android UIs for the Ever Changing Device Land...

Coding for different resolutions

Responsive Web Design: Clever Tips and Techniques

Android Programming Basic

Recently uploaded

Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren

DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell

How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe

Anypoint Exchange: It’s Not Just a Repo!Manik S Magar

Advanced Computer Architecture – An IntroductionDilum Bandara

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada

Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3

DevEX - reference for building teams, processes, and platformsSergiu Bodiu

What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos

Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro

Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdfPrecisely

The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech

Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed

WordPress Websites for Engineers: Elevate Your Brandgvaughan

Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation

SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal

Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar

Search Engine Optimization SEO PDF for 2024.pdfRankYa

Recently uploaded (20)

Advanced Test Driven-Development @ php[tek] 2024

DSPy a system for AI to Write Prompts and Do Fine Tuning

How AI, OpenAI, and ChatGPT impact business and software.

Anypoint Exchange: It’s Not Just a Repo!

Advanced Computer Architecture – An Introduction

Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024

Designing IA for AI - Information Architecture Conference 2024

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx

DevEX - reference for building teams, processes, and platforms

What's New in Teams Calling, Meetings and Devices March 2024

Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)

Unraveling Multimodality with Large Language Models.pdf

Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf

The Ultimate Guide to Choosing WordPress Pros and Cons

Scanning the Internet for External Cloud Exposures via SSL Certs

WordPress Websites for Engineers: Elevate Your Brand

Connect Wave/ connectwave Pitch Deck Presentation

SAP Build Work Zone - Overview L2-L3.pptx

Unleash Your Potential - Namagunga Girls Coding Club

Search Engine Optimization SEO PDF for 2024.pdf

Etsy - Android & Design

1. Android & Design It could work!

3. The A-Team

4. Ideas • Implementation • Shipping

5. Ideas Navigation

8. Ideas Listing

10.

11. Ideas Staggered Grid

12.

13.

14. Implementation

15. Android Resources

16. • Dimensions • res/values/dimens.xml

17.

18. • Dimensions - 10 inch Tablets • res/values-sw720dp/dimens.xml

19. • In code TabletSupportUtil • res/values/bools.xml • res/values-sw600dp/bools.xml • res/values-sw720dp/bools.xml

20. • Touch States • 10 % black (#1A000000) • Shapes for Android 2.3 • Animations for that gentle touch

21. Android Resource System • colors.xml • integers.xml • styles.xml • strings.xml • Overall best practice - don’t rely on constants in your layout or drawable XML or in your code. Use the Android resource system to help you.

22. • Cutting assets • Densities • OLD - mdpi - hdpi - xhdpi • NEW - hdpi - xhdpi - xxhdpi • 3 sizes is plenty - older devices can scale - don’t make your designer angry

23. ICON FONTSS!!!11! • WHOAAAAA • Fewer assets • Open Source Comin

24. Reduce, Reuse, Recycle!

25. Shipping & VQA

26.

27.

28.

29. Stop, Collaborate, and Listen. www.etsy.com/careers

30. Resources • Blur Effect like Etsy via Stackoverflow • Android Staggered Grid via Github • Export Asset Script • Code as Craft Deniz Veli @denizmveli Paul Lau @paulingford

Etsy - Android & Design

Recommended

Recommended

More Related Content

Similar to Etsy - Android & Design

Similar to Etsy - Android & Design (20)

Recently uploaded

Recently uploaded (20)

Etsy - Android & Design