Layout - WebView on top of buttons in Android app

Figure 1

It has been a while since I’ve been researching for this capability. I need to design a layout that has a WebView on top of a row of buttons. Found a sample in StackOverFlow and it was a relieve at the end. Credit to jkhouw1.

• By using the RelativeLayout, a view can be arrange dependent to the other view.
• I set a LinearLayout for the buttons and providing and id=buttonlayout
• The WebView need to specify this android:layout_above="@id/buttonlayout"

This is the layout available in main.xml.

<?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">
    
    <!-- notice the id=buttonlayout -->
    <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">
        
        <!-- notice the android:layout_weight="1.0" -->
        <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>
    
    <!-- notice the android:layout_above="@id/buttonlayout" -->
    <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>

Complete source code is here;

 

For the Malay version of this tutorial, head to AndroidKod.net