Programming and Personal Development

Android Linear Layout

As mentioned in the previous post, the android linear layout is a simple layout that places the elements linearly one after the other. There are 6 main properties that are available in the linear layout for manipulating the location of the elements on the screen.

  • Orientation: This property decides if the elements within the layout should be laid out from left to right as a row
    linear layout demo screen capture

    Demo for linear layout

    or  from top to bottom as a column.

  • Width and Height : The layout width and layout height properties together decide the size, the element will occupy on the screen. Every element within the linear layout must specify its width and height. You can specify the exact values or you can let the elements  take up space based on its content.
  • Gravity: This property decides the alignment (left, right, top,bottom, center… etc) of the elements within the linear layout.
  • Weight:  The layout weight property decides the ratio of space allocated to each element within the same row or column. For example, if there are two elements A and B within the same row, you can allocate 80% of space to a element A and the remaining 20% to B. The percentages of weights allocated should add up to 100.
  • Margin: By default, the elements within the linear layout are placed right next to each other without any gap in between them.  The android  layout margin property lets you change this and introduce some space between the adjacent components. You can specify a global margin for the element or you can vary the margin size on each side by explicitly Android xml layout file for linearlayout demospecifying them.

Lets take a look at the usage of each property  with an easy to follow example.  In this example, we will manipulate the linear layout properties  to place a few  TextView elements at desired locations on the screen. The output and the layout.xml file are as shown. The important properties are numbered and highlighted for visual assistance.

  1. We specify the layout:orientation as “vertical” to layout the elements from top to bottom. We then add a TextView element and set its width and height to “wrap_content” . This lets the system decide the amount of space required for the text view based on amount of text to be displayed.
  2. In the second TextView element, we set the  layout:width to “match_parent”. This tells the android system to take up the entire width of its parent which in this case happens to be the width of the screen  itself.  You can also specify the width and height as exact values as done for  the third textview element. However this is not the recommended practice since the screen sizes vary across the devices and you might end up specifying a size that might look too small or too large on that device.
  3. In the fourth, fifth and sixth TextView elements we specify the layout gravity property to center, right and left respectively to align the elements within the row.
  4. In addition to elements like TextViews and Buttons you can also specify other layouts as well. In this case we create another linear layout as a child and set its orientation to “horizontal” .  We then set  the width of the layout to “fill_parent”. This value is equivalent to the “match_parent” property that we saw earlier. But  we set the height of the child layout to “wrap_content” so that it takes only as much space as required to accommodate one row of elements.
  5. For seventh TextView  element we specify the different margin values for each side.
  6. Here we specify a global margin which sets equal margin on all sides of the TextView element.
  7. We specify the weight for the TextView element as 70. This allocates 70% of the space in the row to this element and tries to accommodate the other  elements in the row within the remaining 30%.
  8. Here we create the final  TextView element and set its width and height to “fill_parent” so that it takes up the remaining the space in the parent layout.

 

 

 

Web Analytics