Skip to main content

Layout - WebView on top of buttons in Android app

WebView on top of buttons in Android appFigure 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=""
android:orientation="vertical" android:layout_width="fill_parent"

<!-- notice the id=buttonlayout -->
<LinearLayout xmlns:android=""
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"

<!-- 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"

<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"

<!-- notice the android:layout_above="@id/buttonlayout" -->
<WebView android:layout_width="fill_parent" android:id="@+id/webview"
android:layout_height="fill_parent" />

<LinearLayout xmlns:android=""
android:orientation="horizontal" android:layout_width="fill_parent"
<TextView android:text="m-Mathurat" android:id="@+id/lbltitle"

Complete source code is here;


For the Malay version of this tutorial, head to

Tutorial Pengaturcaraan Android


Popular posts from this blog

Several English proverbs and the Malay pair

Or you could download here for the Malay proverbs app – English proverbs and the Malay pair Corpus Reference: Amir Muslim, 2009. Peribahasa dan ungkapan Inggeris-Melayu. DBP, Kuala Lumpur CTRL+F to search Proverbs in English Definition in English Similar Malay Proverbs Definition in Malay 1 Where there is a country, there are people. A country must have people. Ada air adalah ikan. Ada negeri adalah rakyatnya. 2 Dry bread at home is better than roast meat home's the best hujan emas di negeri orang,hujan batu di negeri sendiri Betapa baik pun tempat orang, baik lagi tempat sendiri. 3 There's no accounting for tastes We can't assume that every people have a same feel Kepala sama hitam hati lain-lain. Dalam kehidupan ini, setiap insan berbeza cara, kesukaan, perangai, tabia

WebDev PHP DEVELOPMENT TOOLS Download the XAMPP latest version from . This installation file contains the Apache web server, PHP 5 and 4 interpreter, and the MySQL 5 Community edition. - download latest version MozillaFireFox (OpenSource web browser firefox) – download latest version Google Chrome – fastest web browser on earcth – fast download chrome here TEACHING PLAN Download the teaching plan here for Web/Internet Programming ( download ) NOTES HTML references HTML Editor - Lab 1: HTML Basics - Lab 2: Responsive Design: Lab 3: HTML Forms Lab 4: HTML 5 Lab 5: Bootstrap for responsive Web -

Submit your blog address here

Create your own blog and send the address by submitting the comment of this article. Make sure to provide your full name, matrix and URL address of your blog. Refer to the picture below. Manual on developing a blog using and AdSense, download here … Download Windows Live Writer (a superb offline blog post editor)

Contact Us at

Powered by EMF HTML Contact Form

ASK kerul pls...

Ask me please, just click the button... Any question related to the web, PHP, database, internet, this blog, my papers, or anything. I'll answer to you as soon as I can, if related to my domain. If not I'll try to find out from Google and provide you a link that can help you solve a problem. Sincerely, kerul. ASK kerul pls...