Android WebView with row of buttons below it

I am going nuts trying to figure out how to make this simple layout work. I want a webview on top of a row of centered buttons. If I specify a specific dp like 400dp I can see the webview on top and the buttons at the bottom of the screen. However, this doesn't scale well for multiple screen sizes. If I use "fill_parent" then I never see the buttons below the webview.

I just want a layout that will always place the buttons at the bottom of the screen (not scrolled off the screen) and have the webview take up the rest of the space above it. I am using a relative layout overall because I want a Progress Indicator centered in the screen while the webview is loading.

Here is my code:

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

<ProgressBar a开发者_如何学JAVAndroid:id="@+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
style="@android:style/Widget.ProgressBar.Inverse"
/>

<WebView android:layout_width="fill_parent" 
        android:id="@+id/webview"
        android:layout_alignParentTop="true"
         android:layout_height="400dp"
         android:layout_weight="1"> 
</WebView>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="@+id/webview"
>

<Button android:text="Browse"
        android:id="@+id/btnBrowse"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="1.0"
        android:layout_alignParentBottom="true"
        android:drawableTop="@drawable/brouse"
        android:textSize="9dp"
        />

<Button android:text="Account"
        android:id="@+id/btnAccount"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="1.0"
        android:layout_alignParentBottom="true"
        android:drawableTop="@drawable/account"
        android:layout_toRightOf="@+id/btnBrowse"
        android:textSize="9dp"
        />

<Button android:text="Contact"
        android:id="@+id/btnContact"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_weight="1.0"
        android:drawableTop="@drawable/contact"
        android:layout_toRightOf="@+id/btnAccount"
        android:textSize="9dp"
        />

<Button android:text="Quote"
        android:id="@+id/btnQuote"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="1.0"
        android:layout_alignParentBottom="true"
        android:drawableTop="@drawable/custom"
        android:layout_toRightOf="@+id/btnContact"
        android:textSize="9dp"
        />
        </LinearLayout>     
</RelativeLayout>

UPDATE:

I tried some more experimentation and got almost what I wanted, except the buttons are on the top of the screen for some reason! WTF? In any case, I will try some of your guys' suggestions shortly! Thanks!

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

<ProgressBar android:id="@+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
style="@android:style/Widget.ProgressBar.Inverse"
/> 

<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">


<WebView  
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="9.0" 
    android:layout_alignParentTop="true"> 
</WebView>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="0px"
android:layout_weight="1"
android:layout_alignParentBottom="true"
>

<Button android:text="Browse"
    android:id="@+id/btnBrowse"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_weight="1.0"
    android:layout_alignParentBottom="true"
    android:drawableTop="@drawable/brouse"
    android:textSize="9dp"
    />

<Button android:text="Account"
    android:id="@+id/btnAccount"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_weight="1.0"
    android:layout_alignParentBottom="true"
    android:drawableTop="@drawable/account"
    android:textSize="9dp"
    />

<Button android:text="Contact"
    android:id="@+id/btnContact"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_weight="1.0"
    android:drawableTop="@drawable/contact"
    android:textSize="9dp"
    />

<Button android:text="Quote"
    android:id="@+id/btnQuote"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_weight="1.0"
    android:layout_alignParentBottom="true"
    android:drawableTop="@drawable/custom"
    android:textSize="9dp"
    />

    </LinearLayout>     

</LinearLayout>

1. Place LinearLayout with buttons to the bottom of the screen.
2. Place the WebView above the LinearLayout.

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

    <ProgressBar android:id="@+id/progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        style="@android:style/Widget.ProgressBar.Inverse" />

    <LinearLayout
        android:id="@+id/button_panel"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <Button ... />
        <Button ... />
        <Button ... />
        <Button ... />
    </LinearLayout>

    <WebView
        android:layout_width="fill_parent"
        android:id="@+id/webview"
        android:layout_above="@id/button_panel"
        android:layout_alignParentTop="true"
        android:layout_height="fill_parent" />
</RelativeLayout>

Just need to tweak the answer from Android layout issue with buttons below WebView .

I understand this as the WebView needs to be configured relatively to the LinearLayout because the buttons have a pre-defined size, and the WebView can guess what space it has left. When you want to do the contrary (buttons relative to the WebView), the WebView start by taking the whole screen and then the buttons can't go anywhere any-more.

For clarity I've included only the relevant bits of the layout. The key is to use android:layout_above on the WebView instead of android:layout_below on the LinearLayout :

<WebView android:layout_width="fill_parent" 
    android:id="@+id/webview"
    android:layout_above="@id/buttons"
    android:layout_height="fill_parent"> 
</WebView>

<LinearLayout
    android:orientation="horizontal"
    android:id="@+id/buttons"
    android:layout_alignParentBottom="true"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <Button android:text="Browse"
        android:id="@+id/btnBrowse"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="1.0"
        android:layout_alignParentBottom="true"
        android:textSize="9dp"/>

    <!-- more buttons ... -->

</LinearLayout> 

TQvm to jkhouw1, Got help from your code and I'd like to share with all the layout I made; The complete code is here- http://blog.kerul.net/2012/01/layout-webview-on-top-of-buttons-in.html

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:layout_alignParentBottom="true"
    android:id="@+id/buttonlayout">

    <ImageButton android:id="@+id/btnprev"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_weight="1.0" android:layout_alignParentBottom="true"
        android:src="@drawable/prevpage"/>

    <ImageButton  android:id="@+id/btnplay"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_weight="1.0" android:layout_alignParentBottom="true"
        android:src="@drawable/play" android:layout_toRightOf="@+id/btnprev"
        />

    <ImageButton  android:id="@+id/btnpause"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_alignParentBottom="true" android:layout_weight="1.0"
        android:src="@drawable/pause" android:layout_toRightOf="@+id/btnplay"
        />

    <ImageButton  android:id="@+id/btnstop"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_weight="1.0" android:layout_alignParentBottom="true"
        android:src="@drawable/stop" android:layout_toRightOf="@+id/btnpause"
        />
    <ImageButton android:id="@+id/btnnext"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_weight="1.0" android:layout_alignParentBottom="true"
        android:src="@drawable/nextpage" android:layout_toRightOf="@+id/btnstop"
        />
