Show Html text in WebView with a simple example

on

Show Html text in WebView with a simple example 

In this tutorial we will learn how to display Html text in a WebView with a simple example in Android Studio.

Example:
  • Do not create a new project continue in a same project that we learned in a previous tutorial.
  • Just add some code in java file as follows.
File: MainActivity.java:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

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

        // store html text in a string
        String html = "<html>\n" +
                "<head>\n" +
                "<meta charset=\"utf-8\">\n" +
                "<title>Best Login Page design in html and css</title>\n" +
                "<style type=\"text/css\">\n" +
                "body {\n" +
                "background-color: #f4f4f4;\n" +
                "color: #5a5656;\n" +
                "font-family: 'Open Sans', Arial, Helvetica, sans-serif;\n" +
                "font-size: 16px;\n" +
                "line-height: 1.5em;\n" +
                "}\n" +
                "a { text-decoration: none; }\n" +
                "h1 { font-size: 1em; }\n" +
                "h1, p {\n" +
                "margin-bottom: 10px;\n" +
                "}\n" +
                "strong {\n" +
                "font-weight: bold;\n" +
                "}\n" +
                ".uppercase { text-transform: uppercase; }\n" +
                "\n" +
                "/* ---------- LOGIN ---------- */\n" +
                "#login {\n" +
                "margin: 50px auto;\n" +
                "width: 300px;\n" +
                "}\n" +
                "form fieldset input[type=\"text\"], input[type=\"password\"] {\n" +
                "background-color: #e5e5e5;\n" +
                "border: none;\n" +
                "border-radius: 3px;\n" +
                "-moz-border-radius: 3px;\n" +
                "-webkit-border-radius: 3px;\n" +
                "color: #5a5656;\n" +
                "font-family: 'Open Sans', Arial, Helvetica, sans-serif;\n" +
                "font-size: 14px;\n" +
                "height: 50px;\n" +
                "outline: none;\n" +
                "padding: 0px 10px;\n" +
                "width: 280px;\n" +
                "-webkit-appearance:none;\n" +
                "}\n" +
                "form fieldset input[type=\"submit\"] {\n" +
                "background-color: #008dde;\n" +
                "border: none;\n" +
                "border-radius: 3px;\n" +
                "-moz-border-radius: 3px;\n" +
                "-webkit-border-radius: 3px;\n" +
                "color: #f4f4f4;\n" +
                "cursor: pointer;\n" +
                "font-family: 'Open Sans', Arial, Helvetica, sans-serif;\n" +
                "height: 50px;\n" +
                "text-transform: uppercase;\n" +
                "width: 300px;\n" +
                "-webkit-appearance:none;\n" +
                "}\n" +
                "form fieldset a {\n" +
                "color: #5a5656;\n" +
                "font-size: 10px;\n" +
                "}\n" +
                "form fieldset a:hover { text-decoration: underline; }\n" +
                ".btn-round {\n" +
                "background-color: #5a5656;\n" +
                "border-radius: 50%;\n" +
                "-moz-border-radius: 50%;\n" +
                "-webkit-border-radius: 50%;\n" +
                "color: #f4f4f4;\n" +
                "display: block;\n" +
                "font-size: 12px;\n" +
                "height: 50px;\n" +
                "line-height: 50px;\n" +
                "margin: 30px 125px;\n" +
                "text-align: center;\n" +
                "text-transform: uppercase;\n" +
                "width: 50px;\n" +
                "}\n" +
                ".facebook-before {\n" +
                "background-color: #0064ab;\n" +
                "border-radius: 3px 0px 0px 3px;\n" +
                "-moz-border-radius: 3px 0px 0px 3px;\n" +
                "-webkit-border-radius: 3px 0px 0px 3px;\n" +
                "color: #f4f4f4;\n" +
                "display: block;\n" +
                "float: left;\n" +
                "height: 50px;\n" +
                "line-height: 50px;\n" +
                "text-align: center;\n" +
                "width: 50px;\n" +
                "}\n" +
                ".facebook {\n" +
                "background-color: #0079ce;\n" +
                "border: none;\n" +
                "border-radius: 0px 3px 3px 0px;\n" +
                "-moz-border-radius: 0px 3px 3px 0px;\n" +
                "-webkit-border-radius: 0px 3px 3px 0px;\n" +
                "color: #f4f4f4;\n" +
                "cursor: pointer;\n" +
                "height: 50px;\n" +
                "text-transform: uppercase;\n" +
                "width: 250px;\n" +
                "}\n" +
                ".twitter-before {\n" +
                "background-color: #189bcb;\n" +
                "border-radius: 3px 0px 0px 3px;\n" +
                "-moz-border-radius: 3px 0px 0px 3px;\n" +
                "-webkit-border-radius: 3px 0px 0px 3px;\n" +
                "color: #f4f4f4;\n" +
                "display: block;\n" +
                "float: left;\n" +
                "height: 50px;\n" +
                "line-height: 50px;\n" +
                "text-align: center;\n" +
                "width: 50px;\n" +
                "}\n" +
                ".twitter {\n" +
                "background-color: #1bb2e9;\n" +
                "border: none;\n" +
                "border-radius: 0px 3px 3px 0px;\n" +
                "-moz-border-radius: 0px 3px 3px 0px;\n" +
                "-webkit-border-radius: 0px 3px 3px 0px;\n" +
                "color: #f4f4f4;\n" +
                "cursor: pointer;\n" +
                "height: 50px;\n" +
                "text-transform: uppercase;\n" +
                "width: 250px;\n" +
                "}\n" +
                "</style>\n" +
                "</head>\n" +
                "<body>\n" +
                "<div id=\"login\">\n" +
                "<h1><strong>Welcome.</strong> Please login.</h1>\n" +
                "<form action=\"javascript:void(0);\" method=\"get\">\n" +
                "<fieldset>\n" +
                "<p><input type=\"text\" required value=\"Username\" onBlur=\"if(this.value=='')this.value='Username'\" onFocus=\"if(this.value=='Username')this.value='' \"></p>\n" +
                "<p><input type=\"password\" required value=\"Password\" onBlur=\"if(this.value=='')this.value='Password'\" onFocus=\"if(this.value=='Password')this.value='' \"></p>\n" +
                "<p><a href=\"#\">Forgot Password?</a></p>\n" +
                "<p><input type=\"submit\" value=\"Login\"></p>\n" +
                "</fieldset>\n" +
                "</form>\n" +
                "<p><span class=\"btn-round\">or</span></p>\n" +
                "<p>\n" +
                "<a class=\"facebook-before\"></a>\n" +
                "<button class=\"facebook\">Login Using Facbook</button>\n" +
                "</p>\n" +
                "<p>\n" +
                "<a class=\"twitter-before\"></a>\n" +
                "<button class=\"twitter\">Login Using Twitter</button>\n" +
                "</p>\n" +
                "</div> <!-- end login -->\n" +
                "</body>\n" +
                "</html>";

        // initialize webView and set html text in a webView
        WebView webView = (WebView)findViewById(R.id.webView);
        webView.loadData(html, "text/html; charset=utf-8", "utf-8");

        // enabling javaScript
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
    }
}

    

  • Html code is taken from http://www.aspdotnet-suresh.com/2014/06/best-login-page-design-in-html-css-with.html.
    • 

  • Now run the Application and enjoy the output.
    • 


Output:

Comments

Post a Comment