[MUSIC]
>> Hello. My name is Guy Merin,
and I'm the Engineering Director in
the Microsoft Surface Duo Developer Experience team.
Our team role is to work with you, the app developer,
and provide you SDKs,
tools and guidance on how
to build great dual-screen apps.
Today, I would like to show you the Surface Duo.
I will demo a few cool app scenarios and get you
started on adding dual-screen support to your app.
Let's start.
This is the Microsoft Surface Duo.
[MUSIC]
>> Hello. You ready?
>> What do you think about that? Isn't that cool?
Before we drill down even more into the software,
let's cover some of the unique hardware
features that the Surface Duo has.
This device is the thinnest screen on the planet.
It's 4.8 millimeters when it's open
and less than a centimeter when it's closed.
The device has 8.1 inch when fully opened,
with two panes of 5.6 inch each.
But it all boils down to the dynamic hinge.
The hinge allows a 0-360 angle,
which gives you the flexibility to do
more with various device postures.
On the software side,
Microsoft Surface Duo allows you to
run two apps side by side,
giving you more into focus and
less context switching between apps.
You can easily drag and drop content between
two apps and across the two screens.
Many apps are already enhanced,
meaning they are optimized to
utilize both the screens.
These apps have more screen real estate
and more opportunities
to interact with users.
App groups allows you to launch two apps at the same time,
one on the left pane and one on the right pane.
The hinge allows flexibility for many postures.
You can hold the device in the open mode,
just like a book,
which is helpful for your morning reading
of emails or catching up on your to-dos.
The device also supports pen and
note taking to help you to be productive.
When you're making a phone call,
you can flip the device to one side only.
When you're watching a video or playing a game,
the tent mode can come in handy.
When a device is closed,
you can pick it up and have a quick glance to
see notifications or just the time of the day.
We call this the peak mode.
Let's see some more cool demos.
In this example, we have two apps running side by side.
Teams for your video conference
along with PowerPoint,
showing the deck that
is currently being presented
in the meeting you're attending.
When two apps are running side by side,
drag and drop can come in super handy.
In this example, you can easily drag content
from an email and into your daily to-do list.
Think about what you can do in
your app with drag and drop support.
Your app can provide lots of dual-screen value
even when it's running on a single screen.
In this example, clicking an attachment in
an email launches Word on the other screen,
keeping the user in their flow with
less context switches between the apps.
Consider what kind of activities
intent your app can launch on the other screen.
App groups are combos of two apps
that will launch in a single-click on both the screens.
In this example, I can easily plan my day
having my emails on the left screen
and my calendar on the right screen.
Both apps are launched at the same time.
When I want to read a specific email,
I can go into reading mode,
spanning Outlook across both devices
and get more real state to read the mail.
Let's talk about the tools and support we have
ready for you, the developer.
Our goal from day one is
to meet developers where they are at.
We do so by supporting
all major mobile platforms
from native support using Kotlin, Java,
to cross-platform solutions,
such as Xamarin, Flutter, and Unity
for game developers.
For web developers, we have SDKs
for developing dual-screen webpages,
web apps and PWAs,
along with React Native and Cordova support.
We're in the process of adding support to
Power Apps with no-code and low-code solution.
Whatever programming language you are comfortable with,
we got you covered.
Our tools also work on your favorite IDE,
Android Studio, Visual Studio or Visual Studio Code.
Developer content is ready for you now and you can
access it in our dual-screen
documentation that is shown here.
Start by downloading the emulator today
and try out one of our built-in samples
that we have integrated in the emulator.
Our samples cover SDK usage,
dual-screen controls, layout,
and some best practices.
We are revolving them in our monthly releases.
Make sure you follow our blog post for news.
You might have already noticed
the emulator that is shown here
includes a new button for
flip and folding the device and control the hinge.
This is a contribution we recently pushed upstream and is
now available natively in the Surface Duo Emulator.
Time to talk about your app now.
Follow our three-step guide to adapt it to dual-screen.
Start by testing your app on dual-screens.
You can use the emulator for that.
Second, make small increments,
so your app will work better when
running side by side with another app.
Then, and this is where the magic happens,
think about what you can do in your app now that you
have two screens to present content to your users.
Let's dig down into these three steps.
Step 1. When testing your app,
make sure you don't have aspect ratio assumptions
which can affect the placements of UI.
Also avoid locking to a specific orientation.
The device is meant to be versatile in many postures.
Make sure to try all those scenarios
when you're testing your app.
Step 2. When making changes to your app,
consider adding drag and drop support.
Your app can be a source for
content or as a target destination.
Take a look today at one of our samples.
They contain code for you to copy paste into your app.
You can also think about interactions that your app
can do on the other pane with a one-light cone change.
Adding a flag to start activity for your app
will launch content on the other pane.
You could also launch other apps or
intends to complete your user flows.
Step 3. Embrace the fact that
you now have two screens available for your app.
For that, we have
a dual-screen design pattern
ready for you to use in your app.
Think about the different layouts and
different device postures you want to support.
Which one fits your app well?
How will your app present content in dual landscape,
dual portrait, when the device is flipped,
or when it's in a tent mode?
Let's look at some of these design patterns.
Extended canvas is one big layout,
span across both screens.
Use this pattern to get
more screen real estate
and present more content to your users.
This can be great for showing images, map,
zooming in and out of large canvases,
and great for drawing or viewing spreadsheets.
List-detail can be great for fast email browsing,
showing search results or
other specific details on the other screen.
Two page can come in handy for a reading mode,
such as a book and magazine reading app
or just for presenting long pageable content.
Dual view provides ways to see
the same content in two screens side by side.
It can come in handy for comparison of content
or for showing a before and an after view.
The companion pane is a view that
can have control content on the other screen.
For example, a gaming app can place
the gaming controls on the bottom
while the game is on the top.
A video creation app can use
the other pane for
editing controls in additional settings.
We've put together a few design guidance
to help you make the right choices.
First, spanning should provide additional user value.
But remember, the user is always in control,
so your app should work great both on
a single screen usage or when it's spanned.
Make sure the transition between
single screen and span mode are predictable
and make sense to the user and your app.
Let's talk about the SDK now.
First thing is to reason over the seam.
The seam is there and we draw
underneath it for total app flexibility.
To help your app be hinge and screen aware,
we worked with Google to add native support for
dual-screens and foldable devices.
This is now included in
Jetpack WindowManager package and ready for
you to add to your build.gradle file today.
You can use these APIs to know
the device orientation, posture,
spanning mode, and if the device is
a hinge type or a foldable screen type device.
We want you to focus on creating what's
important content in your amazing app.
We've added more libraries and
dual-screen controls to help you.
The ScreenManager is the core library
that has classes for screen info.
You can add a listener to get
notified when the screen mode changes,
so you can change the layout in your app accordingly.
The SurfaceDuoLayout has
a SingleScreen mode or DualScreen mode.
It has two containers when in span mode,
and one container in a single-screen mode.
We also have controls for bottom navigation,
tab layout, recycle view,
and more and more content is coming.
The hinge angle is the angle that
is calculated between the two panes.
For example, this is 180 angle.
Surface Duo, the hinge is fully flexible and
can support angles from 0-360.
We expose the raw data as one of
the device sensors and you can
register to get the callback when it's changing.
Follow our samples and think about
how you can utilize it in your app.
What you saw is a Native SDK support,
but we want to meet developers where they are at.
Let's see some of the cross-platform SDKs
we have ready for you.
If you're a React Native developer,
we have an SDK for you.
We recently partnered with Google to add
foldable for dual-screen support for flutter on mobile.
Check it out and take a look at our announcements.
We're also adding more samples for
flutter in the next few weeks.
If you're a C-Sharp developer,
we have Xamarin and Xamarin.Forms
support for your dual-screen apps.
For game development, we got you
covered with a Unity engine SDK.
If you're a web developer,
we've added new web standards for dual-screen layouts,
including CSS primitives in JavaScript,
Window Segment APIs.
But our support doesn't stop there.
In addition to our SDKs for developers,
we created Figma design kits,
focused on our dual-screen design patterns.
The design kit can help designers in
your team create great looking apps.
Let's take a look at the design kit with a few demos.
Another way to get started with dual-screen development
is to complete one of our learning courses.
This is the Surface Duo Design Kit.
Start by duplicating it for your local environment.
We're currently at 0.3 version.
This is the landing page.
Here you can see some of
the guidance we showed you before.
Some dos and don'ts,
all the controls, the asset panel, and the components.
Let's see some of the design patterns.
Here you can see all the design partners we showed.
For example, extended canvas,
the list-detail, the two page, and others.
In the component part,
we have code ready for you as well here.
So for example, if you want to use a Tooltip,
you can pick any of these components and you can
see when you go to inspect the code behind it.
Make sure you select the Android version of it
and then you can see the code here,
which is ready for you to copy-paste.
We also have assets for postures,
controls, and layouts, and device frames.
We're currently at version 0.3.
So make sure you check up
every month because we're updating it monthly.
Let us know what you think and how
else we can support you.
We've put together a nine unit model
on Microsoft Learn that
focuses on building dual-screen apps using Xamarin.Forms.
We also partner with Google to create
a foldable dual-screen codelab that is
focused on Kotlin and the usage of
Windows Manager library that we just saw here today.
Try it out and let us know what you think.
Another great source of learning is our weekly Dev Blogs.
Since the announcement of Surface Duo,
we've been posting weekly blogs with tips and tricks,
code samples, and SDK announcements.
This is where we answer common questions
we get from developers.
Check out our blog, ask questions in our forum,
and let us know how else we can support you.
Back to demos now.
I would like to introduce
Andy Hamburger that leads
the Outlook Mobile Engineering Team.
Andy, will cover the developer journey with
the Surface Duo and share some
of their engineering best practices.
>> Thanks Guy.
Hi. I'm Andy Hamburger from the Outlook Mobile team.
I'd like to share a bit of our journey
to supporting the Surface Duo.
You may be familiar with Outlook on the phone.
Outlook also supports Android tablets with
list-detail views that are great for productivity.
Our tablet list-detail view
translates naturally to dual-screens.
It's super easy to open compose on
the second screen or
another app that you can drag and drop between.
We even added support for viewing
your mail and calendar at the same time.
When planning our support for dual-screen,
we had to be a bit pragmatic in our approach.
In the Outlook app, we have over 100 activities.
Not every activity even has
enough content to make use of both screens.
We obviously focused first on where
the most time is spent in the app,
mail, calendar, and search,
and second, made sure in other activities,
nothing would be showing up behind the hinge.
Let's go into more specifics.
First, the list-detail view in the mail module.
On tablets, we have a draggable resize bar.
For Duo, we updated our codes to use
the display mask API to detect if there's a hinge.
If there is, we put a spacer
there instead of the resize bar.
Note, the Duo SDK provides a view called
SurfaceDuoLayout that can do this detection for you.
In our case, we updated our apps custom list-detail view.
Next, we wanted to cover all other activities.
We make use of Android's dialogue
when large theme in many places,
like the favorite folders activity in this first example.
Duo automatically positions this
on the second screen when spanned.
The second case shown here is
an example in our onboarding experience,
we built a container that would put
our existing view on a single screen, avoiding the hinge.
We also added the ability to show some fixed content on
the opposite screen to
be a little better than just blank.
A lot of our work translated
easily to other foldable devices.
For example, even without a hinge,
we enabled side by side compose for other foldables.
My advice to you get familiar with
the Duo SDK and Jetpack Window Manager.
Prioritize your most used views for the best experience.
If you still have more activities left to update,
at least make sure you don't have long strings or
centered content that will appear behind the hinge.
I've included a link here to a blog post
that describes more about our list-detail view.
Thanks Guy for inviting us to share our story.
>> Thank you Andy. Outlook Mobile
looks amazing on Surface Duo,
and great that the same code runs on
other foldable devices as well.
Make sure to catch up with
the Outlook Dev Blog that Andy mentioned here
for more details and code.
I would like to recap some of
the items we discussed here today.
Follow our three-step guide to
get your app ready for dual screens.
Step 1. Test your app. It should just work.
Step 2. Make small changes.
Consider drawing a job,
launching activities on the other screen,
or adding pen and inking support.
Step 3. Think about how you can utilize one of
our dual-screen design patterns in
bringing more value to your app.
Dev Resources such as the SDKs, samples,
emulator in our design kit
are ready for you to download today.
Make sure to follow our weekly blogs,
our Twitter account, and our Twitch channel.
This is where you can catch up on our frequent updates.
I'm Guy Merin and it's been a pleasure
talking to you today at Build 2021.
Let us know if you have any feedback or questions.
Thank you. Peace.