Android为图像添加半透明叠加层

Question

我是android的begginer。我正在开发一个应用程序，我想要这个效果：

我认为这是一张背景图片，一个重叠的白色垃圾颜色和一个textView。

我的布局是：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent" >

<ImageView
    android:id="@+id/backgroundImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:contentDescription="Description" />

<ImageView
    android:id="@+id/overlay"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="#AAFF0000"
    android:contentDescription="Description" />

<TextView
    android:id="@+id/textoOpcion"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:text="TextView" />

</RelativeLayout>

但这不起作用。

有什么想法吗？

感谢。

Answer 1

尝试这样我希望它能为你工作..

此图片通过将textview背景颜色设为#44ff0000

而存在

你可以通过改变颜色代码00到ff

的前两个值来改变颜色的不透明度

＃44ff0000这里44是coloor ff0000的不透明度

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent" >

<ImageView
    android:id="@+id/backgroundImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:contentDescription="Description"
    android:src="@drawable/ic_launcher" />

<TextView
    android:id="@+id/textoOpcion"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/backgroundImage"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_alignRight="@+id/backgroundImage"
    android:background="#44000000"
    android:gravity="bottom"
    android:text="TextView"
    android:textColor="#ffffff" />

</RelativeLayout>

Answer 2

尝试以下方法。我发现FrameLayout更适合合成类型的内容，只需在TextView本身设置背景 - 不需要单独的ImageView。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent" >

<TextView
    android:id="@+id/textoOpcion"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="@color/whatever_you_like"
    android:text="TextView" />

<ImageView
    android:id="@+id/overlay"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:contentDescription="Description"
    android:src="@drawable/drawablewithYourSemiTransparentColor" />

</FrameLayout>

Answer 3

我的解决方案：

我添加了view来查看叠加颜色，并将textView

居中

在@ M-S-Gadag的解决方案中，我无法集中文本：

但我想要这个：

执行第二张图片的代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
    android:id="@+id/backgroundImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:contentDescription="Description"/>

<View
    android:id="@+id/overlay"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/backgroundImage"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_alignRight="@+id/backgroundImage"
    android:background="#99FF0000" />

<TextView
    android:id="@+id/textoOpcion"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:textSize="21sp"
    android:textColor="#ffffff" />

</RelativeLayout>

修改

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/backgroundImage"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:contentDescription="Description" />

    <View
        android:id="@+id/overlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/backgroundImage"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignRight="@+id/backgroundImage"
        android:background="#99FF0000" />

    <TextView
        android:id="@+id/textoOpcion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/backgroundImage"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignRight="@+id/backgroundImage"
        android:gravity="center"
        android:text="map"
        android:textColor="#ffffff"
        android:textSize="21sp" />

</RelativeLayout>

我确信代码可以更好，但这项工作。