How to Shrink WebView size dynamically according to its content?

Question

A detailed explanation of issue can be understood from this question as the user had added image to explain it better.

I am loading Html content in my WebView. My layout is having many view and WebView is place inside ScrollView(as per layout requirement). Please don't answer as - "Don't put WebView inside ScrollView". I know that its not a good thing to put WebView inside a ScrollView, but as per requirement I need to do so.

So, I have Left Fragment(showing List Items) and Right Fragment(Showing data reflected on selection of List Item from Left Fragment). Now, first of all when I load Html content inside WebV it shows correct. After that when I refresh WebView with new Html content the problem occurs.

Suppose, my first Html content is of 100 lines it shows correctly and then I reload WebView with my new Html content which is of 40 lines then the WebView is not shrinking and fitting to the content with 40 lines, it still remains as long as 100 lines showing white/blank space at the bottom.

So, it seems that WebView is able to re-size itself from less content which is previously loaded to more content but unable to re-size itself when the content is less than previously loaded content.

I had tried many ways,

Adding android:hardwareAccelerated="true" in Manifest
This Blog
Also many other ways and blog
Also I had tried to use mWebView.clearView(); which causes to re-size the size of WebView but at times the WebView start blinking which is just annoying. Similar to this video

But, couldn't find any proper solution. If anyone of you have the same issue before just let me know the best solution I could apply.

UPDATE -

After further googling it seems that this is a well-known issue in Honeycomb. This question also indicates the similar issue.

you must have tried but i am asking just to confirm, did you try to call invalidate on webView. other thing is have you set scrollView's fillViewPort property to true. — N-JOY, Mar 21 '13 at 12:38
@N-JOY yeah I have tried to call mWebView.invalidate() and also I had tried to use fillViewPort for ScrollView, still no success. — Lalit Poptani, Mar 21 '13 at 12:44

score 6 · Accepted Answer · edited May 18 '18 at 07:42

6

Seems there's no way to resize the WebView(decrease) its size dynamically once its loaded. So, the only thing that could solve my problem was reloading the complete WebView.

So, instead of defining the Fragment in XML, I changed my stuff by adding Fragment dynamically every time. By which I was able to solve my issue.

edited May 18 '18 at 07:42

halfer

19,824
17
99
186

answered Apr 01 '13 at 05:01

Lalit Poptani

67,150
23
161
242

What do you mean by "reloading the complete webview"? – Bryan Apr 02 '14 at 19:31
1

@Bryan it means I am replacing the complete fragment over another. – Lalit Poptani Apr 03 '14 at 05:12

score 1 · Answer 2 · answered Mar 21 '13 at 13:06

This is a known problem with WebView and some available solution doesn't work in all the devices.

I tried many solution given in SO answers and also searched over the internet but none of them worked for me too.

I ended up , removing the WebView and adding the WebView again at the same position in in Layout

Here is that demo code,

        final RelativeLayout rl = new RelativeLayout(this);
        myWebView = new WebView(this);
        myWebView.setBackgroundColor(Color.GRAY);
        myWebView.loadUrl("file:///android_asset/1.htm");
        rl.addView(myWebView);  // ******* Added At Index 0
        Button btn = new Button(this);
        btn.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                if (!flg) {
                    rl.removeViewAt(0);
                    myWebView = new WebView(MainActivity.this);
                    myWebView.setBackgroundColor(Color.GRAY);
                    myWebView.loadUrl("file:///android_asset/3.htm");
                    rl.addView(myWebView, 0, new RelativeLayout.LayoutParams(
                            new LayoutParams(LayoutParams.FILL_PARENT,
                                    LayoutParams.WRAP_CONTENT)));
                    flg = true;
                } else {
                    rl.removeViewAt(0);
                    myWebView = new WebView(MainActivity.this);
                    myWebView.setBackgroundColor(Color.GRAY);
                    myWebView.loadUrl("file:///android_asset/1.htm");
                    rl.addView(myWebView, 0, new RelativeLayout.LayoutParams(
                            new LayoutParams(LayoutParams.FILL_PARENT,
                                    LayoutParams.WRAP_CONTENT)));
                    flg = false;
                }
            }
        });
        rl.addView(btn); // ******* Added At Index 1
        setContentView(rl);

