Wednesday, June 27, 2012

Android Layout Managers

Sometimes There are some simple rules and facts which can easily improve the quality and performance of your applications but they are widely ignored either because of lack of knowledge or just because of our reluctance to change the way we're already doing stuff.
One of these basic principles in android is Layout management which is hugely being misused, I mean if you go through different android samples and blogs (including this Blog!) more than 70% of all samples and examples are using LinearLayout even for some very simple layout that could have been simply done by using a FrameLayout. I am no exception and actually I used to think if I am comfortable with LinearLayout and everybody else is using it, why should I use another layout? but the thing is LinearLayout is a pretty heavyweight LayoutManager compare to FrameLayout and a far less flexible layout compare to RelativeLayout (this inflexibility usually leads to one of those ugly layout files with 4 or 5 nested LinearLayout) and if you are developing an application with a GUI a bit more complicated than a basic TextField and Button (specially when we have a repeating object like what we have in a ListView),Switching from LinearLayout to FrameLayout or RelativeLayout can tangibly improve the responsiveness of your application.
Just to see that using FrameLayout or RelativeLayout is pretty much as easy and as straight-forward as LinearLayout is, I'm gonna show you Six simple examples which will hopefully give you the idea of how they work so that you are gonna be able to choose a more efficient layout when you are designing a page.
Here are those Six examples I was talking about, I have used Buttons for all subviews just for the sake of simplicity but it can obviously be any other type of View:





and here is the XML source that generates each one of these layouts:

1

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:paddingTop="30dip"
    android:background="@color/black">

     <Button
     android:layout_width="fill_parent"
     android:layout_height="90dip"
     android:layout_alignParentTop="true"
     android:text="View 1"
     android:id="@+id/view1" />          
             
      <Button
     android:layout_width="fill_parent"
     android:layout_height="90dip"
     android:layout_below="@id/view1"
     android:text="View 2"
     android:id="@+id/view2" />     
     
      <Button
     android:layout_width="fill_parent"
     android:layout_height="90dip"
     android:layout_below="@id/view2"
     android:text="View 3"
     android:id="@+id/view3" />     
     
      <Button
     android:layout_width="fill_parent"
     android:layout_height="90dip"
     android:layout_below="@id/view3"
     android:text="View 4"
     android:id="@+id/view4" />             
    
    <Button
     android:layout_width="fill_parent"
     android:layout_height="90dip"
     android:layout_below="@id/view4"
     android:text="View 5"
     android:id="@+id/view5" />             
    
    
</RelativeLayout>    

2

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="5dip"
    android:background="@color/black">

     <Button
     android:layout_width="100dip"
     android:layout_height="fill_parent"
     android:layout_gravity="left"
     android:text="View 1"
     android:id="@+id/view1" />          
             
      <Button
     android:layout_width="100dip"
     android:layout_height="fill_parent"
     android:layout_gravity="center_horizontal"
     android:text="View 2"
     android:id="@+id/view2" />     
     
      <Button
     android:layout_width="100dip"
     android:layout_height="fill_parent"
     android:layout_gravity="right"
     android:text="View 3"
     android:id="@+id/view3" />     
     
     
</FrameLayout>    

3

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/black">

     <Button
     android:layout_width="120dip"
     android:layout_height="120dip"
     android:layout_gravity="left|top"
     android:layout_margin="15dip"
     android:text="View 1"
     android:id="@+id/view1" />          
             
      <Button
     android:layout_width="120dip"
     android:layout_height="120dip"
     android:layout_gravity="right|top"
     android:layout_margin="15dip"
     android:text="View 2"
     android:id="@+id/view2" />     
     
      <Button
     android:layout_width="120dip"
     android:layout_height="120dip"
     android:layout_gravity="left|center_vertical"
     android:layout_marginLeft="15dip"
     android:text="View 3"
     android:id="@+id/view3" />     
     
     <Button
     android:layout_width="120dip"
     android:layout_height="120dip"
     android:layout_gravity="right|center_vertical"
     android:layout_marginRight="15dip" 
     android:text="View 4"
     android:id="@+id/view4" />          
             
      <Button
     android:layout_width="120dip"
     android:layout_height="120dip"
     android:layout_gravity="left|bottom"
     android:layout_margin="15dip"
     android:text="View 5"
     android:id="@+id/view5" />     
     
      <Button
     android:layout_width="120dip"
     android:layout_height="120dip"
     android:layout_gravity="right|bottom"
     android:layout_margin="15dip"
     android:text="View 6"
     android:id="@+id/view6" />     
     
     
</FrameLayout>    

No comments:

Post a Comment