Loading gif in WebView not adjusting to WebView

Asked 4/3, 2018 at 17:52 Answered 6/3, 2018 at 4:3

I'm trying to load a gif into WebView, it's working ok, but the problem is that I see this :

The problem is that I can scroll and I'm not seeing the .gif completly in the WebView.

My html is :

<html style="margin: 0;">
<body style="margin: 0;">
<img src="tuto1.gif" style="width: 40%; height: 70%" />
</body>
</html>

And my WebView in xml file is

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/activity_horizontal_margin">


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <WebView
            android:id="@+id/webViewPager"
            android:layout_width="@dimen/_200sdp"
            android:layout_height="@dimen/_250sdp"
            android:layout_gravity="center"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter" />
    </FrameLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="@dimen/activity_horizontal_margin">

        <TextView
            android:id="@+id/section_label"
            style="@style/TextAppearance.AppCompat.Headline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            tools:text="Page One" />

        <TextView
            style="@style/TextAppearance.AppCompat.Body1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/activity_horizontal_margin"
            android:id="@+id/tv_description"
            android:alpha="0.7"
            android:gravity="center"
            android:textColor="@android:color/white" />
    </LinearLayout>

</FrameLayout>

I'm showing this html following :

WebView wv = rootView.findViewById(R.id.webViewPager);
wv.loadUrl("file:///android_asset/tuto1.html");
wv.setBackgroundColor(Color.TRANSPARENT);

NOTE: My .gif is 330 x 750

What is my goal?

I want to see my .gif in that space on the screen and I do not want it to be scrollable I want to show the full "web".

I've tried also Glide but when I put that .gif into an ImageView it lags so hard that's why I use a webView.

Nippon answered 4/3, 2018 at 17:52 Comment(0)

I believe you should try using this https://github.com/koral--/android-gif-drawable instead of wasting time play with infamous Android error-prone webview.

Emersen answered 6/3, 2018 at 4:3 Comment(3)

Could you post an example? getting a .gif from .raw? if it works I'll mark your answer as a correct. – Nippon 6/3, 2018 at 20:45

Can't get it, what do you mean "getting a .gif from .raw"? What is ".raw" here? Have a looks at the lib above, it works with .gif files as other normal drawable picture files (.png, .jpg) – Emersen 14/3, 2018 at 10:18

and please, edit your question, add some text to the picture for example to clarify where is the gif image, where is the pager, what do you really want to do...bla bla, otherwise others can't help you. – Emersen 14/3, 2018 at 10:20

I believe you’re problem can be solved with css Check this answer

Use this style for Body tag :

overflow: hidden;

Tatter answered 4/3, 2018 at 18:12 Comment(1)

I did this : <body style="margin: 0; overflow: hidden;"> and nothing happens – Nippon 4/3, 2018 at 18:16

Try this:

WebSettings settings = webView.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);

https://developer.android.com/guide/webapps/targeting.html#Metadata

Breuer answered 4/3, 2018 at 18:13 Comment(4)

What's that? What's settings? – Nippon 4/3, 2018 at 18:14

I see difference but it's not adjusting... I can not see the full gif – Nippon 4/3, 2018 at 18:18

So, what you see? – Breuer 4/3, 2018 at 18:22

less zoom but not all the image – Nippon 4/3, 2018 at 20:31

 <html>
    <body style="padding:0px;margin:0px;">
      <img src="tuto1.gif" style="width: 100%; height: 100%" />
   </body>
</html>


 <WebView
            android:id="@+id/webViewDetail"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

</WebView>




        webViewDetail.clearCache(true);
        webViewDetail.clearHistory();
        webViewDetail.clearFormData();


        WebSettings webSettings = webViewDetail.getSettings();
        // To enable java script on page.
        webSettings.setJavaScriptEnabled(true);
        webSettings.setAllowContentAccess(true);
        webSettings.setAllowFileAccess(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webSettings.setDomStorageEnabled(true);
        //To always load page from web server, not to use resources from cache.
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);

        String absoulteFileUrlPath = "file://" + singleFile.getAbsolutePath();
        webViewDetail.loadUrl(absoulteFileUrlPath);

Baillie answered 5/3, 2018 at 9:53 Comment(5)

If i follow your steps it works but it overlays the rest of views... I'd like to put the WebView like for example 250x200 and fit the image gif on it... is it possible instead of using matchparent? – Nippon 5/3, 2018 at 10:56

allocate height and width to webview – Baillie 5/3, 2018 at 11:1

If I do this I can scroll on webview – Nippon 5/3, 2018 at 19:3

I don't want it to scroll! I just want the WebView FIT in 220dpx250dp and see the full image in those space – Nippon 6/3, 2018 at 7:25

then you need to allocate height and width to webview – Baillie 6/3, 2018 at 9:26

NOTE: My .gif is 330 x 750

What is my goal?

Recommended topics

Hot tags