Alex Kombo Alex Kombo - 14 days ago 4
Android Question

WebView filling entire parent

I want to load some content in a

DialogFragment
using a
WebView
. The following is my xml layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

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

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/webview"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginTop="20dp"
android:orientation="horizontal"
android:weightSum="2">

<Button
android:id="@+id/decline"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:background="@android:color/transparent"
android:letterSpacing="0.1"
android:text="DECLINE"
android:textAllCaps="true"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:textColor="@color/app_theme"
android:textStyle="bold" />

<Button
android:id="@+id/accept"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:background="@drawable/proceed_button"
android:enabled="false"
android:letterSpacing="0.1"
android:text="ACCEPT"
android:textAllCaps="true"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:textColor="#fff"
android:textStyle="bold" />

</LinearLayout>
</RelativeLayout>


The problem is inasmuchas the height of the webview is set to wrap_content and the buttons are placed below the webview in the relative layout container, the buttons are only visible before the content actually loads. Afterwards, they are completely hidden.

How can i show both the buttons and the webview in the dialog without either obstructing the other?

Answer

Here, try this layout.

Align LinearLayout (which contains Button) to bottom and set WebView above that layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <WebView
        android:id="@+id/webview"

        android:layout_above="@+id/myLayout" 

        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:id="@+id/myLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/webview"
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"

        android:layout_alignParentBottom="true" 

        android:layout_marginTop="20dp"
        android:orientation="horizontal"
        android:weightSum="2">

        <Button
            android:id="@+id/decline"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_marginEnd="10dp"
            android:layout_marginRight="10dp"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:letterSpacing="0.1"
            android:text="DECLINE"
            android:textAllCaps="true"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="@color/app_theme"
            android:textStyle="bold" />

        <Button
            android:id="@+id/accept"
            android:layout_width="0dp"
            android:layout_height="40dp"
            android:layout_weight="1"
            android:background="@drawable/proceed_button"
            android:enabled="false"
            android:letterSpacing="0.1"
            android:text="ACCEPT"
            android:textAllCaps="true"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="#fff"
            android:textStyle="bold" />

    </LinearLayout>
</RelativeLayout>