Search This Blog

Monday, March 15, 2010

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:





1

2

3


4



5



6




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>

4

<?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:padding="5dip"
android:background="@color/black">

<Button
android:layout_width="150dip"
android:layout_height="120dip"
android:layout_gravity="left|top"
android:text="View 1"
android:id="@+id/view1" />

<Button
android:layout_width="150dip"
android:layout_height="120dip"
android:layout_gravity="right|top"
android:text="View 2"
android:id="@+id/view2" />


<Button
android:layout_width="fill_parent"
android:layout_height="200dip"
android:layout_gravity="center"
android:text="View 3"
android:id="@+id/view3" />


<Button
android:layout_width="150dip"
android:layout_height="120dip"
android:layout_gravity="left|bottom"
android:text="View 4"
android:id="@+id/view4" />

<Button
android:layout_width="150dip"
android:layout_height="120dip"
android:layout_gravity="right|bottom"
android:text="View 5"
android:id="@+id/view5" />


</FrameLayout>

5

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

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

<Button
android:layout_width="120dip"
android:layout_height="200dip"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:text="View 1"
android:id="@+id/view1" />

<Button
android:layout_width="180dip"
android:layout_height="120dip"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:text="View 2"
android:id="@+id/view2" />


<Button
android:layout_width="120dip"
android:layout_height="100dip"
android:layout_alignParentLeft="true"
android:layout_below="@id/view1"
android:text="View 3"
android:id="@+id/view3" />


<Button
android:layout_width="180dip"
android:layout_height="180dip"
android:layout_alignParentRight="true"
android:layout_below="@id/view2"
android:text="View 4"
android:id="@+id/view4" />

<Button
android:layout_width="fill_parent"
android:layout_height="120dip"
android:layout_alignParentBottom="true"
android:layout_below="@id/view4"
android:text="View 5"
android:id="@+id/view5" />


</RelativeLayout>

6

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

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

<Button
android:layout_width="180dip"
android:layout_height="180dip"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:text="View 1"
android:id="@+id/view1" />

<Button
android:layout_width="120dip"
android:layout_height="90dip"
android:layout_toLeftOf="@id/view1"
android:layout_alignParentLeft="true"
android:text="View 2"
android:id="@+id/view2" />


<Button
android:layout_width="120dip"
android:layout_height="90dip"
android:layout_toLeftOf="@id/view1"
android:layout_below="@id/view2"
android:layout_alignParentLeft="true"
android:text="View 3"
android:id="@+id/view3" />


<Button
android:layout_width="fill_parent"
android:layout_height="120dip"
android:layout_below="@id/view1"
android:text="View 4"
android:id="@+id/view4" />

<Button
android:layout_width="180dip"
android:layout_height="180dip"
android:layout_alignParentLeft="true"
android:layout_below="@id/view4"
android:text="View 5"
android:id="@+id/view5" />


<Button
android:layout_width="120dip"
android:layout_height="90dip"
android:layout_toRightOf="@id/view5"
android:layout_below="@id/view4"
android:layout_alignParentRight="true"
android:text="View 6"
android:id="@+id/view6" />


<Button
android:layout_width="120dip"
android:layout_height="90dip"
android:layout_toRightOf="@id/view5"
android:layout_below="@id/view6"
android:layout_alignParentRight="true"
android:text="View 7"
android:id="@+id/view7" />


</RelativeLayout>

Friday, March 12, 2010

My First Android Application ;)

I was struggling with myself for a long time whether to do this or not, and finally I did it.
I uploaded my first Android application in Market yesterday and actually I feel excited about it...
It is not a full-feature application, just a simple Ebay-Search client which will let you search through Items in Ebay...no buying or bidding yet!!
since unfortunately I don't have any Android-enabled phone at the moment so I would really appreciate it if you could download this application, give it a go and let me know how it works on a real device.
Here's some screen-shots of my application :