Rex's Rambles

PanesLayout: build multi-pane tablet layouts in Android

The Problem

When designing the tablet version for Mapsaurus, we knew we wanted a multi-pane layout similar to Evernote or Gmail.

We found lots of examples of multi-pane layouts with limited numbers of different sized panes (generally 2 or 3) and a couple examples of multi-pane layouts with any number of equal-sized panes.

However, we needed more flexibility. Not only did we want to add and remove panes dynamically but panes needed to be different sizes. We wanted each pane to contain a Fragment which would be retained properly on orientation changes and we wanted the user to be able to swipe between panes like a ViewPager.

The Solution

PanesLayout is an Android layout we’ve built that allows you to dynamically add and remove any number of panes of varying sizes!

How It Works

It works by placing each pane inside a ScrollView. This dramatically decreases the complexity of moving multiple panes of varying sizes around the screen. It also let us very easily implement horizontal swiping for navigation.

Each pane within the layout has a container with a unique id, allowing Fragments to be added to these layouts and (most importantly) properly restarted and retained during orientation changes!

We tried to keep it simple, but there’s still a decent amount of glue code required to repopulate the PanesLayout when an Activity is restarted and to make adding Fragments simpler.

After reflecting on how much we’ve gained from the open-source community surrounding Android (we currently use 6 open-source libraries), we’ve decided to open source this project.

We hope you can find some use for this (or, at least, help us improve our code)!

Check it out at: https://github.com/Mapsaurus/Android-PanesLibrary