Tuesday, November 15, 2016

Layout WebView on top of buttons in Android app

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


Tutorial Pengaturcaraan Android


Available link for download