Unfold your UI
Tags: android, kotlin, foldable
Published: 2022-11-25 08:00:36

While foldable devices have been a thing on Android for quite a while, we don't see too many apps *really* making use of them. If you have been following my publications you know that I am a big fan of this device category. Therefore, I'm on a mission to foster its adoption. 

This is the first part in a series of articles called *Understanding foldable devices*. The series expands on my previous work. Still, this is no copied content. Instead, it takes into account all things that happened after I wrote the earlier pieces. Today we'll stay theoretic. I'll analyze several misconceptions and introduce you to general layout considerations. The upcoming parts will transform this into running code.

### So, what's a foldable anyway?

Foldable devices allow you to fold and unfold your screen. Often, unfolding makes the screen real estate bigger. So, being folded the device resembles a smartphone, whereas in its open position it may look like a tablet. Here comes the first takeaway: 

*Foldables aren't necessarily tablets that can be shrunk to a smartphone form factor*

To be more precise, some **must** be opened (unfolded) to be used, and even then the screen has just the size of a smartphone. This immediately leads to the second takeaway: 

*Making the screen real estate larger not necessarily relates to one screen*

Often, foldables have one screen that is used in smartphone mode, and a bigger one which is then folded and therefore not in use. Unfolding this one deactivates the small screen.

But, putting the small screen aside, isn't that a tablet, after all? That depends on what we mean when we say *unfolding the device*. 

Take a look.


![Microsoft Surface Pro 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddi6zc0008tdqusic97r.jpg)


![Microsoft Surface Duo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kyylxmy14nc7l1agn7g4.jpg)

The first picture shows a Microsoft Surface Pro 8, a classic tablet. The second one shows a Microsoft Surface Duo, a foldable. Both look pretty similar, which supports the notion of an opened foldable essentially being a tablet.

Yet, do we really want to hold a foldable like this? Isn't the posture displayed in the following picture way more natural? That's how we usually hold a book we are reading.

![Microsoft Surface Duo with a posture similar to an open book](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8g59sc0oxjivvrcs9z0s.jpg)

I know what you are thinking... *Ahh, he's once again turning to that niche product*

No.

The point is, we can easily make our apps work well on dual screen devices, and therefore should do so. But that comes out of the box if we make our apps *really* shine on foldables. 

Let me elaborate.

### About folds, hinges, and gaps

Dual screen devices do have a bit of a problem, which is best shown with another picture.


![A website on the Surface Duo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mr4xv9hwohwyimy964i.jpg)

No matter how well designed a mechanical hinge is, connecting two physical screens will **always** leave a noticeable gap. This gap counteracts the perception of *one* surface. 

But is that really a problem?


![An open book](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ecloaop9gws3xfc9twv.jpg)

Books have wonderfully crafted … hinges... 🤣

Jokes aside, the way books are bound makes the area towards the middle a bit hard to access. The natural way we have been dealing with this for centuries was as simple as ingenious - we just left that area blank.


![Kindle on the Surface Duo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28ihzu8pit24j73wi0vi.jpg)

As you can see, the gap that was so prominent on the web page practically disappeared. The idea of two pages works really well for more traditional apps, too.

![The app TKWeek running on a dual screen device](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ausziu1r2txoe8cjkg5.jpg)

We can think of the two pages of a book as two columns. So, arranging the main content of your app in a two column layout makes your app feel at home on *any* foldable device, no matter if it is made of one or two screens.

*Wait a minute*

On that picture of a web page that didn't look particularly nice on the Surface Duo we saw two columns, right? 🤔

Just using *two columns* is not enough. The two columns must match the two areas connected by the hinge. That's, by the way, why foldables are no tablets. 

Let me explain.

Often, (non mobile) web pages have a 33 : 66 ratio for two columns. Here are a few reasons for this design decision.

1. Traditionally, the left part of the page contained some sort of menu or vertical navigation, whereas the larger part to the right showed the main content. This is still widely used today.

2. Often, web pages show a list (contacts, emails, …) on the left and present details related to the currently selected item on the right.

This interaction design pattern is frequently used in tablet apps, too. It looks so natural because the list-like content on the left can be made less wide due to its content, a name, a meeting title, an address. The details, on the other hand, may benefit from having more space available to it.

As 33:66 usually doesn't match the widths of the two areas of the foldable, the fold or hinge appears *somewhere* inside the right one. Yet, by utilizing the ratio that is given by the hardware (the sizes of the two screens) we make sure that no parts of the main content are obstructed by hinges or folds.

### Wrapping things up

Again, you may be thinking that dual screen devices are so rare that it's not worth bothering. I beg to differ. Again, please take a look.


![Android emulator simulating a foldable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vsow74wth3bxb1lglmr.png)

The picture above shows a simulated foldable that has a fold but not a big hinge that obstructs parts of the screen. So, with such a device a 33:66 ratio should be fun to use, right?

If we agree that holding the device like a book is a pleasant posture, there will **always** be areas on screen that are less easy to interact with - tapping on one of the items shown in the picture will certainly work, but it may be less easy, because of the fold. 

One more thought.

The bigger the screen real estate is, the more likely it is that we want to hold the device with two hands. The center of the screen may then be difficult to reach with any finger from either hand.

To conclude, for foldable devices I suggest to use a two column layout for the main content of your app, where the width of the columns is determined by the width of the two areas left and right to the fold or hinge.

Is that all?

No. We can rotate our device, which means that the fold or hinge may no longer be running vertically. We'll tackle this in the next article. So please stay tuned.