투명 오버레이를 이미지에 텍스트와 함께 추가하려면 어떻게합니까?

Question

새로운 Google I/O 앱은 투명 오버레이 이미지와 각 이미지의 일부 텍스트를 사용합니다. 비슷한 것을 만들려고하지만 이해할 수 없습니까? 어떻게 했습니까? github에 소스 코드를 게시하지 않았습니다. 아직.

이미지 :

Answer 1

것은 이런 일을보십시오. 드로어 블에 대해 알파 (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>