Set Up Dual Displays on your RPi4

Setup dual displays with a persistent configuration, shared desktop on your Gentoo RPi4!

Introduction

Unlike its predecessor, the RPi4 includes support for dual HDMI displays. Using bundled tools, it is possible to set up two monitors such that they both run in relatively high resolution, and share a common desktop — so you can drag windows from one screen to the other. Once you have things the way you like them (displays stacked vertically, horizontally etc.) you can persist the settings too, so they will automatically be applied for you at graphical login.

Since the required steps are a little non-obvious, in this short article I'll run through the process from end-to-end.

Prerequisites

You'll need a RPi4 B running the most recent 'full' copy of the gentoo-on-rpi-64bit image (the image will of course work with the RPi3 B and B+, but dual HDMI ports are only provided starting from the model 4B). I'm going to assume you have performed a first boot, and have been able to log in as demouser (initial password raspberrypi64).

Your system should then be powered off to commence this tutorial.

Setting up the Dual-Display Configuration

With your RPi4 powered down, physically connect your 'primary' display (typically, the one on the left in a horizontal two-monitor setup, or on the top in a vertical setup) to the HDMI0 port (the one closer to the USB-C power connector) and your secondary display to the HDMI1 port.

Power up your RPi4 as normal. Once the Xfce4 desktop is displayed (you will have a "mirrored" output at this stage, with both monitors showing the same thing), open the pyconfig_gen tool, by clicking Applications→Settings→RPi Config Tool. Then, choose an appropriate HDMI group for this display (either CEA or DMT). For this demo, I'm going to choose CEA (as it is better supported by the particular monitor I have connected):

While in principle the dropdown can be left at Auto-detect from EDID, in practice doing so will cap your maximum available resolution on some displays.

The exact layout etc. of the pyconfig_gen dialog box you see may differ somewhat, depending on the version installed on your system, but the basic flow will remain the same.

With that done, you can next select an appropriate HDMI mode (combination of resolution, aspect ratio and refresh ratio) from the dropdown below. The trick here is to select a resolution that can be supported by both your displays, so that the two act seamlessly together.

In my case, the maximal common resolution is 1920x1080, so I select this here (obviously, adapt as appropriate to your case):

Note that the display resolution is not immediately changed by making this selection.

Tip: if very few modes are displayed (or only very low-resolution modes are shown) try changing the HDMI group (for example, from CEA to DMT), and try the mode dropdown again — there is no need to reboot.
On a very few monitors, modes that you know are supported will fail to display. In that case, try selecting the Override HDMI display's reported EDID data (if any) and try again.

