Webview inside Nestedscrollview/Scrollview missing contents

Question

I have a webview which is placed insde a nestedscrollview. Problem i am facing is webview is not loading the full page. Instead it loads a part of the page and after that it keeps the bottom space blank (white).

I have tried with scrollview as well.

Output I am getting:

My Code for webview:

private ImageButton backButton;
    private WebView webView;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_article);

        backButton = findViewById(R.id.backButton);
        webView=(WebView)findViewById(R.id.webView);
        webView.setWebViewClient(new MyBrowser());
//        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
//            descriptionView.setText(Html.fromHtml(data, Html.FROM_HTML_MODE_COMPACT));
//        } else {
//            descriptionView.setText(Html.fromHtml(data));
//        }
        webView.getSettings().setJavaScriptEnabled(true);

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

        backButton.setOnClickListener(this);
    }

    private class MyBrowser extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }

Layout File:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Activities.ArticleActivity">


    <RelativeLayout
        android:id="@+id/topBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary">

        <ImageButton
            android:id="@+id/backButton"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:background="@null"
            card_view:srcCompat="@drawable/outline_arrow_back_ios_24" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:layout_centerInParent="true"
            android:layout_margin="20dp"
            android:scaleType="centerInside"
            android:src="@drawable/x01" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/topBar">

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.v7.widget.CardView
                android:id="@+id/card_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                card_view:cardCornerRadius="2dp">


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/iconView"
                        android:layout_width="match_parent"
                        android:layout_height="120dp"
                        android:layout_centerVertical="true"
                        android:scaleType="centerCrop"
                        android:src="@drawable/article" />

                    <com.virtual_antivirus.virtualantivirus.Utlis.BanglaTextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="10dp"
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="10dp"
                        android:layout_marginTop="10dp"
                        android:text="ভার্চুয়াল ভাইরাসের সর্বনাশা শিকার"
                        android:textColor="@android:color/black"
                        android:textSize="18sp"
                        android:textStyle="bold" />

                    <LinearLayout
                        android:layout_width="100dp"
                        android:layout_height="5dp"
                        android:layout_marginLeft="10dp"
                        android:background="@color/colorAccent"></LinearLayout>

                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:minHeight="300dp">

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


                </LinearLayout>


            </android.support.v7.widget.CardView>
        </ScrollView>

    </LinearLayout>


    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_below="@+id/topBar"
        android:background="@drawable/shadow" />

</RelativeLayout>

Adjustment

Have you found the solution? – Judoka

Answer 1

You can place your NestedScrollView inside Coordinator layout and have to disable scrolling behavior and also place layout behavior if you are using app bar.

<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:nestedScrollingEnabled="false"
app:layout_behavior="appbar_scrolling_view_behavior">
.....   

Pali

Answer 2

This is how I'v done that and it works properly with the latest APIs too and it's actually the best approach for future scrolling (hiding Toolbar or ..) behavior or etc.

All you need to do is to place your content inside NestedScrollView and add:

android:nestedScrollingEnabled="true"

To the WebView :

In your onCreate() method:

WebView webView = findViewById(R.id.webView);
webView.loadUrl("file:///android_asset/htmlPages/test.html");

Layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginStart="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                app:cardUseCompatPadding="true">

                <WebView
                    android:id="@+id/webView"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:nestedScrollingEnabled="true" />

            </androidx.cardview.widget.CardView>
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Output:

I even used AndroidX dependencies which you can replace it with your own Support Library tags-dependencies.

Tatiania

Answer 3

use

android:fillViewport="true"

inside scrollview attribute

Nummulite

strange it brought some more contents. but still full page is not getting displayed yet. – Adjustment

Answer 4

You can use the NestedScrollView and put this line in your Webview

 android:nestedScrollingEnabled="false"

And check onec your xml class

Eriha

Answer 5

update your XML file like this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout
    android:id="@+id/topBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary">

    <ImageButton
        android:id="@+id/backButton"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:background="@null" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_centerInParent="true"
        android:layout_margin="20dp"
        android:scaleType="centerInside" />
</RelativeLayout>

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/topBar">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        card_view:cardCornerRadius="2dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iconView"
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:layout_gravity="center_horizontal"
                android:scaleType="centerCrop" />

            <com.virtual_antivirus.virtualantivirus.Utlis.BanglaTextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="10dp"
                android:text="ভার্চুয়াল ভাইরাসের সর্বনাশা শিকার"
                android:textColor="@android:color/black"
                android:textSize="18sp"
                android:textStyle="bold" />

            <WebView
                android:id="@+id/webView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:minHeight="300dp" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</ScrollView>

<View
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:layout_below="@+id/topBar" />

</RelativeLayout>

try this if it does not solve your issue then check this post

Owe

Answer 6

It is because of your HTML I guess. I have tried with other HTML pages. It's working fine.

Try with following html file

 <html >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body style="word-wrap: break-word;" >
AasdfasfasfsaffafafafafaaafafafffAasdfasfa<br/>sfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafff
AasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaf<br/>fafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafff
AasdfasfasfsaffafafafafaaafafafffAasdfasfasfsa<br/>ffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafff
AasdfasfasfsaffafafafafaaafafafffAasdfasfasf<br/>saffafafafafaaafafafffAasdv<br/>fasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafff
Aasdfasfasfsaffafafafafaaaf<br/>afafffAasdfasfasfsaffafafafafaaafafafffAasdfasf<br/>asfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafff
Aasdfasfasfsaffafafafafaaafafa<br/>fffAasdfasfasfsaffafafafafa<br/>aafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafffAasdfasfasfsaffafafafafaaafafafff
</body>
</html>

Judijudicable

Answer 7

In my case putting web view inside ScrollView and set android:nestedScrollingEnabled="true" did the trick:

<ScrollView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:nestedScrollingEnabled="true">
 <WebView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"/>
 </ScrollView>

Convertible