Comment couvrir l'ensemble de l'écran par transparence (alpha 80%), sauf pour certains éléments?

Question

J'ai un bouton en cliquant sur lequel tout l'écran devrait devenir plus sombre, sauf pour ce bouton. J'ai essayé de changer de couleur, de thème, mais ça ne me donne pas ce que je veux exactement. Maintenant, j'ai une idée pour couvrir l'ensemble de l'écran par une vue semi-transparente et cela fonctionne, mais couvre seulement la zone sous ToolBar. Le problème est que je ne peux pas comprendre comment le réparer. Je ne peux pas couvrir ToolBar et ne peut pas comprendre comment laisser mon bouton visible. Il devrait ressembler à ceci:

Je suis sûr qu'il ya un moyen simple de le faire, si quelqu'un a travaillé avec elle, s'il vous plaît expliquer.

J'essaye de faire comme ceci: dans activity_main.xml j'ai ajouté Voir et par le clic de bouton que je le rende visible. Mais il couvre à nouveau uniquement la zone sous l'en-tête Tab.

<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> 

Code de mise en page complète:

<?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

C'est la première chose que je pensais, il pourrait y avoir des moyens plus simples, mais cela fonctionnera:

<?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> 

Ensuite, dans votre classe java vous pouvez effectuer les opérations suivantes:

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); 

     } 
    } 
}}); 

Dans cette réponse, j'utilise 2 ImageView s, avec 80% de transparence, un pour la barre d'outils et un pour le contenu, puis j'ai défini la visibilité de ce ImageView s. Cela peut être changé en conséquence.

J'espère que cela aide, faites le moi savoir.

Answer 2

Pour la vue qui couvre tout l'écran, vous pouvez définir un arrière-plan transparent. Pour toutes les vues qui sont au-dessus Vous pouvez définir un arrière-plan transparent si vous souhaitez qu'ils soient transparents.