How to develop apps for foldable devices

2019 was a groundbreaking year for foldable devices. Samsung presented foldable smartphones at a global conference, and later that year, released Galaxy Fold. Some experts speculate that Apple may release a foldable device soon — although this wasn’t confirmed officially.  Either way, foldable devices are already here. Developers should adapt to this change and take a deeper look at the requirements for foldable apps and their user experience. If the innovation is here to stay, the competition on the foldable development market will get fierce — but now, it’s an open niche.  

What are foldable screens?

Foldable phones are smartphones with screens that can be folded into a double-size full-screen display. Potentially, such devices can provide users with an immersive experience, offering more space for Internet browsing, content watching, reading, etc. The possibility to fold the device back makes it convenient for transportation.  Characteristics of ‘Galaxy Fold’ screens Samsung has been the front-runner of the technology — the company presented Galaxy Fold, a device that can be unfolded into a full screen. It’s thin and durable — according to the company, users will be able to fold and unfold the device as much as they want. Here are the key characteristics that developers need to be familiar with: 

• Resolution: 840×1960 on the folded version, 1536×2152 on the full screen.
• Size: 4.6 inches for the standard format, 7.3 inches for an unfolded double display.
• Screen width: 320 dp for the small version, 585 for the fullscreen one. 

Hopefully, this gives you an idea of the basic hardware characteristics. Now that you know what to work with, let’s examine what applications can benefit from the foldable technology. 

Types of applications for foldable screens

Foldable screens aren’t just a technology gimmick or innovation for the sake of it. This approach comes with multiple benefits and use cases. Here’s the rundown of the most prominent app ideas for foldable screens. 

• Internet browsing. Adapting browsers, news applications, and social media to foldable screens should be a key priority. The technology is perfect for multitaskers: not only can you view multiple tabs simultaneously, but also you can watch videos while messaging people online, post on social media and listen to music, or open several forms of content. 
• Software development and testing. When you build or test a mobile app, it’s convenient to keep track of code itself, see the output, and access development tools. Thus, development environments, frameworks, and testing software should be among the first adopters of the technology.
• Productivity apps. Multitaskers will benefit from having more screens to work with. Team and task management platforms should be adapted to foldable displays which means enabling multi-tab and full-screen interaction on mobile apps. 

Foldable smartphones have the potential to deliver a desktop experience from a mobile device. In the folded version, they will still fit in the pocket, but the fullscreen mode will get users to almost desktop dimensions. 

Requirements for apps for foldable screens

Constant changes to screen sizes and multiple display versions require a special approach to app development and testing. Here are the key requirements for foldable mobile apps. 

• Continuous experience. When the screen’s configuration changes, the app should automatically adapt to the new interface. This resizing shouldn’t affect the functionality or the progress made by users while using the app. The experience should be seamless regardless of the app’s size.
• Large screen experience. Developers need to develop a desktop-like version of their mobile application, while still keeping it native for mobile functionality. This requires a combination of approaches in mobile and desktop development and design.

• Developing separate user interfaces. Developers and designers should adapt the interface to small- and fullscreen modes. The folded version might feature less text, or less complex functionality, whereas the unfolded one should provide additional features. 

If the development and testing teams can cooperate early on, it makes the adoption of the technology much easier. Ideally, designers should consult developers at the very beginning — to make sure that the interface corresponds with coding standards. 

A step-by-step guide to building a foldable screen application

So far, folding apps can only be supported by Android. Google has already implemented the support of foldable apps into their OS and released official development guidance. In reality, folding and unfolding processes are based on changing screen size, ratio, and density. These configuration changes are already required by many common scenarios, for instance: 

• Variation of landscape and portrait modes triggers a change in interface, similar to the folding scenario.
• Additional screens: phones with two and more screens were released a long time ago, and they also allow full-screen projection.
• Running mobile apps on desktop: if you open the app on a computer, it will be adapted to the fullscreen. 

So, practices, used for unfoldable apps, aren’t new. If you are familiar with standards for responsible mobile design and development, adapting to foldable smartphones will not be a challenge. Overall, the foldable app development process can be boiled down to four simple steps. 

Resizing the app

To enable seamless app’s functionality in full-screen and with multiple windows, focus on providing seamless resizing. By adding resizeableActivity=true, you allow the application to adapt its interface to various environments and devices. To check how resized versions look, use Foldable emulation.  For some apps, however, keeping resizeableActivity=false is the only option. If the application features a complex graphic interface or complicated functionality, adapting it to various sizes could bring distortions and impair user experience (like in mobile games). To solve this issue, set a maxAspectRatio instead. This will keep the application running in its original dimensions, delivering the same experience. 

Setting up multi-windows user experience

Foldable applications are capable of running multiple tabs at the same time. These windows can interact with each other via drag-and-drop, receive updates (when the change is applied to one tab, it’s immediately shown on another), send alerts, etc. To make it happen, you need to set ResizeableActivity to the “true” value — we’ve demonstrated this above.  The next step is enabling android:supportsPictureInPicture=["true" | "false"]. Setting it up to “true” will support the interaction between different tabs, keeping both of them in the active state. To control the interface display, edit the app’s Layout and set up desired dimensions for the windows.  <activity android:name=".MyActivity">     <layout android:defaultHeight="600dp"           android:defaultWidth="700dp"           android:gravity="top|end"           android:minHeight="550dp"           android:minWidth="400dp" /> </activity>

Enabling multi-display support

It’s possible that foldable devices will be integrated with other devices and screens. Experts at Google and Samsung forecast that there soon might be a possibility of integrating smartphones with computers, share or split screens or connect two devices in real time. This activity can be enabled by setting up a secondary display. Developers and designers need to create the second display version that will be integrated with different devices and test them, on physical hardware or its emulators. The configuration changes are enabled in the Configuration panel. Display parameters are described by in onCreate and onConfigurationChanged. Specify desired parameters and update the layouts, if you want the interface to be displayed correctly. 

App testing on foldable devices and emulators

To test a foldable application, you need to start by checking its response to configuration changes, check the layouts on multiple windows, control the screen ratios, and run interface tests. We recommend connecting users to emulators to get a fresh perspective on in-app interactions. 

Final thoughts

We are only getting to know the first generation of foldable smartphones — it’s clear that there are yet many changes ahead. However, the technology holds immense potential and can revolutionize multiple industries. It’s a prominent direction for growth and investment, thereby companies and development teams need to speed up innovation.  Ultimately, developing a foldable app is based on already known mobile development practices. Software development teams who know how to build responsive apps will easily adapt their expertise to foldable smartphones. Users might take their time to adjust, too — but the change is likely to come faster than expected.