Taking Advantages of WebView.. DIRTY PASS

Shubham Agarwal

8 May 2017

If you are a fan of NFS you must be well aware of DIRTY PASS. Nowadays, android development is faster than earlier. Our applications have been moved to data binding and MVVM approaches which are relatively faster and efficient plus enhance development process. We are using different third party library (like Retrofit, Glide as we don’t want to reinvent the wheel ) which in turn make the Android development a clean architecture.

SO WHAT IS DIRTY PASS?

The are many pages in the E-commerce application apart from regular CMS pages which can be shown in the application using WebView. The advantage of using WebView allows you to show the HTML content of pages in the application without any effort and will give the same native design effect. Not only the view/design part, there are a number of pages or content that previously take days to complete are now finished in a couple of hours.

So how to take advantage of Webview to show the content.

RECIPE

You can create the HTML data along with the link to your stylesheets and other stuff. Add some HTML content and load it in the Web view.

Following script will load html content along with CSS (Yes, you heard me right along with CSS)

  String data =
                "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">"
                        + "<HTML xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\" class=\"gr__store_webkul_com\">"
                        + "<HEAD>"
                        + "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">"
                        + "<link href=\"//fonts.googleapis.com/css?family=Roboto:400,500,700\" rel=\"stylesheet\">"
                        + "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://store.webkul.com/media/css_secure/89aa71afb3ecb34692b0d739a8f17803.css\" media=\"print\">"
                        + "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://store.webkul.com/media/css_secure/9d990e5b9fdec418ed3ea3d600d6d11d.css\" media=\"all\">"
                        + "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://store.webkul.com/media/css_secure/9711786c13adcbfb8665d020517f137d.css\" media=\"all\">"
                        + "</HEAD>"
                        + "<BODY style=\"background-color: #FFFFFF; text-align:left;padding:10px;\">"
                        + htmlContent
                        + "</BODY>"
                        + "</HTML>";
        mBinding.descriptionWv.loadData(data, "text/html", Xml.Encoding.UTF_8.name());

String data =

"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">"

+ "<HTML xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\" class=\"gr__store_webkul_com\">"

+ "<HEAD>"

+ "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">"

+ "<link href=\"//fonts.googleapis.com/css?family=Roboto:400,500,700\" rel=\"stylesheet\">"

+ "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://store.webkul.com/media/css_secure/89aa71afb3ecb34692b0d739a8f17803.css\" media=\"print\">"

+ "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://store.webkul.com/media/css_secure/9d990e5b9fdec418ed3ea3d600d6d11d.css\" media=\"all\">"

+ "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://store.webkul.com/media/css_secure/9711786c13adcbfb8665d020517f137d.css\" media=\"all\">"

+ "</HEAD>"

+ "<BODY style=\"background-color: #FFFFFF; text-align:left;padding:10px;\">"

+ htmlContent

+ "</BODY>"

+ "</HTML>";

mBinding.descriptionWv.loadData(data, "text/html", Xml.Encoding.UTF_8.name());

SAMPLE TO KEEP YOU MOTIVATED:

That’s all for lazy programming.