Android webview with height:100% and a background image

Question

I have an app which takes data from a database and then displays it as a list of articles. The data is taken and put in a recyclerView with web views in it.

One specific article has this html:

<div style="position: absolute; height: 100%; background: url('https://www.softray.it/wp-content/uploads/2015/10/home-test-6.2.png') no-repeat;">
    <div style="height: 100%; width: 50%; margin-left: auto; margin-right: auto;display: table-cell; vertical-align: middle; text-align: center;">
        <h1 style="padding: 10px; text-align: center; font-family: 'Open Sans', sans-serif; color: #ffffff;">SOFTRAY TECHNOLOGY</h1>
        <p style="padding-left: 5px; text-align: center; color: #ffffff; font-family: 'Open Sans', sans-serif;">La potenza del mobile re-inventa le applicazioni business e un nuovo stile di IT</p>
    </div>
</div>

*Sorry for the messy html I just don't have a decent editing tool on the database.

The problem here is that my background image doesn't display and even the second div doesn't center vertically the way it should.

I tried to attach html and body tags to my data before displaying it but still no background image loads.

holder.webView.loadData("<html style='height:100%;'><body style='height:100%;margin:0;padding:0;'>" + s + "</body></html>", "text/html", "utf-8");

I know I probably have to give an element a fixed height but I want to adapt to any screen. Any tips?

EDIT:i just need to get the height in pixels of the webview content so I can set that in the html tag. Problem with this is that I need to know this dimension before I load my data.

Jeet Karmakar · Answer 1 · 2018-07-19T07:39:10.707

0

Try saving the html code as example.html file in the assets folder and then load the web view using :

webView.loadUrl("file:///android_asset/example.html");

The web view shall use match_parent as width and height to cover 100% of its parent layout.

Edit:

On getting the data from server, you can implement this method:

private void saveHtmlFile(String htmlStr) {

    String path = "/data/data/" + getApplicationContext().getPackageName() + "/files/";
    String fileName = "example";
    fileName = fileName + ".html";
    File file = new File(path, fileName);

    try {
        FileOutputStream out = new FileOutputStream(file);
        byte[] data = htmlStr.getBytes();
        out.write(data);
        out.close();
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///data/data/" + getApplicationContext().getPackageName() + "/files/example.html");
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

Kindly check this link once:

https://stackoverflow.com/a/15617341/6388699

edited Jul 19 '18 at 07:39

answered Jul 18 '18 at 09:14

Jeet Karmakar

94
7

Sadly I can't use match_parent on the heigth because I use the same layout on every item and certain item aren't that big. Another problem is that I can't save the html code since I take it from a db and I don't know what it is in advance. – Alessandro Bianchin Jul 18 '18 at 09:17
Please see the edit. Pass the html string you receive from server to the above function. – Jeet Karmakar Jul 18 '18 at 09:29
What changes from loading from url and loading from string? – Alessandro Bianchin Jul 18 '18 at 12:06
Try and see whether it works or not and let me know. Thanks! – Jeet Karmakar Jul 18 '18 at 13:50
Doesn't change the outcome sadly :( – Alessandro Bianchin Jul 18 '18 at 14:53
That's not what I'm looking for. I think that the problem is that I'm generating new views programmatically so they don't have a fixed height then the html code doesn't know how tall it's going to be. – Alessandro Bianchin Jul 19 '18 at 08:56

Android webview with height:100% and a background image

1 Answers1