DESIGN.
CODE.
LAUNCH.

On November 17th, 2021, in partnership with Microsoft, we hosted Design Code Launch—an event about creating experiences within the Android ecosystem, from large-screen to dual-screen.

The event focused on building Android apps on large and dual screen devices, such as Surface Duo. This blog summarizes the event and the highlights how our in-hour experts engaged with guest panellists from Microsoft and Atlassian to discuss their unique views on creating experiences for modern mobile form factors. We aimed to inspire creators with fresh development ideas and motivate design challenges.

If you want to watch the recording, please view this next section.

The Webinar Agenda

Reference the time-stamp below to jump to ahead in the YouTube recording.

• Intro – 0:00
• Designing the ultimate user experience – 6:18
• Dive into Android app development – 28:06
• A case study by Atlassian – 1:08:07
• Q&A – 1:36:35

Design.

Just like building a successful application starts from design, so did our webinar. Claudio Afonso, the design lead at A-CX presented this chapter with Mehul Shah, a UX designer from Microsoft as a guest speaker. Their presentation covered, e.g.:

• The intricacies of Foldable and Two-Screen devices
• Some Do’s and Dont’s from their experience
• How to get started, and how to work towards success

If you’d like to jump straight to the Design presentation, it starts at 6 minutes 18-sec mark of the video.

Code.

After we had laid a strong foundation and understood how to design a compelling app, we dove into coding. Ilpo Niva, from A-CX, presented this chapter with Cesar Valiente from Microsoft Surface Duo DX team. The Code chapter of the presentation covered topics such as:

• Bridging design to development
• capabilities of the Android platform and the opportunities it provides for developers
• focusing on Jetpack WindowManager and SlidingPaneLayout

The Code presentation starts at 28 minutes 6 of the recording. 

Launch.

Once we have designed a meaningful application that solves real-world problems and developed it, it’s time to Launch. This part of the event was presented by Mikko Peltola from A-CX Product Management and Andras Nemeth from Atlassian. The presentation focused on:

• Past trends and research supporting the assumption that large and dual screens are the future
• Developers’ and clients’ drivers and motivations for building an application
• Atlassian’s (Jira) app development journey from generic to large to dual screens

The Launch presentation can be found at 1 hour 8 minutes and 7 seconds mark of the video.

Q&A of the Design. Code. Launch. event

The final chapter of the event was interactive in nature. The audience asked questions and all the six presenters were in the panel answering them. The questions are presented here (with minor edits for clarity.)

• What are the key differences between designing for the Duo and other Android Foldables?
• Are those 5 design patterns guidelines or rules?
  • This references the design patterns Claudio and Mehul present during the event
• Are there any other things that I should consider to make an app aware of other open apps?
• How do you decide what to show on a really small view vs. when your app is, for example, spanned to cover the maximum available canvas?
• Does it matter which layouts are used on WindowManager, lie constraint, linear, etc.?
• Can you define minimum and maximum sliding panes?

• Are there emulators for all these different form factors for Android Studio?
• Does it require more coding when creating apps for multiple platforms?
• How long a time did it take for you to build the Dual screen app on top of the iPad app?
  • This is for Andras and his experience at Atlassian
• What kind of feedback have you received from your users regarding your mobile app on different platforms? Do people that try Dual screen like it?
• What’s been the hardest puzzle to solve while building large, foldable or dual-screen apps?
• How do you decide when to build a design prototype using FIGMA etc. vs. a proof-of-concept built by engineers to test your designs?
• Where to find more resources on dual-screen application development?
• Can A-CX help my application development needs for dual screens
• How do I get more information on DUO devices?

The Q&A part starts at 1 hour 36 minutes 35 seconds of the video.

Next steps

We have provided a number of links to useful resources. These include SDKs and code samples, training and community material, and case studies. You can read more of our thoughts on our blogs. If you’d like to continue the discussion or get help, you’re always welcome to reach out to us. We’re a curious team with a passion for building the mobile future. Don’t be shy to get in touch!

Supporting blog posts

Designing engaging apps for Surface Duo
Why are foldable and dual screen phones the future?
Android development for different form factors
Building engaging apps for MS Surface Duo starts with the design
Research: productivity on large and dual screens devices

Additional resources

Content

Dual-screen Android Developer documentation: 
https://aka.ms/dual-screen

Surface Duo Design Kit: 
https://www.figma.com/community/file/925222050648034066

Surface Duo developer blog: 
https://aka.ms/surfaceduosdk-blog

SDK and sample code:

Dual-screen SDK: 
https://github.com/microsoft/surface-duo-sdk

App samples: 
https://github.com/microsoft/surface-duo-app-samples

Kotlin samples: 
https://github.com/microsoft/surface-duo-sdk-samples-kotlin

Java samples: 
https://github.com/microsoft/surface-duo-sdk-samples

Compose samples: 
https://github.com/microsoft/surface-duo-compose-samples

Flutter samples: 
https://github.com/microsoft/surface-duo-sdk-samples-flutter

React Native samples: 
https://github.com/microsoft/react-native-dualscreen

Xamarin samples: 
https://github.com/microsoft/surface-duo-sdk-xamarin-samples

Unity helper: 
https://github.com/microsoft/surface-duo-sdk-unity-samples

Training

Google Foldables and Dual Screen CodeLab: 
https://aka.ms/CodelabWM

Xamarin and Surface Duo Microsoft Learn: 
https://docs.microsoft.com/en-us/learn/modules/xamarin-forms-dual-screen/

Community

Surface Duo Tech Community: 
https://techcommunity.microsoft.com/t5/surface-duo-sdk/bd-p/SurfaceDuoSDK​

Twitter: 
https://twitter.com/surfaceduodev

Twitch channel: 
https://www.twitch.tv/surfaceduodev

Twitch Session Archive: 
https://www.youtube.com/channel/UClGu9QLtPNz8OdddBfhZXPA

Other

Sliding Pane Layout blog: 
https://devblogs.microsoft.com/surface-duo/foldable-slidingpanelayout-preview/

Dual-screen websites with use origin trial key (until support is stable): 
https://devblogs.microsoft.com/surface-duo/dual-screen-website-edge-origin-trials/

Chromium DevTools: 
https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/device-mode/dual-screen-and-foldables

Video playback on foldable devices: 
https://devblogs.microsoft.com/surface-duo/exoplayer-video-foldable-dual-screen/

Public Case studies

Microsoft News Case Study: 
https://devblogs.microsoft.com/surface-duo/enhance-microsoft-news-dual-screen/

Microsoft Outlook Case Study: 
https://devblogs.microsoft.com/surface-duo/outlook-dual-screen/

Microsoft OneDrive Case Study: 
https://devblogs.microsoft.com/surface-duo/enhance-onedrive-dual-screen/

The first DroidCon webinar recap blog with links to content: 
https://devblogs.microsoft.com/surface-duo/droidcon-webinar-recap/

Jira Case Study Video from DroidCon co-presentation:
https://player.vimeo.com/video/459435783?autoplay-1#t=1h04m56s