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.

Have you tried to debug/find errors with [Remote WebView Debugging](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews) or check if your site is using features that [Chrome Custom Tab](https://developer.chrome.com/docs/multidevice/android/customtabs/) may be able to solve? — Morrison Chang, Dec 10 '20 at 01:31
I didn't really find anything helpful with `WebView Debugging` but thank you for pointing that out, it might be useful in the future. Also the `Chrome Custom Tab` is to open apps in an external browser as far as I understood but I want to open it inside my `WebView`. One more thing I can add is that the page is being hosted in `Microsoft Sharepoint`. — Richard, Dec 10 '20 at 09:00
How it looks like when you open the link on a mobile view on browser? can show here :) — Ric17101, Dec 15 '20 at 08:49
It could be that e.g. sharepoint is not rendering those top bars because of the default User-Agent used by the WebView. I'd first enable remote debugging for the webview with `WebView.setWebContentsDebuggingEnabled(true)` and then connect a desktop Chrome to it to see what the HTML looks like. If the top bars are not there, then try to change the User-Agent to something that resembles a default browser with `webview.getSettings().setUserAgentString(...)`. — mtkopone, Dec 15 '20 at 12:27

score 1 · Answer 1 · answered Dec 15 '20 at 16:23

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?

score 0 · Answer 2 · answered Dec 15 '20 at 16:28

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>

Android WebView not showing header bars or floating buttons

2 Answers2