androidandroid-layoutandroid-webviewandroid-linearlayout

How can I position elements below a WebView inside a LinearLayout?


I tried to create a fragment with a WebView which had a Button above and below it. The button above was displayed, but the one below is not shown. It's like the WebView is trying to take up all the rest of the space on the screen, regardless of what other elements might be in the LinearLayout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        android:text="test1"/>

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        android:text="test2"/>
</LinearLayout>

How can I show things that are underneath the WebView and stop the WebView from occupying all the rest of the space in the view?


When trying to add weights, things got even more weird. Giving the buttons a weight of 1 and the WebView a weight of 0, meant the buttons didn't show at all:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="2">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        android:text="test1"
        android:layout_weight="1"/>

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        android:text="test2"
        android:layout_weight="1"/>
</LinearLayout>

And then finally when trying to give the WebView a weight of 0.1, the buttons did both show but they had a height of only around 2dp on the screen:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="2.1">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        android:text="test1"
        android:layout_weight="1"/>

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        android:text="test2"
        android:layout_weight="1"/>
</LinearLayout>

Solution

  • Set android:layout_height="0dp" and android:layout_weight="1" so that your webview takes up all the free space between the buttons in height:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/blue"
            android:text="test1"/>
    
        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>
    
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/blue"
            android:text="test2"/>
    </LinearLayout>