Android: Layout looks different on different devices

Question

Hi I have an activity with an imageview and a row with buttons at the bottom.The buttons are added to the iconView layout programmatically.When I test my app on my HTC one the buttons are displayed correct.

Once I run it on a device with a smaller screen it is cropped i.e. only the top of the buttons is displayed.

How can I make my code device independent?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:orientation="horizontal" >
<LinearLayout
    android:id="@+id/mainView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background2"
    android:orientation="vertical" >
    <ImageView
    android:id="@+id/imageView"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="0.95"
    android:orientation="vertical"
    android:paddingLeft="4dp"
    android:paddingTop="4dp"
    android:paddingRight="4dp"
    android:paddingBottom="4dp"
    android:src="@android:drawable/ic_menu_camera" />

    <LinearLayout
    android:id="@+id/iconView"
    android:layout_weight="0.05"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:orientation="horizontal" >
    </LinearLayout>

    </LinearLayout>

    </LinearLayout>

Thanks in advance.

Answer 1

Unfortunately the solutions did not work. Eventually I changed my code and add the buttons in the xml, not programmatically. This works fine. I don't know why...

Answer 2

Try this layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000" >

    <RelativeLayout
        android:id="@+id/mainView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/background2" >

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="4dp"
                android:layout_above="@+id/iconView"
                android:src="@android:drawable/ic_menu_camera" />

            <LinearLayout
                android:id="@+id/iconView"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:layout_alignParentBottom="true"
                android:orientation="horizontal" />

     </RelativeLayout>

</LinearLayout>

Answer 3

Try this make the first view with android:layout_weight="1"
and the with a static height without the layout_weight, this should solve it

Answer 4

When adding button either programmatically or in XML layout, try to use LinearLayout as the parent for button and leverage the "weightsum" property of that LinearLayout.

When you're going to share the real state of screen's width or height equally between a number of views such as buttons or textview or ..., you can set "layout_weight" property on those controls. Notice that, this is only possible when using LinearLayouts.

What happens at the end is that the linearlayout's real estate is calculated and allocated according to each child's element's "layout_weight" value.

The example below shows how to put two buttons beside each other and make them fill the screen's width equally :

<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:weightSum="2"
 >

     <Button
       android:id="@+id/btn_left"
       android:layout_width="0dp" // width is calculated by weight 
       android:layout_height= "wrap_content"
       android:layout_weight="1" />

     <Button
       android:id="@+id/btn_right"
       android:layout_width="0dp" // width is calculated by weight 
       android:layout_height= "wrap_content"
       android:layout_weight="1"  />

<LinearLayout/>