Question

Hi all I am making a game for Android and I need help placing some Views on the screen such that they are proportional to the screen. Consider the following XML code for my layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical"    
              android:background="@drawable/background">

<ImageView android:src="@drawable/logo" android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/logo" ></ImageView>

<FrameLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="2">
    <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/buttons">
         <LinearLayout android:id="@+id/main_layout" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal">
            <ImageView 
                android:paddingRight="15dp"
                android:layout_height="wrap_content" 
                android:layout_width="wrap_content" 
                android:src="@drawable/menu_start_button" 
                android:id="@+id/start_button">
            </ImageView>

            <ImageView 
                android:layout_height="wrap_content"                    
                android:layout_width="wrap_content" 
                android:src="@drawable/menu_tutorial_button" 
                android:id="@+id/tutorial_button">
            </ImageView>
         </LinearLayout>
    </ScrollView>

    <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="bottom" android:layout_alignParentRight="true" android:id="@+id/option_buttons">
            <ImageView android:id="@+id/option_sound" android:src="@drawable/option_sound" android:layout_height="wrap_content" android:layout_width="wrap_content" android:paddingRight="5dp" android:paddingBottom="5dp"/>
            <ImageView android:id="@+id/option_vibrate" android:layout_width="wrap_content" android:src="@drawable/option_vibrate" android:layout_height="wrap_content" android:paddingBottom="5dp" android:paddingRight="5dp"></ImageView>
            <ImageView android:id="@+id/option_show_help" android:layout_width="wrap_content" android:src="@drawable/option_show_help" android:layout_height="wrap_content"android:paddingRight="5dp"></ImageView>
    </LinearLayout>
</FrameLayout>

I want the logo (with the id logo) to take up the top 30% of the screen. The FrameLayout takes up the bottom 30% of the screen and has two buttons in the middle (wrapped in the ScrollView with ID buttons) and three option buttons that’s supposed to be on the right side of the FrameLayout (but for some reason it’s on the left side) aligned vertically. The android:layout_weight does not help me solve my problem as I would like to have these Views proportional to the screen. So is there an elegant solution to my problem or would I have to do some tricky magic?

Answer 1

Figured it out. I did have to use the layout_weight attribute after all. I had to set the parent’s weightSum property to 1 and then set all its child elements’ layout_weight so that it’s proportional to the aforementioned weightSum. For example, if the child element has to be 50% of the parent’s height, I set its layout_weight to 0.5 and its layout_height attribute to 0dp.