Android WebView image width 100%
Implementing Android WebView image width 100% was a bit trickier than I thought. I was passing some HTML content from a WordPress website’s post body field to an Android App’s WebView that has the ability to collapse itself.
No setting on the WebView would format the image to always scale to width 100%, until I remembered that you can pass in Some CSS in the content as well.
Since the editors on the WordPress side don’t know how to write CSS the easiest way was to add it on the Android side right before displaying the content.
// aboutPage is just a business object I created
// with a method to get the content of the page.
// Step 1: I create the Style for displaying the images width 100%
String styleString = "<style>img{display: inline;height: auto;max-width: 100%;}</style>";
my_web_view.setText(Html.fromHtml(aboutPage.getAccordionWysiwygBody().toString()));
// Step2: I pass the style together the HTML that will be loaded in the Webview.
my_web_view.loadData(styleString + aboutPage.getAccordionWysiwygBody(), "text/html", "UTF-8");
I really hope you found this useful, leave a comment below!
