To Smartphones and Beyond: Screens Everywhere

What does an Android device look like? Perhaps, most people would visualize a Pixel or Samsung smartphone as the answer to the question. But it does not reflect the Android reality today. We can go from watches, smartphones, tablets, foldable devices, chromebooks, TVs, to car displays (Android Auto). The list of devices rendering Android apps becomes bigger and bigger. So does our way of implementing an Android screen still make sense?

In this presentation we would like to share with you our vision at Disney Streaming of what’s an Android device and how we find / live / resolve issues about the Android devices range.

Transcript

1. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney To Smartphones and Beyond Screens Everywhere
2. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney
3. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Sandra Dupre Guilherme Branco Tech Lead FED Design Eng Android 3 FIRESIDE CHAT Tech Lead B2B2C Android (This is Maddy, the fluffiest) (This is Madruguinha)
4. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney What’s an Android device today?
5. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney What’s an Android device today? 5 Mobile vs Tablet • Historic requirements • Become more complex • Does not reflect the reality
6. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney What’s an Android device today? - Samsung Split View
7. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney What’s an Android device today? 7 Also possible via: • Chromebook • Tablet “Free Form” • Samsung Dex Unique Feature?
8. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney What’s an Android device today? 8 Ratio • Design are usually on simple ratio • Pixel 3: ◦ Ratio: 0.5 • Samsung Fold: ◦ Ratio folded: 0.37 ◦ Ratio unfolded: 0.8
9. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney What’s an Android device today? 9 Pixel 3 Fold 3
10. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney What’s an Android device today? 10 Pixel 3 Fold 3 - Unfolded Multi View
11. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney What’s an Android device today? 11 Pixel 3 Fold 3 - Unfolded Standard View
12. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney What’s an Android device today? 12 < 600dp < 720dp
13. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney What’s an Android device today? 13
14. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney What’s an Android device today? 14 Mobile Tablet Chromebook Television Foldable device Bendable device ? Free Form Windows 11
15. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney What’s an Android device today? 15 iOS Android ? Web
16. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney What’s an Android device today? 16 Learnings • Start discussion with Designers • Design System can help • Try your app on multiple devices
17. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Beep Boop Interact with the device
18. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Beep Boop: Interact with the device 18 Mobile: touch screen
19. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Beep Boop: Interact with the device 19 (story time) QA try EVERYTHING (they are amazing) Mobile (Fold2) -> Keyboard ->
20. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Beep Boop: Interact with the device 20 QA try EVERYTHING Solutions: • Enable Chromebook keyboard handling on all devices • Improve it to make it all keyboard compliant
21. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Beep Boop: Interact with the device 21 Television: Remote control
22. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Beep Boop: Interact with the device 22 Television: GamePad
23. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Beep Boop: Interact with the device 23 TV Controls • Different TV box == different remote • KeyEvent: 742 possible keys ◦ GamePad: KeyEvent isGamepadButton() contains 30 KeyEvent
24. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Beep Boop: Interact with the device 24 TV Control • Default Focus: not enough ◦ Desire to keep control on User journey ◦ Default focus lost sometimes • Accessibility on TV: ◦ Painful ◦ Override Key Event listener
25. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Beep Boop: Interact with the device 25 S Pen • Samsung pen available on last Tablets (S7+...) and Fold 3 • S Pen triggers the hover state
26. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Beep Boop: Interact with the device 26 S Pen view.setOnHoverListener { _, motionEvent -> when (motionEvent.action) { MotionEvent.ACTION_HOVER_ENTER -> /* SCALE UP! */ MotionEvent.ACTION_HOVER_EXIT -> /* SCALE DOWN! */ } true }
27. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Beep Boop: Interact with the device 27 S Pen
28. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Beep Boop: Interact with the device 28 Learnings • Focus handling should be on all devices (not only TV and Chromebook): ◦ Keyboard / Remote compliance ◦ Hover state • Key event handling Accessibility override
29. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 29 Partners
30. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 30 Partners • Platform Partners • Smart TV Devices • Operator Tier Partners Categories
31. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 31 Platform Partners Partners
32. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 32 Platform Partners Partners
33. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 33 Partners Smart TV Devices & Operator Tier Partners • Sometimes the Disney+ app is pre-Installed by the Partner • Partner access our APIs • Custom Onboarding/Billing Flow • Can be AOSP • UI Customizations: Welcome screen logo, specific copy
34. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 34 Partners Smart TV Devices & Operator Tier Partners
35. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 35 Target Overrides
36. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 36 Target Overrides Platform
37. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 37 Target Overrides Partner
38. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 38 Target Overrides Device
39. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 39 Target Overrides Partner
40. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 40 Target Overrides Device
41. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 41 Target Overrides Device
42. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 42 Target Overrides Device
43. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney 43 Tests
44. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Tests 44 QA Team • Two teams: Mobile and Android TV / Set-top Boxes • Manual Testing • Automated End-to-end tests (black box) • FCs and RCs builds
45. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Tests 45 Dev Team • Before & After
46. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Tests Local Branch / PR * Feature team’s responsibilities * Smoke Test Unit Tests UI & Integration Tests Manual Testing
47. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Tests 47 R2D2 Framework • Helped solving common issues • Allows developers to easily override Http responses while running the tests • Manipulation of state before, during, and after each test • Simple DSL to write instrumentation tests ◦ Espresso and UIAutomator extensions ◦ Page object pattern • Annotations: for teams, smoke tests, core tests • Integrations/Tools ◦ Dynamic script: Select project, run by team, run by annotations… ◦ Slack Integration: Trigger build to run tests by team or all ◦ PR Integrations: In progress
48. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Tests Local Branch / PR Unit Tests Manual Testing UI & Integration Tests
49. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Tests 49 Learnings • Work closely with Partner ◦ Facilitate onboarding process of new devices • Instrumentation tests: Challenging to keep a stable nightly build when Developers are not aware of the tests • Instrumentation tests: Still collecting data, feedback, working with developers ◦ More integrations
50. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Questions?
51. Disney Media & Entertainment Distribution • Disney Streaming • INTERNAL USE ONLY ©Disney Thank you