File Update: layout

Showing posts with label layout. Show all posts

Tuesday, November 15, 2016

Layout WebView on top of buttons in Android app

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