How to cover the whole screen by transparent view (alpha 80%), except for some elements?

Question

I have a button by click on which all screen should became darker, except for this button. I tried to change color, theme,but it doesn't give me what I exactly want. Now I have an idea to cover the whole screen by half-transparent view and it works, but covers only area under ToolBar. The problem is that I can't figure out how fix it. I can't cover ToolBar and can't figure our how to leave my button visible. It should be like this:

I'm sure there's a simple way to do it, if somebody worked with it, please explain.

I'm trying to do it like this: in activity_main.xml I added View and by button click I make it visible. But it again covers only area under Tab header.

  <View
    android:id="@+id/transparent_view"
    android:visibility="gone"
    android:alpha="20"
    android:background="@color/darkGrey"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
  </View>

Full layout code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".activity.MainActivity">

  <View
    android:id="@+id/transparent_view"
    android:visibility="gone"
    android:alpha="20"
    android:background="@color/darkGrey"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
  </View>

  <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_main"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_alignParentTop="true"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:title="Your Wi-Fi is online">

    <Button
      android:id="@+id/btn_pause"
      android:layout_width="90dp"
      android:layout_height="36dp"
      android:layout_margin="17dp"
      android:layout_gravity="end"
      android:background="@color/white"
      android:text="@string/pause"
      android:textColor="@color/midPurple"
      android:textSize="14sp" />
  </android.support.v7.widget.Toolbar>

  <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    style="@style/AppTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar_main"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/tabs" />

</RelativeLayout>

Answer 1

This is the first thing I thought of, there could be easier ways , but this will work:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".activity.MainActivity">


  <ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#80000000"
    android:visibility="gone"
    android:id="@+id/darkOverLay_Content"/>

  <View
    android:id="@+id/transparent_view"
    android:visibility="gone"
    android:alpha="20"
    android:background="@color/darkGrey"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
  </View>

  <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_main"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:layout_alignParentTop="true"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:title="Your Wi-Fi is online">

    <Button
      android:id="@+id/btn_pause"
      android:layout_width="90dp"
      android:layout_height="36dp"
      android:layout_margin="17dp"
      android:layout_gravity="end"
      android:background="@color/white"
      android:text="@string/pause"
      android:textColor="@color/midPurple"
      android:textSize="14sp" />


    <ImageView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="#80000000"
      android:visibility="gone"
      android:id="@+id/darkOverLay_ToolBar"/>

  </android.support.v7.widget.Toolbar>

  <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    style="@style/AppTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar_main"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/tabs" />

</RelativeLayout>

Then in your java class you can do the following:

ImageView darkOverLay_Content = (ImageView) findViewById(R.id.darkOverLay_Content);
ImageView darkOverLay_ToolBar = (ImageView) findViewById(R.id. darkOverLay_ToolBar);
Button clickButton = (Button) findViewById(R.id. btn_pause);
clickButton.setOnClickListener( new OnClickListener() {

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        ***Do what you want with the click here***
        if(darkOverLay_Content.getVisibility()==View.VISIBLE) {

            darkOverLay_Content.setVisibility(View.GONE);
            darkOverLay_ToolBar.setVisibility(View.GONE);
        }else{

            darkOverLay_Content.setVisibility(View.VISIBLE);
            darkOverLay_ToolBar.setVisibility(View.VISIBLE);

        }
    }
}});

In this answer I'm using 2 ImageViews, with 80% transparency, one for the toolBar and one for the content, then I set the visibility of this ImageViews. This can be changed accordingly.

Hope this helps, let me know.