Tuesday, November 15, 2016
Layout WebView on top of buttons in Android app
Layout WebView on top of buttons in Android app
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
Available link for download
