Android WebView Example | How to create WebView?

       Hello everybody, its been a while since I have blogged about something. Today I am not going to write about any Android app or Android tech, But today I will teach you about how to make an android app to show your own website. I know there exist many sites like appgeyser  which will let you create such types of apps, but if you want to learn to make android app than you need to start learning somewhere. So why not start with making of webView? P.S In simple language webView is used to show webpage. You can read about webView on android developer tools. And yes I would like to make one thing clear, I am not some big Android developer, Here I will be sharing in next few posts what I have learnt in last few months. Anyway will try to help you in all ways possible.

So lets stop talking and get to work.

To start Android App development you'll need Android Developer Tools. You can get here. All tools needed are already there on that site. You just have to download it. And how to set an Android Development Environment can be found here. Actually I was going to write about it in detail but then it was written in such an easy and simple way on Android Developer site that I thought that I won't be able to simplify it more and you can very well read it there [Links are very well provided].

• So after you are done with setting up an environment, Start eclipse.
• When you start eclipse, it will ask to load a workspace, If it would be your first time you can use default workspace or create your own.
• After you have defined workspace, eclipse will load. Than go to file>new>project>Than select Android and than Android Application Project.

Screen will look like this..

• Than new Screen will imerge which will ask you for Activity name, Application name, Package name and so on. (remember to write package name properly as, when you submit your app to android playstore, package name will be included in your app's URL)

• Click Next on this screen without making any changes.

• You can click Next in this screen too,  You can define your app icon here. But I skip it always as you can always add that later too.

• Click Next in this screen too. It lets you create different types of activities like you want particular activity to start in full screen mode or master detail mode. But we will take blank activity for this app.

• Next screen will ask you to write activity name and layout name. Write that name as you want or keep it unchanged. Click finish here and it will take you to our destination where we will start coding.

• Than go to WebView > res > layout > layout file ( In my case it is main.xml) and paste following code.

<framelayout 
android:id="@+id/container" 
android:layout_height="match_parent" 
android:layout_width="match_parent" 
tools:context=".MainActivity" 
tools:ignore="MergeRootFrame" 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools">
         
<webview 
android:id="@+id/activity_main_webview" 
android:layout_height="match_parent" 
android:layout_width="match_parent"/>
</framelayout>

Your graphical layout will look something like this

• Than we will need to write code in source folder. For that go to webView > src > in.droidgyaan (That's my activity name) 
• Than paste following code

package in.droidgyaan;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.app.Activity;


public class MainActivity extends Activity {
    
    private WebView mWebView;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main); //Sets layout to main layout defined in res>layout>main
        mWebView = (WebView) findViewById(R.id.activity_main_webview); //finds webview by id we mentioned in main.xml
        //Enables JavaScript
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true); //Sets javascript to true
        mWebView.setWebViewClient(new WebViewClient()); 
        mWebView.loadUrl("http://www.droidgyaan.in/?m=1"); //It loads website we mention here.
       
    }
}

• Now you are ready with your first android app. But remember if you have made any changes to activity name after you made your project or midway somewhere, you will need to change activity name in manifest file too, otherwise your app won't run, it will give error. You'll need to add internet permission to manifest file to allow application to use internet. You can give access to internet by using following code in your manifest file.

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

• Now after you are done with coding, you can make an .apk file to run it on your phone.by going to File > Export > Android > Export Android Application > Select project you want to export as apk file > Now select keystore > Now select keyalias > Now select destination folder to save your apk file. (Keystore is used to encrypt your app with particular key, you can use default keystore by going to C drive > Users > Select admin username > than go to .android > select debug.keystore. Password for it is android. This is debug key provided by Google. While releasing android app it is preferable to make your apk file by your own keystore. But remember to store your keystore as safely as possible because if you release an app on playstore with X keystore and than after sometime you want to release an update to your app than you have to use that same keystore as you used before otherwise it will be considered new app. So keep copy of that keystore at as many place you can. I would recommend save it on cloud. Make your own keyalias too along with keystore).

Now we are done with our first Android App Development tutorial. Hope it is helpful to you.

You can download source code for this project from my Github, Click here to download.

If you have any questions fire it up in comment section below. I will try to solve it somehow.