How To Overlap Two Layouts in Android.

Today I am going To Discribe You How we can overlap or place one layout over another. and open the multiple html pages on a single XML file.

Part One

First Step :- Open an xml file and take frame layout insert a web view and the code has shown below.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/FrameLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

Second Step :- Now take a Relative layout and and but two Buttons in that . The final XML is shown below.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/FrameLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:background="@drawable/next" />

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:background="@drawable/previous" />

    </RelativeLayout>

</FrameLayout>

Part Two:- 

First Step :-Now Comes to The second part which is coding. Create an activity and Create the following Objects 

Button prev,next;
int z=0;
WebView w1;

Second Step :- Create a onCreate Function and put initialize the following variables.

prev=(Button)findViewById(R.id.button1);

next=(Button)findViewById(R.id.button2);

w1=(WebView)findViewById(R.id.webView1);

Third Step :- We have taken a z variable to keep a track on the html page's which we are going to open in over webview. Now Load the First page in the web view which will be loaded automatically when the app will be open.

w1.loadUrl("file:///android_asset/it/htmlPage.html");

Note:- Make sure you have the HTML files in your asserts folder.

Fourth Step:- Now implement the onclick listener on the button and put the if else condition (See below to Take an Idea).

prev.setOnClickListener(new OnClickListener() {
          
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if (z>0) {
                    --z;
                }
                              
                if (z==0){
                    w1.loadUrl("file:///android_asset/it/htmlPage.html");
                }
                else if (z==1) {
                    w1.loadUrl("file:///android_asset/it/ourServices.html");
                }
            }
        });
        next.setOnClickListener(new OnClickListener() {
          
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if(z<2){
                    ++z;
                }
              
                if (z==1){
                    w1.loadUrl("file:///android_asset/it/ourServices.html");
                }
                else if (z==2) {
                    w1.loadUrl("file:///android_asset/it/contact.html");
                }
            }
        });    

FULL CODE :-

public class MainActivity extends Activity{

    Button prev,next;
    int z=0;
    WebView w1;
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        prev=(Button)findViewById(R.id.button1);
        next=(Button)findViewById(R.id.button2);
        w1=(WebView)findViewById(R.id.webView1);
       
        w1.loadUrl("file:///android_asset/it/htmlPage.html");
       
        prev.setOnClickListener(new OnClickListener() {
           
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if (z>0) {
                    --z;
                }
                               
                if (z==0){
                    w1.loadUrl("file:///android_asset/it/htmlPage.html");
                }
                else if (z==1) {
                    w1.loadUrl("file:///android_asset/it/ourServices.html");
                }
            }
        });
        next.setOnClickListener(new OnClickListener() {
           
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                if(z<2){
                    ++z;
                }
               
                if (z==1){
                    w1.loadUrl("file:///android_asset/it/ourServices.html");
                }
                else if (z==2) {
                    w1.loadUrl("file:///android_asset/it/contact.html");
                }
            }
        });   
    }
}

Snapshots:-

Click Here Download The Code :-