Thanks for the reply, but did you check [this blog](http://vision-apps.blogspot.in/2012/08/android-webview-tips-tricks.html) added by me in the question, which clearly says that if we try to add WebView dynamically everytime there will be a blinking effect of the WebView. — Lalit Poptani, Mar 21 '13 at 13:42
This worked in my case and so called "blink" was almost invisible. — sandalone, Apr 24 '15 at 15:19

score 1 · Answer 3 · answered May 31 '13 at 07:38

1

guys, it seems I found a solution for local content. You should just call webView.reload() before loading new content - somehow it does the resizing without any blinking.

answered May 31 '13 at 07:38

Vladimir Ivanov

42,730
18
77
103

I had tried reload method also but I didn't find any luck in that also. ':( – Lalit Poptani May 31 '13 at 08:24
Crazy but this actually works for local content! Does fail some rare times but overall is looking like a pretty good solution so far – goat May 16 '16 at 06:27

score 1 · Answer 4 · answered Sep 29 '14 at 12:41

Here I have changed the height of webview depending of softkeyboard display

  activityRootView = (RelativeLayout) findViewById(R.id.webview1);
            mWebView = (WebViewEx) WebViewActivity.this.findViewById(R.id.webview);

            activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(new    OnGlobalLayoutListener() {
                public void onGlobalLayout() {
                    Rect r = new Rect();
                    //r will be populated with the coordinates of your view that area  still visible.
                    activityRootView.getWindowVisibleDisplayFrame(r);

                    int heightDiff = activityRootView.getRootView().getHeight() - (r.bottom - r.top);
                    if(heightDiff != lastValue) {
                        if (heightDiff > 100) { // if more than 100 pixels, its probably a keyboard...
                            Log.i("Screen Size Changed","KeyBoard Displaying"+ r.bottom);

                            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
                             params.height=r.bottom;
                             mWebView.setLayoutParams(params);
                            //appView.sendJavascript("onKeyBoardShow(" + r.bottom + ");");
                        } else {
                           /// appView.sendJavascript("onKeyBoardHide();");
                            Log.i("Screen Size Changed","KeyBoard not displaying" +r.bottom);
                            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
                             params.height=r.bottom;
                             mWebView.setLayoutParams(params);
                        }
                        lastValue = heightDiff;
                    }
                 }
            });

I don't have any problem when softkeyboard at all, so this doesn't make any link to my question — Lalit Poptani, Sep 29 '14 at 12:52

score 0 · Answer 5 · answered Mar 22 '13 at 08:28

0

i have not tried but why dont you give a try by setting weblayout params again, before u load the new contents. ie set height and width to wrapcontent. if success found please reply. if wont find success better go for javascipt

answered Mar 22 '13 at 08:28

Sush

3,864
2
17
35

score 0 · Answer 6 · answered Sep 10 '13 at 18:43

I set the visibility of my WebView to Gone, and load the content into the WebView while it's gone. Then I set the visibility to visible after letting the DOM and JS load and it seems to draw the length correctly. Since there isn't a callback like onPageFinished for determining when the JS has finished executing, I give the WebView a one second delay before I set the visibility to true. This workaround suffices for my purposes, so hopefully it addresses the needs of some of you guys!

score 0 · Answer 7 · answered Mar 10 '14 at 07:37

0

Everytime creating an object of webview and give its param is a pain instead you can do following steps and it will work

put a blank html file in assets folder and give it a name empty.html
call webview.loadUrl("file:///android_asset/empty.html");
now load your content.

Webview will shrink its height.

Make sure you are not putting any content in empty.html

answered Mar 10 '14 at 07:37

Ankit

1,916
2
20
33

Nop, it doesn't work for me. I guess all these tricks work sometimes in certain devices with different firmwares, but they are not a 100% sure thing for all devices. – Kaizie Jan 18 '17 at 08:33

score 0 · Answer 8 · edited May 23 '17 at 12:02

0

This do the magic! It says

Android property: android:layout_weight = "1 in the layout should work...

In my case, WebView is in the RelativeLayout. So doing thi android:layout_height="wrap_content" worked like a charm :)

edited May 23 '17 at 12:02

Community

1
1

answered Jul 25 '14 at 07:41

theWook

843
9
22

1

Works for me, as well. Seems to be the easiest solution. My WebView is child to a LinearLayout and its layout_height is set to "0dp". – Bunkerbewohner May 08 '15 at 21:30
Please provide your layout. My WebView always get 0 height. – vyndor Mar 28 '16 at 13:37
@AlpAltunel Please read more "In my case, WebView is in the RelativeLayout. So doing thi android:layout_height="wrap_content" worked like a charm :)" – theWook Oct 05 '18 at 01:52

score 0 · Answer 9 · answered May 25 '15 at 15:02

0

As @Ankit pointed out, go to an empty page could help. "about:blank" is better, though.

answered May 25 '15 at 15:02

fiorentinoing

948
12
20

How to Shrink WebView size dynamically according to its content?

9 Answers9

Linked