带有多种背景颜色的Cardview

Question

我目前正在忙于查看详细信息页面。我现在想知道如何让Cardview看起来像我设计的那种。我似乎无法找到谷歌如何这样做。我想要这张卡是多色的：顶部的25％应该是白色的，其余的75顶部应该是红色的。我该怎么做？我正在考虑绘制drawable，但我认为它会在不同的手机上看起来很丑。

我希望它看起来像这样：

我有这个cardview：

<android.support.v7.widget.CardView 
    android:id="@+id/view4" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginLeft="16dp" 
    android:layout_marginRight="16dp" 
    android:layout_marginTop="24dp"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@color/material_grey_50" 
     android:orientation="vertical"> 

     <TextView 
      style="@style/TextViewAppearance.Body3" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="16dp" 
      android:layout_marginTop="16dp" 
      android:text="Descriptie" 
      android:textColor="?attr/colorPrimaryDark" /> 

     <View 
      android:layout_width="match_parent" 
      android:layout_height="1dp" 
      android:layout_marginLeft="8dp" 
      android:layout_marginRight="8dp" 
      android:layout_marginTop="8dp" 
      android:background="@color/material_grey_200" /> 

     <TextView 
      android:id="@+id/descriptionText" 
      style="@style/TextViewAppearance.Body2" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginBottom="16dp" 
      android:layout_marginLeft="16dp" 
      android:layout_marginRight="16dp" 
      android:layout_marginTop="16dp" 
      android:textColor="@color/material_grey_600" /> 

    </LinearLayout> 

</android.support.v7.widget.CardView> 

Answer 1

您可以通过添加一个线性布局做到这一点，设置宽度，以填补父母设置它的背景颜色。

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="match_parent" 
    android:background="@color/black" 
    android:layout_marginTop="5dp"> 

    <TextView 
     android:id="@+id/descriptionText" 
     style="@style/TextViewAppearance.Body2" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="16dp" 
     android:layout_marginLeft="16dp" 
     android:layout_marginRight="16dp" 
     android:layout_marginTop="16dp" 
     android:textColor="@color/material_grey_600" /> 
</LinearLayout> 

Answer 2

尝试使用重量和weightSum这样的：

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

    <TextView 
     style="@style/TextViewAppearance.Body3" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginLeft="16dp" 
     android:layout_marginTop="16dp" 
     android:text="Descriptie" 
     android:textColor="?attr/colorPrimaryDark" 
     android:background="@color/material_grey_50" 
     android:layout_weight="1" /> 

    <TextView 
     android:id="@+id/descriptionText" 
     style="@style/TextViewAppearance.Body2" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="16dp" 
     android:layout_marginLeft="16dp" 
     android:layout_marginRight="16dp" 
     android:layout_marginTop="16dp" 
     android:textColor="@color/material_grey_600" 
     android:layout_weight="3"/> 
    </LinearLayout>