[英]How to cover the whole screen by transparent view (alpha 80%), except for some elements?
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 . 现在,我有了一个通过半透明视图覆盖整个屏幕的想法,并且可以工作,但是仅覆盖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. 我正在尝试这样做:在activity_main.xml中,我添加了View ,然后单击按钮使其可见。 But it again covers only area under Tab header. 但是它再次仅覆盖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>
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>
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: 然后,在您的java类中,您可以执行以下操作:
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 ImageView
s, with 80% transparency, one for the toolBar and one for the content, then I set the visibility of this ImageView
s. 在此答案中,我使用2个ImageView
,透明度为80%,一个用于ToolBar,一个用于内容,然后设置此ImageView
的可见性。 This can be changed accordingly. 可以相应地更改。
Hope this helps, let me know. 希望这会有所帮助,让我知道。
For the view that covers whole screen you may set a transparent background. 对于覆盖整个屏幕的视图,您可以设置透明背景。 For Whatever views are above that You may set transparent background if you want them to be transparent. 对于上方的任何视图,如果希望它们是透明的,则可以设置透明背景。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.