添加帶梯度背景的嵌套線性佈局中的文本疊加圖像

Question

我有一個嵌套的線性佈局，我想添加帶漸變背景的文本疊加圖像，但我不知道如何實現這一點。 這是我的佈局，嵌套的線性佈局文件：

<ScrollView 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical"> 

      <!-- row 1 --> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="3dp"> 


        <ImageView 
         android:id="@+id/imgMainCooking" 
         android:layout_width="0dp" 
         android:layout_height="130dp" 
         android:layout_marginRight="2dp" 
         android:layout_weight="1.5" 
         android:scaleType="centerCrop" 
         android:src="@drawable/cooking_r" /> 

       <ImageView 
        android:layout_width="0dp" 
        android:layout_height="130dp" 
        android:layout_marginLeft="2dp" 
        android:layout_marginRight="2dp" 
        android:layout_weight="2" 
        android:scaleType="centerCrop" 
        android:src="@drawable/celebrity_r" /> 

      </LinearLayout> 

      <!-- row 2 --> 
      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="2dp"> 


       <ImageView 
        android:layout_width="0dp" 
        android:layout_height="230dp" 
        android:layout_marginLeft="3dp" 
        android:layout_marginRight="2dp" 
        android:layout_weight="1.5" 
        android:background="#63ae4f" 
        android:scaleType="centerCrop" 
        android:src="@drawable/makeup_r" /> 

       <LinearLayout 
        android:layout_width="0dp" 
        android:layout_height="230dp" 
        android:layout_marginLeft="2dp" 
        android:layout_weight="1" 
        android:orientation="vertical"> 




        <ImageView 
         android:layout_width="match_parent" 
         android:layout_height="115dp" 
         android:layout_marginBottom="2dp" 
         android:layout_marginRight="2dp" 
         android:layout_weight="1" 
         android:scaleType="centerCrop" 
         android:src="@drawable/kids_r" /> 



        <ImageView 
         android:layout_width="match_parent" 
         android:layout_height="115dp" 
         android:layout_marginRight="2dp" 
         android:layout_marginTop="2dp" 
         android:layout_weight="1" 
         android:scaleType="centerCrop" 
         android:src="@drawable/fashion_r" /> 

       </LinearLayout> 

      </LinearLayout> 

      <!-- row 3 --> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="2dp" 
       android:orientation="horizontal"> 


       <ImageView 
        android:layout_width="0dp" 
        android:layout_height="130dp" 
        android:layout_marginLeft="2dp" 
        android:layout_marginRight="2dp" 
        android:layout_weight="1" 
        android:scaleType="centerCrop" 
        android:src="@drawable/lifestyle_r" /> 


       <ImageView 
        android:layout_width="0dp" 
        android:layout_height="130dp" 
        android:layout_marginLeft="1dp" 
        android:layout_marginRight="2dp" 
        android:layout_weight="1" 
        android:scaleType="centerCrop" 
        android:src="@drawable/nutr_r" /> 

      </LinearLayout> 

     </LinearLayout> 
    </ScrollView> 

這張照片是我wan't實現這一目標：

Answer 1

感謝@Vyacheslav。但我不使用framelayout，我們可以用這種方法解決這個問題。 我爲第一行編寫此代碼，但我們也可以將其用於其他行。

<ScrollView 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical"> 



      <!-- row 1 --> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="3dp"> 


       <!-- Cooking --> 
       <RelativeLayout 
        android:layout_width="0dp" 
        android:layout_height="130dp" 
        android:layout_marginRight="2dp" 
        android:layout_weight="1.5"> 
       <ImageView 
        android:layout_width="match_parent" 
        android:layout_height="130dp" 
        android:scaleType="centerCrop" 
        android:src="@drawable/cooking_r" /> 

        <TextView 
         android:layout_alignParentBottom="true" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:background="@drawable/gradient" 
         android:text="Salam cooking"/> 

       </RelativeLayout> 


       <RelativeLayout 
        android:layout_width="0dp" 
        android:layout_height="130dp" 
        android:layout_marginRight="2dp" 
        android:layout_marginLeft="2dp" 
        android:layout_weight="2"> 

        <!-- Celebrity --> 
        <ImageView 
         android:layout_width="match_parent" 
         android:layout_height="130dp" 
         android:scaleType="centerCrop" 
         android:src="@drawable/celebrity_r" /> 

        <TextView 
         android:layout_alignParentBottom="true" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:background="@drawable/gradient" 
         android:text="Salam celebrity"/> 

       </RelativeLayout> 


      </LinearLayout> 
</ScrollView> 

Answer 2

使用FrameLayout 例如：

嘗試

  <FrameLayout 
       android:clipChildren="false" 
       android:clipToPadding="false" 
       android:layout_width="0dp" 
        android:layout_height="130dp" 
    android:layout_marginRight="2dp" 
          android:layout_weight="1.5" 

           > 
     <TextView 
      android:text="Hello" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="bottom" /> 
        <ImageView 
         android:id="@+id/background" 
         android:layout_width="match_parent" 
         android:layout_height="match_parent" 
         android:scaleType="centerCrop" 
android:layout_gravity="bottom" 
         android:src="@null" /> 

       <ImageView 
         android:id="@+id/imgMainCooking" 

        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
         android:scaleType="centerCrop" 
         android:src="@drawable/cooking_r" /> 
</FrameLayout> 

而不是

<ImageView 
         android:id="@+id/imgMainCooking" 
         android:layout_width="0dp" 
         android:layout_height="130dp" 
         android:layout_marginRight="2dp" 
         android:layout_weight="1.5" 
         android:scaleType="centerCrop" 
         android:src="@drawable/cooking_r" />