Android Webiew App show image before loading site

Question

I'm fresh for Android App. I done my first Webview app. Now want to add Loading Image(.jpg), before the website load. I don't know anything. Just explain clearly. Image may add in app or image from another source.

My activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

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

</FrameLayout> 

AndroidManifest.xml is below,

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.steptoinstall.steptoinstall" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

    <uses-permission android:name="android.permission.INTERNET" />

</manifest>

MainActivity.java is below,

package com.steptoinstall.steptoinstall;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MainActivity extends ActionBarActivity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.activity_main_webview);

        mWebView = (WebView) findViewById(R.id.activity_main_webview);
        mWebView.loadUrl("http://www.steptoinstall.com");

        // Enable Javascript
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);

         // Force links and redirects to open in the WebView instead of in a browser
        mWebView.setWebViewClient(new WebViewClient());
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        return super.onOptionsItemSelected(item);
    }
}

Answer 1

I think the easiest way to do it is to place an imageView over the webView and then when the site loaded, hide it.

First of all u must change your xml like this:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin">

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

    <ImageView
        android:id="@+id/activity_main_imageview"
        android:layout_height="match_parent"
        android:layout_width="match_parent" />


</FrameLayout> 

and add this line to your main activity

mWebView.setWebViewClient(new WebViewClient() {

   public void onPageFinished(WebView view, String url) {
        // hide your imageView
    }
});

just let me know if u wanted more details.

Update 2: In your MainActivity, after setContentView, add this:

final ImageView mImageView = (ImageView)findViewById(R.id.activity_main_imageview);

after that u can set image to this imageView in xml or in code:

in xml change your ImageView:

<ImageView
    android:id="@+id/activity_main_imageview"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:src="@drawable/img" />

and your MainActivity should be this:

mWebView = (WebView) findViewById(R.id.activity_main_webview);

    mWebView = (WebView) findViewById(R.id.activity_main_webview);
    mWebView.loadUrl("http://www.steptoinstall.com");

    // Enable Javascript
    WebSettings webSettings = mWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);

     // Force links and redirects to open in the WebView instead of in a browser
mWebView.setWebViewClient(new WebViewClient() {

   public void onPageFinished(WebView view, String url) {
    mImageView.setVisibility(View.GONE);
    }
    });

Answer 2

To add Splash screen before loading main activity. then add this

import android.app.Activity;

import android.content.Intent; import android.os.Bundle;

import com.example.tabs.R;

public class Splash extends Activity implements Runnable {

Thread mThread;

@Override
protected void onCreate(Bundle savedInstanceState) 
{
    super.onCreate(savedInstanceState);

    setContentView(R.layout.splash);

    mThread = new Thread(this);

    mThread.start();
}

@Override
public void run() 
{
    try
    {
        Thread.sleep(2000);
    }
    catch (Exception e) 
    {
        e.printStackTrace();
    }
    finally
    {
        startActivity(new Intent(Splash.this, MainActivity.class));

        finish();
    }
}

}

and xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/splash" >


</LinearLayout>