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: