Place webview behind status bar, tool bar and navigation bar

Question

I'd like to place the webview behind the status bar, tool bar and navigation bar as shown in the picture from whatsapp

This is the layout

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="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="com.eupdates.eupdates.Pictures2Activity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#000000"
            app:navigationIcon="?attr/homeAsUpIndicator"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.SwipeRefreshLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/swipe_container"
        android:background="@color/colorBlack"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <WebView  xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorBlack"
            android:layout_alignParentRight="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_alignParentBottom="true"
            />

    </android.support.v4.widget.SwipeRefreshLayout>

</android.support.design.widget.CoordinatorLayout>

Basicly I need to place the webview behind the bars

This is duplicate Question : Please refer this link : https://stackoverflow.com/questions/29311078/android-completely-transparent-status-bar — Sameer Jani, Apr 03 '18 at 13:26

webianks · Answer 1 · 2018-04-03T13:29:48.247

0

From api 19 you can use these in your theme of that activity:

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

and this line in the root of the layout

android:fitsSystemWindows="true"

edited Apr 03 '18 at 13:29

answered Apr 03 '18 at 13:24

webianks

125
3
10

score 0 · Answer 2 · answered Apr 03 '18 at 13:25

Try this

  <android.support.v4.widget.SwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swipe_container"
    android:background="@android:color/black"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <WebView  xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black"
        android:layout_alignParentRight="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"

        />

</android.support.v4.widget.SwipeRefreshLayout>

AskNilesh · Answer 3 · 2018-04-04T03:44:17.287

Try this

   <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/AppTheme.AppBarOverlay">

            <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="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=".MainActivity">

                <WebView xmlns:android="http://schemas.android.com/apk/res/android"
                    android:id="@+id/webview"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/black" />

                <android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?actionBarSize"
                    android:background="#5b5b5b5b"
                    android:minHeight="?attr/actionBarSize"
                    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />
            </FrameLayout>
        </android.support.design.widget.AppBarLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

ACTIVIY CODE

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MainActivity extends AppCompatActivity {

    WebView wb;

    Toolbar toolbar;

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

        toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        wb = findViewById(R.id.webview);

        wb.getSettings().setJavaScriptEnabled(true);
        wb.getSettings().setLoadWithOverviewMode(true);
        wb.getSettings().setUseWideViewPort(true);
        wb.getSettings().setBuiltInZoomControls(true);


        wb.setWebViewClient(new WebViewClient());
        wb.loadUrl("https://stackoverflow.com/users/7666442/nilesh-rathod?tab=profile");

    }


}

STYLE.XML

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->

    <item name="colorPrimaryDark">#5b5b5b5b</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="colorPrimary">@android:color/transparent</item>

</style>

OUTPUT

Place webview behind status bar, tool bar and navigation bar

3 Answers3