Search code examples
androidhtmlwebviewandroid-webviewanimated-gif

Scroll bars and alignment webview android for animated gif

I have a webview in an android app as I needed to display an animation. I made my frames into an animated gif and it works perfectly. This is actually the background of my fragment.

I am developing for an "in house" app so I am only developing for one model of phone and 1080 x 1920 screen, the gif is also 1080 x 1920.

Everything looks pretty good but the gif is drawn 10 pixels or so to the right and bottom in the webview and the view then has scroll bars no matter what I try to do.

WebView wb = (WebView) findViewById(R.id.error3animatedbkgd);

    wb.loadDataWithBaseURL(
            "fake://lala",
            "<body leftmargin=/�0/� topmargin=/�0/� rightmargin=/�0/� bottommargin=/�0/�><div style=\"text-align: left;\"><IMG id=\"myanim\" SRC=\"file:///android_asset/hcinterfaceerror3animAll.gif\" style=\"height: 100%\"style=\"width: 100%\"leftmargin=/�0/� topmargin=/�0/� rightmargin=/�0/� bottommargin=/�0/� /></div></body>", 
            "text/html",  
            "UTF-8", 
            "fake://lala");
    wb.getSettings().setUseWideViewPort(false);
    wb.setVerticalScrollBarEnabled(false);
    wb.setHorizontalScrollBarEnabled(false);
    wb.setScrollContainer(false);

After closing and re-opening my project and updating my github repo the " symbols were replaced by � ??? Any idea how to fix this?

and in my layout I have

 <WebView
 android:id="@+id/error3animatedbkgd"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scrollbars="none" />

The output looks like this---EDIT the margin is white and the scroll bars disappear as I take a screenshot on the phone so it is hard to see here.

Any ideas on how to display a fixed and centered image (no scrolling or moving)?

screenshot of webview with gif in android

Solution

  • It looks like you are specifying margins incorrectly in your html. This is how to do it right:

    <body style="margin:0">
  <img id="myanim" src="...">
</body>

    You missed declaring style attribute. Also leftmargin etc. are not valid CSS attribute specifiers. The correct ones are margin-left etc. But you can also just use margin if you want to set all of them to 0. You don't actually need to specify anything on your img element, and probably don't need the div element.