Surface Duo Blog
Build great Android experiences, from AI to foldable and large-screens.
Latest posts
Foldable Navigation Rail
Hello Android developers! This week we’re excited to share with you a new library to make it easy to support Navigation Rail on foldable devices like Surface Duo. Navigation Rail package One of the tricks when building mobile apps for Surface Duo devices is to avoid your UI being obscured by the hinge. Controls that aren’t aware of foldable devices may place elements “under” the fold area, making them hard to read and touch: To avoid this typically requires custom code using the from the Jetpack Window Manager, observing changes to the , and adjusting the layout accordingly. ...
Designing for foldable and large screens
Hello app designers! Today we are going to talk about designing for foldable and large screens. We’ve been practicing responsive web design for a long time - let's use those concepts to optimze your mobile app for different platforms and devices. Mobile apps can use adaptive designs to deliver a consistent app experience. In today’s blog, we will be talking about the design recommendations when adapting your app to foldable and large screens. Design for unique posturesPosture overview The difference between foldable and large screens with regular mobile devices is the diversity of postures. Postu...
Show off your apps with Phone Link
Hello Android developers! This week we’re going to share some tips and tricks to help you show off your development work in meetings, livestreams, recordings, blog posts, or anywhere else you want a video or still of your app! Demo-ing with Phone Link Your phone’s screen can be mirrored on Surface Duo and other supported devices by using Phone Link. The mirroring is done via WiFi and works best with a strong wireless network connection. The following steps are required to set up Phone Link: It doesn’t require any adb or other technical setup which means it can al...
Jetpack Compose Accompanist TwoPane
Hello Compose developers! This week, we’d like to talk about the TwoPane layout from Google’s Accompanist Adaptive library! Not to be confused with our own Microsoft Compose SDK TwoPaneLayout component, TwoPane from Accompanist is a fold-aware UI component that works great for cases when you always want to show two pieces of content. Accompanist libraries If you’re unfamiliar with Accompanist, it’s a group of support/utility libraries built for Jetpack Compose. These libraries are considered to be more experimental, which is why they’re not yet part of AndroidX, but according to Google, th...
Improving app accessibility with Jetpack Compose
Hello Jetpack Compose developers! This week, we’d like to share how we started improving the accessibility of our Compose samples. Accessibility in Android can relate to many different aspects of your apps, ranging from content descriptions and color contrast to layout hierarchy and touch target size. Regardless of where you start, know that improving accessibility will ensure better experiences for all users! Figure 1. The DragAndDrop sample view groupings in TalkBack before and after accessibility updates. Getting started Before making any changes to the samples, we first s...
Surface Duo Design Kit 2.2 update
Hello app designers! Our Surface Duo Design Kit is now updated to version 2.2. If you haven’t heard of this kit before, Surface Duo Design Kit is the go-to place where you can find all our UX design suggestions and UI components for both Surface Duo and Surface Duo 2. It includes many of the interface components which you can handily grab and use. About a year ago, we released the Surface Duo Design Kit v2.0, and since then we have been continuously fixing issues, adding new components, and providing more samples to help you use this kit to design your apps. In this v2.2 update, we mainl...
Dual-screen example adds Jetpack Compose to the experience
Hello Compose developers! This week, we’re excited to announce two big updates to our dual-screen experience example: a Compose refactor of the catalog page and a brand new order history page. The dual-screen experience example provides an end-to-end experience centered around a travelling guitar salesperson, with options to find fake guitar stores, read a catalog, browse products, place fake guitar orders, and now, view order history. Figure 1. Screenshot of the new catalog page The main goal of this sample is to highlight the different ways developers can take advantage of the du...
Experimenting with postures in Flutter
The things I'm doing in this article are highly experimental. By the end of it hopefully you will agree with these two statements: To achieve the desired behavior, I end up using several hacky techniques which I would think twice before shipping to production. This article is not a tutorial. It is a story of the fun I had with flutter and Surface Duo. Proceed with caution, you have been warned 😊. What I built First let’s have a look at what I am trying to achieve. This video walks you through the idea; I also explain the idea in text and image in this section: Imagine a two-player t...
droidcon Berlin and Surface Duo video collection
Hello Android developers! This week we were inspired by a forum question about interesting Surface Duo media content and provide a variety of different video and audio resources where you can learn more about Surface Duo, foldable devices, and dual-screen Android app development! If you want to chat in person, we’ll also be at these upcoming droidcon events: Please come visit us and share your foldable and large screen development experiences! droidcon Berlin During July 6-8 we had the pleasure to participate in droidcon Berlin. We spent three fantastic days meeting the Android...