Android WebView not showing header bars or floating buttons

Question

I have an Android WebView where I want to show a page, but certain elements of the page are not showing up.

Since its a work related page and you need an account to access it but its hosted in Microsoft Sharepoint.

On picture 1 (left) is my WebView that is not displaying the 2 header bars that can be seen on the picture 2 (right) and also in the middle there is a floating button that goes over the views, which is also not displayed in Android's WebView.
Picutre 2 is the page in a normal web browser but in the mobile view. I also tried opening the page normally via phone's browser and it also worked fine.

Here is a simple WebView that produces the same error:

public class MainActivity extends AppCompatActivity {

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

        WebView myWebView = (WebView) findViewById(R.id.webview);
        myWebView.setWebViewClient(new MyWebViewClient());

        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setUseWideViewPort(true);
        webSettings.setDomStorageEnabled(true);

        myWebView.loadUrl("https://secret.webpage.com");
    }

    private class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return false;
        }
    }
}

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

I have tried implementing custom Chromium Browser by implementing BaseChromeClient but that has also produced no results.

If there are questions about the webpage then I will provide answers as soon as I can.

Answer 1

To keep the webview orientation & screensize to prevent destroying webpage contents by orientation change, please add this line to your xml.

<WebView
   ...
   android:configChanges="orientation|screenSize"
/>

And the webpage headers could be placed behind the android navigation bar, so please try to hide the android navigation bar of the page.

And could you share your webpage html / css code as well?

Answer 2

I think you should have Frame Layout for floating action button. Try this out.

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

    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</FrameLayout>