Getting familiar with Android Layouts

Getting familiar with Android Layouts

Howdy! The first and basic thing to develop android application is the understanding of Android Layouts. Well, if you feel quiet uncomfortable, while developing the front end, specially with layouts? Then my buddy you are at the right place!

In this article I’m going give as simple definition as possible to clear the concept of android layouts, how to use them, best practice  to achieve specific activity layouts. Here is the quick list of items I’m going to cover. Basically there are two ways to create layouts, one with the xml file and another using java, at the runtime. For the sake of simplicity I’m going to use the first method. Okay! so let’s get started!

What are the Android Layouts?

Layout is the structure or skeleton for all the controls/views to be used, and to make them looks good, reliable and as same as desired. There are two things, first is view and second is view group, of course these are self descriptor. But for the newbies, views are the various controls like text box, spinner, checkbox, radio buttons, regular buttons etc. and View Groups are the layouts on which we’re going to practice. There are basically three common layouts that are really useful:

  1. Linear Layout
  2. Relative Layout

Every layout comes with at least two attributes i.e. layout_width, and layout_height which defines the size of the boundary in which we’re going to put all the views/controls; For which two built in attributes are match_parent and fill_parentwrap_content. Here are the snippet of xml code that demonstrate the use of these two attributes:

If you’re familiar with web development, then match_parent is exactly like width:100%; and wrap_content is exactly like auto, e.g. height:auto. In simple words, match_parent inherit the properties from the parent view group or layout and wrap_content adjusts the width/height according to the views or controls in it.

You could also use the density pixels to set the specific properties for these two attributes. Here is the code snippet, that show how it actually looks like:

Best practice to use the layouts is to keep the linear layout as the parent viewgroup. But before that let’s see what these layouts are.

1.) Linear Layout

layouts

It’s the most useful and easy to understand layout, which comes with the two orientation attribute properties, i.e. vertical and horizontal. Views will automatically be in queue according to the chosen orientation. As showing in the diagram, View1, View2 and View3 are the controls or views having the wrap_content for width and match_parent for height, on other side I’ve used match_parent for both width and wrap_content for height.

So yes, it’s like stack of boxes where you place the boxes upside down in the case of vertical orientation and left to right, in the case of horizontal orientation. As simple as that.

Here are the code snippet for orientation:

Then comes the layout_weight attribute, it’s very handy one! It’s also almost same as the percentage value in css. For example we’ve two views view1 and view2, and we need to set the width of view1 to occupy 20% of the screen and view2 to occupy 70% of the screen then layout_weight is what we’ll use! Make sure you’re using layout_width’s match_parent property :) But the the basic mean of layout_weight is to give importance/priority to views over others in the specific view group.Here is an example:

Even if you use 2 and 7 for the layout_weight, the result will be same as it’s kind of ratio between the view group components. I hope that make sense, if not please ask question in comment section. Alright let’s move onto Relative layout!

2.) Relative Layout

This layout is proven more efficient than any other layout for many designs. As the word “Relative” means, in this layout every view has the capability to stick to other view controls as we desire. Some common relative layout attributes are alignParentTop,centerVertical,below,toRightOf to which we’ve to pass the reference id of the view on which are applying the attribute.

For example, if we’re willing to place view1 (with id 1) to the right of view2, then we’ll set the laytout_toRightOf attribute of view1 to the id of view 1 (which is 1). For better understanding you can try moving the control in design view, you’ll notice it’s keeping the control in the mentioned alignment.

Other Android Layouts

As I’ve already said Linear and Relative aren’t the only layouts that we can use, some other layouts are Grid view, Table view, List view which I’ll describe later. I think you’ll love to see me building the registration activity, which will cover almost all of the attributes for Linear Layout and Relative layout with brief explanation.

If you have any question or concerns please feel free to leave the comment in the comment section.

Thanks!

 

Sources:

Share this post

Post Comment