Question

I am having some trouble with my Android layout on certain mobile devices. Its a layout with a webview with under it a bar with 3 buttons. The layout is working good but on certain devices like HTC One, samsung galaxy S2 (bigger screens) the layout of the webview and bar below it is pressed together in the middle of the screen. See the layout:

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout android:gravity="center" android:orientation="vertical" android:id="@id/linweb" android:layout_width="fill_parent" android:layout_height="fill_parent"
  xmlns:android="http://schemas.android.com/apk/res/android">
<WebView android:id="@id/mainWebView" android:layout_width="fill_parent" android:layout_height="410.0dip" />
<LinearLayout android:orientation="horizontal" android:id="@id/bottommenu" android:background="@drawable/bar" android:paddingLeft="0.0dip" android:paddingTop="0.0dip" android:paddingRight="0.0dip" android:paddingBottom="0.0dip" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/mainWebView">
    <Button android:textStyle="bold" android:textColor="@color/text" android:id="@id/one" android:background="@layout/custom_button" android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/buttonmenu" android:text="Citroen" android:layout_weight="2.0" />
    <Button android:textStyle="bold" android:textColor="@color/text" android:id="@id/two" android:background="@layout/custom_button" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="Mitshibitsu" android:layout_weight="2.0" />
    <Button android:textStyle="bold" android:textColor="@color/text" android:id="@id/three" android:background="@layout/custom_button" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="Suzuki" android:layout_weight="2.0" />
</LinearLayout>
</LinearLayout>

Answer 1

It’s because you specified the height of the WebView with a constant value. You need to tell it to fill in the space that remains above the row with the buttons.

Try this:

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

    <WebView
        android:id="@+id/mainWebView"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1" />

    <LinearLayout
        android:id="@+id/bottommenu"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingBottom="0.0dip"
        android:paddingLeft="0.0dip"
        android:paddingRight="0.0dip"
        android:paddingTop="0.0dip" >
    

        <Button
            android:id="@+id/one"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.0"
            android:text="Citroen"
            android:textStyle="bold" />
    

        <Button
            android:id="@+id/two"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.0"
            android:text="Mitshibitsu"
            android:textStyle="bold" />
    

        <Button
            android:id="@+id/three"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="2.0"
            android:text="Suzuki"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>