Common Android Layouts

To build a neat user interface in android you must understand different android layouts. Just knowing about LayoutParams and the layout_ attributes explained in the documentation might be enough to help you choose the right layout for you, but a quick summary can’t hurt. 

LinearLayout 

LinearLayout has one goal in life: lay out children in a single row or column (depending on if its android:orientation is horizontal or vertical). 

However, even with that single focus, it still has a trick up its sleeve with the layout_weight attribute, which allows a child to expand its size to fill the remaining space — useful if you have a few wrap_content elements and a few others that need as much space as possible. 

FrameLayout 

FrameLayout acts quite differently compared to LinearLayout: here all children are drawn as a stack — overlapping or not. The only control on positioning is the layout_gravity attribute — pushing the child towards a side or centering it within the FrameLayout. 

RelativeLayout 

RelativeLayout is not nearly as simple as the previous two: a look at RelativeLayout.LayoutParams shows a large number of attributes all focused around positioning children relative to the edges or center of RelativeLayout(similar to FrameLayout in fact), but also relative to one another — say, one child layout_below another child. 

This has an advantage of being very, very powerful (laying out arbitrary children in relation to one another), but watch your performance! 

PercentFrameLayout and PercentRelativeLayout 

As members of the Percent Support Library, PercentFrameLayout and PercentRelativeLayout add onto their namesakes with the addition of percentage-based dimensions and margins, allowing you to use layout_widthPercent=”50%” in place of guessing at the appropriate layout_width would have to be. 

They also contain one of most exciting features: aspect ratio support, making it possible to declare only a single dimension (either height or width) and basing the other on a fixed aspect ratio. This even works if one dimension is wrap_content or match_parent! 

GridLayout 

GridLayout was introduced in Ice Cream Sandwich back in 2011, but is also available as part of its own Support Library (to support back to API 7). Designed to place items in arbitrary rows and columns and supporting the same weights as LinearLayout, it allows you to flatten your view hierarchy considerably while avoiding some of the complex arrangements of elements that affects the performance of RelativeLayout. 

Unlike most layouts, GridLayout does not require layout_height andlayout_width for each View — columns and rows (and hence their contained children) grow and shrink as needed based on the Alignment of each. I’d strongly recommend reading over the GridLayout.LayoutParamsdocumentation and the blog post (noting that it was written before GridLayout gained the layout_weight attribute) if you’d like to delve into this component. 

CoordinatorLayout 

CoordinatorLayout, part of the Android Design Support Library, is a subclass of FrameLayout and therefore inherits its use of layout_gravity to position children, but also includes the concept of a Behavior. 

Attaching a Behavior to a view either by using the @DefaultBehaviorannotation on the class, using the layout_behavior attribute, or using setBehavior() allows that Behavior to intercept just about everything before the underlying View: measurement, layout, nested scrolling, touch events, changes to specified dependent Views, and window insets. 

For a deep dive into Behaviors, check out the Intercepting everything with CoordinatorLayout Behaviors post. 

If you would like to know more about android layouts refer to this article.  

At Emqube we focus on building high quality hybrid mobile apps. Contact us if you would like us to build an app for you.