Auto Layout on Android, A Pure Java Implementation

If you are familiar with IOS development, Auto Layout probably is not something new to you. But for those pure android geeks and others who are interested: “Auto Layout is a system that lets you lay out your app’s user interface by creating a mathematical description of the relationships between the elements. You define these relationships in terms of constraints either on individual elements, or between sets of elements. Using Auto Layout, you can create a dynamic and versatile interface that responds appropriately to changes in screen size, device orientation, and localization.” Quoted from Apple.

By reading a verbose definition won’t help much, an example may enlighten the concept better:

autolayout

In the above screenshot, we have a layout container (which has the screen size), and 3 different objects (views). To arrange such a layout via Auto Layout on IOS, we may simply define a few constraints:

(assume <container.padding> is a constant that represents the spaces between objects)

“green.top == container.top + <container.padding>”
“green.left == container.left + <container.padding>”
“green.width == (container.width – 3 * <container.padding>)  /  2”
“green.height == (container.height – 3 * <container.padding>) / 2”
“yellow.top == green.top”
“yellow.left == green.right + <container.padding>”
“yellow.width == green.width”
“yellow.height == green.height”
“blue.top == green.bottom + <container.padding>”
“blue.left == green.left”
“blue.right == container.right – <container.padding>”
“blue.height == green.height”

After we pass this set of constraints to the layout manager, the layout engine will do the math and solve out a best result that can satisfy each of these constraints. Thus a beautiful layout is rendered based on the calculated positions of each object.

Now it’s the point of this article: this awesome layout engine is now available on Android, and you can find the source code at Github: cassowary layout. It named cassowary because that is the original name of the algorithm, which also runs behind the Auto Layout of IOS. Yes, this android version library and the Auto Layout are sharing the same algorithm, which was developed by a few computer scientists back in 1990’s. Actually, there is a whole community behind this cassowary algorithm today: overconstrained. In there developers from all over the world have contributed to different ports of the same algorithm, and some of those implementations are already in use of many applications we are using daily today.

It is worth to mention that Cassowary layout listed above includes some android elements to handle the transition from mathematical calculated results to the actual sizes and positions of different views. If you simply just want to use the pure java implementation, I would suggest you to take a look at the math engine used by this cassowary layout library: cassowary-java. Alternatively, I personally prefer this re-designed implementation of the same algorithm: kiwi-java, which is declared as faster and smaller.

All these great libraries can be found at the cassowary community’s website: overconstrained

 

Advertisements