</LinearLayout>

<WebView android:layout_width="fill_parent" android:id="@+id/webview"
    android:layout_above="@id/buttonlayout" 
    android:layout_height="fill_parent" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/title"
    android:background="#ffffff">
        <TextView android:text="m-Mathurat" android:id="@+id/lbltitle" 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1.0" 
            />
    </LinearLayout>
</RelativeLayout>

Put the webview relatively above the linear layout like this:

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

    <ProgressBar android:id="@+id/progressbar"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        style="@android:style/Widget.ProgressBar.Inverse" />


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:layout_alignParentBottom="true"
        android:layout_below="@id/webview" android:id="@+id/buttonLayout">

        <Button android:text="Browse" android:id="@+id/btnBrowse"
            android:layout_height="wrap_content" android:layout_width="wrap_content"
            android:layout_weight="1.0" android:layout_alignParentBottom="true"
            android:drawableTop="@drawable/brouse" android:textSize="9dp" />

        <Button android:text="Account" android:id="@+id/btnAccount"
            android:layout_height="wrap_content" android:layout_width="wrap_content"
            android:layout_weight="1.0" android:layout_alignParentBottom="true"
            android:drawableTop="@drawable/account" android:layout_toRightOf="@+id/btnBrowse"
            android:textSize="9dp" />

        <Button android:text="Contact" android:id="@+id/btnContact"
            android:layout_height="wrap_content" android:layout_width="wrap_content"
            android:layout_alignParentBottom="true" android:layout_weight="1.0"
            android:drawableTop="@drawable/contact" android:layout_toRightOf="@+id/btnAccount"
            android:textSize="9dp" />

        <Button android:text="Quote" android:id="@+id/btnQuote"
            android:layout_height="wrap_content" android:layout_width="wrap_content"
            android:layout_weight="1.0" android:layout_alignParentBottom="true"
            android:drawableTop="@drawable/custom" android:layout_toRightOf="@+id/btnContact"
            android:textSize="9dp" />
    </LinearLayout>


    <WebView android:layout_width="fill_parent" android:id="@+id/webview"
        android:layout_above="@id/buttonLayout" android:layout_height="fill_parent" />

</RelativeLayout>

Ok, here’s the code to make this:

The above picture has 2 rows of buttons: one on top and one on the bottom. In the middle is the WebView. Here is my GitHub account where u can download the source code: https://github.com/GeneChuang1/Android/tree/Android

Otherwise, here is the App breakdown:

The Java Code (AndroidMobileAppSampleActivity.java):

package com.gene;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import com.gene.R;

public class AndroidMobileAppSampleActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.app_page);

        WebView mainWebView = (WebView) findViewById(R.id.webcontent);

        WebSettings webSettings = mainWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        mainWebView.setWebViewClient(new MyCustomWebViewClient());
        mainWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

        mainWebView.loadUrl("http://www.google.com");
    }

    private class MyCustomWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }
}

I have 2 XML layouts. One for the main webpage, the other is a pre-made menu that I in the main webpage. The XML Layout “app_page.xml”:

<?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">
    <LinearLayout
        android:id="@+id/page_weekly_items_options_menu"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#d4dbe1"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/share"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedShare"></ImageView>

        <ImageView
            android:id="@+id/left_arrow"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedLeftArrow"></ImageView>

        <ImageView
            android:id="@+id/right_arrow"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedRightArrow"></ImageView>

        <ImageView
            android:id="@+id/notifications_pageweeklyitem"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedNotificationsPageWeeklyItem"></ImageView>

        <ImageView
            android:id="@+id/favorites_pageweeklyitem"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedFavoritesPageWeeklyItem"></ImageView>

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/webcontent_container"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_below="@id/page_weekly_items_options_menu">

        <WebView
            android:id="@+id/webcontent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/menu"
            ></WebView>
        <include
            android:id="@+id/menu"
            layout="@layout/bottom_menu"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:layout_alignParentBottom="true"
            android:gravity="bottom"
            android:layout_weight="1"
            />


    </RelativeLayout>

</RelativeLayout>

The other XML layout is “bottom_menu.xml”:

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/bottom_scroll_menu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom" >
    <!-- This layout is used by activity_main.xml.
    It is part of the main home page -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#17528c"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/Weekly"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedWeekly" >
        </ImageView>

        <ImageView
            android:id="@+id/Search"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedSearch" >
        </ImageView>

        <ImageView
            android:id="@+id/Favorites"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedFavorites" >
        </ImageView>

        <ImageView
            android:id="@+id/Notifications"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedNotifications" >
        </ImageView>

        <ImageView
            android:id="@+id/Profile"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedProfile" >
        </ImageView>

        <ImageView
            android:id="@+id/About"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedAbout" >
        </ImageView>
    </LinearLayout>

</HorizontalScrollView>

The Android Manifest (just incase someone forgets the internet permission):

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="tscolari.mobile_sample"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="10" />

    <uses-permission android:name="android.permission.INTERNET"/>

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".AndroidMobileAppSampleActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

Again, here is my GitHub account where u can download the source code: https://github.com/GeneChuang1/Android/tree/Android