With that done, click the Second Display tab, and then choose an appropriate HDMI group and HDMI mode there (the group doesn't need to match that of the primary display — although it does in this case — but the resolution and aspect ratio should be the same).

For this example, I'm also selecting CEA, 1920x1080, 16x9 @ 60Hz for the secondary display (obviously, adapt for your use case):

Once that is done, ensure you have no unsaved work elsewhere on your system, then click the Save and Exit button on the pyconfig_gen dialog, and confirm when asked if you wish to reboot.

Your RPi4 will now power cycle. Once it comes back up to the graphical desktop, you will be prompted whether to commit the changes you made:

Assuming both displays are still showing a valid image, click Yes, Keep Using Modified Version, and then close out the pyconfig_gen dialog.

Particularly if you have chosen one of the higher available resolutions, as here, you may find that your display is still using the original, lower resolution (for example, in my case both displays are still at 1024x768 post-reboot, even though 1920x1080 was selected in the pyconfig_gen dialog). That's fine, and you should still click Yes, Keep Using Modified Version when prompted — we'll fix up the resolution shortly (by selecting this resolution here, you will have 'unlocked' its use in arandr shortly).

Next, open the arnadr tool, by clicking Applications→Settings→arandr:

Tip: if you still have the pyconfig_gen tool open, you can also launch / bring forward the arandr tool by pressing the Launch Screen Layout Editor button in the bottom left of the dialog.

This tool visually shows the relative layout of your two displays (and lets you change some other properties of them also, as we shall see). At the moment, both HDMI-1 (confusingly, the output of the RPi4's physical HDMI0 port) and HDMI-2 (the output of the RPi4's HDMI1 port) are 'overlaid' directly on top of one another, indicating that the displays are mirrored (same content displayed on both).

As a first step, let's change the scale of the arandr layout editor display, to 1:16, to give ourselves more space to work in. Click the View menu item, and choose 1:16 from the dropdown:

With that done, (left) click the HDMI-2 widget, and drag it clear of the HDMI-1 widget it currently overlays (it doesn't particularly matter where you put HDMI-2 at this point, we'll set up the true relative position later in this tutorial). You should now be able to see the two widgets with clear space between them. HDMI-1 (the output of the HDMI0 port, remember ^-^) is underlined, to indicate that it is the primary display (the one which will get the Xfce4 top panel bar etc.):

With the (previously occluded) HDMI-1 exposed, you can now right-click on it, to show its context menu. Select Resolution, and you'll see a submenu displayed. This should include any higher resolutions made possible by your choice of HDMI group and mode earlier. In this case, 1920x1080 has become 'unlocked'. Select your target resolution (in my case, as discussed, 1920x1080):

This change will not immediately be applied to your actual display, but the HDMI-1 widget will change size, with the 'current' screen size shown 'ghosted' behind it.

Now do the same thing by right-clicking on the HDMI-2 widget which you dragged clear earlier. Select a matching resolution to HDMI-1 (here, 1920x1080, but obviously adapt as appropriate):

With that done, it's time to set up the relative 'position' of the two displays. For this particular example, as discussed, I want HDMI-1 (the display connected to the RPi4's HDMI0 port, remember) to be the primary (translation: has the top menu bar etc.), and sit to the left, and HDMI-2 (the display connected to the RPi4's HDMI1 port) to be the secondary, and sit directly to the right (so that e.g. a window sitting astride the two displays would appear to 'line up'); obviously, adapt this to your desired setup (for example, you may want two displays one above the other, two displays in portrait mode side-by-side etc). So here, I drag the HDMI-2 widget directly to the right of HDMI-1:

Tip: you can use the Orientation menu item in the arandr context dropdown to rotate the display contents, which is useful if e.g. you want your monitors in portrait mode, rather than the default landscape.

You'll notice how the widgets 'snap' to each other. Continue to drag HDMI-2 until it is in the correct place, in this case, directly to the right of HDMI-1:

Once you are happy with the relative layout of the displays, click the "green checkmark" button to apply changes to your actual displays:

These changes will take effect immediately.

If for some reason your displays stop displaying anything after you click the checkmark button, simply reboot your Pi to revert to the prior settings — nothing has yet been persisted.

If all is well, your joint displays should now be at the appropriate resolution and orientation to each other, as shown below (for this, horizontal alignment case):

This is pretty close to what we want (for the target configuration in this tutorial). The top menu / panel is (here) on the leftmost screen, and the cursor can move seamlessly between the two displays.

However, two problems remain. The first is cosmetic — the two displays have different background images. The second is more serious — changes made so far (within arandr) have not been persisted, and will be lost if we reboot at this point.

OK, let's deal with these issues in order. To fix the background, select Applications→Settings→Desktop and then drag the dialog that appears onto the secondary (here, rightmost, but your arrangement may differ) display, and click on the xfce-teal.jpg image. The two displays will then be showing a common background:

The Desktop dialog affects the background of the display on which it is placed. Choose whatever background(s) appeal to you, of course!

With that done, we can next make the arandr settings persistent. To do this, click on the "save" icon (on the arandr dialog), to write out the settings you have configured as an executable script:

When prompted, type default (or default.sh, which will have the same effect) as the name of the script, and press Save:

This will save the file in the location ~/.screenlayout/default.sh, which the modified arandr package used on the image treats as special (in that this file, if present, will automatically be applied upon graphical login, unless the Ctrl key is held down).

Testing your Persistent, Dual-Screen Setup

Now you can try out your new dual screen system! Reboot your RPi4, and hopefully, your specified resolution and screen layout should be applied automatically for you, right after graphical login! In the case of this side-by-side layout, you should be able to e.g. drag windows "across" the two monitors seamlessly, as shown below:

Tip: if for some reason you don't want to apply the resolution and layout settings, either delete (or move) the file ~/.screenlayout/default.sh, or hold down the Ctrl key during graphical login.

And that's it, your dual-screen system is now configured. Enjoy!