如何在图像上添加带文本的透明叠加层？

Question

新的Google I / O应用程序正在使用带有透明叠加层的图像，每个图像上都有一些文字。我正在尝试创建类似但无法理解的内容他们是如何做到的？他们没有发布源代码github还没有。

图片：

Answer 1

尝试这样的事情。您可以通过为drawable设置alpha（0到1）并使用相对布局来实现它：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/darker_gray" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:alpha="0.5"
    android:src="@drawable/card_back"
    android:tint="#00A7C0DC" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView1"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="30dp"
    android:layout_marginTop="27dp"
    android:text="Back Face"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="@color/white"
    android:textSize="25sp"
    android:textStyle="bold" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_marginBottom="15dp"
    android:layout_marginLeft="18dp"
    android:src="@drawable/card_back" />

</RelativeLayout>

这是一张快照。它没有你的那么好，但看起来还不错。

注意第二张图片仅用于比较。

Answer 2

我会为每个项目使用此层次结构：

<FrameLayout> (with the image as background)
    <FrameLayout> (with half transparent color as background)
        <ImageButton/> (with layout_gravity="bottom|right")
        <LinearLayout> (with orientation="vertical")
            <TextView/> (title)
            <TextView/> (body)
        </LinearLayout>
    </FrameLayout>
</FrameLayout>