Layout Android webview and buttons

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

You are hard coding the height for the WebView. You are also mixing up some parameters from RelativeLayouts.

You should use layout_weight to fill any empty space in a LinearLayout.

Below is an example of likely what you want to achieve.

 <?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="0dp" 
 android:layout_weight="1" />

 <LinearLayout android:orientation="horizontal" 
 android:id="@id/bottommenu" 
 android:background="@drawable/bar" 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" >

<Button android:textStyle="bold" 
android:textColor="@color/text" 
android:id="@id/one"     
android:background="@layout/custom_button" 
android:layout_width="0dp" 
android:layout_height="wrap_content" 
android:src="@drawable/buttonmenu" 
android:text="Citroen" 
android:layout_weight="2" />

<Button android:textStyle="bold" 
android:textColor="@color/text" 
android:id="@id/two" 
android:background="@layout/custom_button" 
android:layout_width="0dp" 
android:layout_height="wrap_content" 
android:text="Mitshibitsu" 
android:layout_weight="2" />

<Button android:textStyle="bold" 
android:textColor="@color/text" 
android:id="@id/three" 
android:background="@layout/custom_button"
android:layout_width="0dp" 
android:layout_height="wrap_content" 
android:text="Suzuki" 
android:layout_weight="2" />

</LinearLayout>

</LinearLayout>

Answer 2

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>