Complex layout with same layout_margin in Android

Question

I have a problems with my layout_margin. I want to make my layout look like that:

(with "a" is margin)

My problems is, when i build my layout in other screen size, it look like that:

How can i make it beautiful with different screen size? This is my layout:

<LinearLayout
            android:id="@+id/footer_result_layout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="gone" >

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/btn_recommendtion"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                     android:adjustViewBounds="true"
                    android:src="@drawable/coodinate" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:layout_gravity="center"
                android:layout_marginTop="20dip"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/btn_facebook"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_margin="5dip"
                    android:layout_weight="1"
                    android:adjustViewBounds="true"
                    android:src="@drawable/fb" />

                <ImageView
                    android:id="@+id/btn_mixi"
                    android:layout_width="0dp"
                    android:layout_height="fill_parent"
                    android:layout_margin="5dip"
                    android:layout_weight="1"
                    android:adjustViewBounds="true"
                    android:src="@drawable/mixi" />
            </LinearLayout>
        </LinearLayout>

Answer 1

Try using a relative layout. Here is an example using buttons. You can swap out the values of the buttons with your image views, and adjust your margins as needed. This should center the buttons, with the same margins on any screen.

<Button
    android:id="@+id/btn_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:text="BUTTON 1" 
     android:layout_centerHorizontal="true"/>

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"        
    android:layout_below="@+id/btn_1"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="5dip"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/btn_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:layout_margin="5dip"
        android:text="BUTTON 2" />

    <Button
        android:id="@+id/btn_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:layout_margin="5dip"
        android:text="BUTTON 3" />


</LinearLayout>

It looks like this:

Answer 2

You'll need to use RelativeLayout for that.

Center button1 with android:layout_alignParentTop="true" and align it in the parent top with android:layout_centerHorizontal="true and work from there.

Answer 3

The code:-

<?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">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:layout_margin="10dip"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
android:layout_margin="10dip"
android:layout_alignParentLeft="true"
android:layout_below="@+id/button1"/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
android:layout_margin="10dip"
android:layout_alignParentRight="true"
android:layout_below="@+id/button1"/>
</RelativeLayout>

Considering the a=10