Android: Laying 2 Webviews side by side

Question

I have a LinearLayout followed by a Button, then 2 webviews and then another LinearLayout in a RelativeLayout. The webviews need to be side by side. You can imagine it looking like http://developer.android.com/training/ left hand menu and right hand content, top menu and bottom footer.

When the button is clicked, the webviews are loaded. However, this is not working. Only one webview is loading content. I notice if I remove "layout_toRightOf" from the webview and display the webview below one another, then it works fine. Alternatively, if I remove "layout_toRightOf" and use "layout_toLeftOf" for the other webview. then the laer webview display content. Please advise, how I could achieve this.

I have also tried Table Layout but no luck. I have tried wrap_content or fixed width but no luck either.

Also, please advise how I can show hide the left webview by clicking an icon or something. When this happens, the right webview should stretch to full width. I have included my code for reference.

<RelativeLayout 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:layout_marginTop="@dimen/menu_height"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".HomeActivity">

<LinearLayout
    android:id="@+id/llayoutTop"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="some text on top edit" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button top" />
</LinearLayout>


<Button
    android:id="@+id/home_bGetFile"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/llayoutTop"
    android:layout_gravity="bottom"
    android:onClick="getFiles"
    android:text="@string/button_getFiles" />    

<WebView
    android:id="@+id/home_webViewLeft"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/home_bGetFile" />

<WebView
    android:id="@+id/home_webViewRight"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/home_bGetFile"
    android:layout_toRightOf="@id/home_webViewLeft" />

<LinearLayout
    android:id="@+id/llayoutBottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="some text on bottom edit" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button bottom" />
</LinearLayout>

Answer 1

Try this.

<RelativeLayout 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:layout_marginTop="@dimen/menu_height"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".HomeActivity" >

    <LinearLayout
        android:id="@+id/llayoutTop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" >

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="some text on top edit" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button top" />
    </LinearLayout>

    <Button
        android:id="@+id/home_bGetFile"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/llayoutTop"
        android:layout_gravity="bottom"
        android:onClick="getFiles"
        android:text="@string/button_getFiles" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/llayoutBottom"
        android:layout_below="@+id/home_bGetFile" >

        <WebView
            android:id="@+id/home_webViewLeft"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <WebView
            android:id="@+id/home_webViewRight"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/llayoutBottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true" >

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="some text on bottom edit" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button bottom" />
    </LinearLayout>

</RelativeLayout>

Answer 2

Put the WebViews in a LinearLayout, then set their width to 0, and their weight to 1.

<LinearLayout
    android:layout_width="match_parent"
    android:height="wrap_content"
    android:orientation="horizontal"
    android:layout_below="@id/home_bGetFile">

<WebView
    android:id="@+id/home_webViewLeft"
    android:layout_width="0"
    android:layout_height="wrap_content"
    android:layout_weight="0"/>

<WebView
    android:id="@+id/home_webViewRight"
    android:layout_width="0"
    android:layout_height="wrap_content"
    android:layout_weight="0"/>
</LinearLayout>

The reason what you're doing doesn't work, is because the first WebView is setting it's width to "wrap_content", which is likely causing it to take up the whole screen, then you're trying to tell the other view to sit to the right of that (off the screen). RelativeLayouts are just that - their positions are relative to each other. So unless you set the width to exactly half the width of the screen (difficult to do), you're better of using a LinearLayout