如何创建具有半透明背景颜色和圆角半径的 CardView？

Question

我正在尝试制作背景为#88FFFFFF 并带有圆角的 CardView。 它不能正常工作，在 Android Studio 中边角是双倍不透明的，而整个边框在我的设备上是双倍不透明的。

这是代码：

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:cardBackgroundColor="#88FFFFFF"
    app:cardElevation="2dp"
    app:cardCornerRadius="12dp">

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

结果如下：

有没有办法在不为背景创建可绘制对象的情况下解决这个问题？

Answer 1

只需在 Cardview 中使用线性布局即可。 使用“#88FFFFFF”设置线性布局背景。

<CardView>
    <LinearLayout background=""></LinearLayout>
</CardView>

Answer 2

试试这个

<android.support.v7.widget.CardView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:cardBackgroundColor="#88FFFFFF"
        app:cardCornerRadius="6dp"
        app:cardUseCompatPadding="true"
        app:cardElevation="5dp">

Answer 3

尝试删除高程，这在新的MaterialCardView组件中可用

app:cardElevation="0dp"
app:cardMaxElevation="0dp"

您还可以添加描边，例如

app:strokeColor="#f9d5e9"
app:strokeWidth="1.5dp"

Answer 4

我在 Xamarin.Android 中遇到了 CardView 的这个问题并找到了这个解决方案：

这是在 C#/Xamarin 中，但 Java/Kotlin 代码非常相似。

      // There is a bug with CardView
      // Where setting a semi-transparent colour + corner radius + elevation will display a border with the opaque (a=255) colour.
      // To resolve this I'm manually calculating the desired colour (with a=255/2) and using an 
      // Android.Graphics.Color without using the alpha channel
 
      float opacity = 0.5f;
      var color = GetDesiredColorOpaque();
      var viewBgColor = GetViewBgColor(); 
      var desiredColor = new Color(color.R, color.G, color.B, color.A / 2); // not used - but resulting flattenedCardColor will look equivalent without transparency
 
      // Formula based on https://filosophy.org/code/online-tool-to-lighten-color-without-alpha-channel/
      // NB this only works because we're not really needing transparency i.e. the resulting card is not transparent, it is just colored as if it was transparent and behind it was just empty viewBgColor 
      var flattenedCardColor = new Color(
        r: (byte) (opacity * color.R + (1 - opacity) * viewBgColor.R),
        g: (byte) (opacity * color.G + (1 - opacity) * viewBgColor.G),
        b: (byte) (opacity * color.B + (1 - opacity) * viewBgColor.B),
        a: (byte) 255);
      
      cardView.CardBackgroundColor = Android.Content.Res.ColorStateList.ValueOf(flattenedCardColor);

请注意，此解决方案通过使用不透明度方程计算所需的 CardView 背景颜色来工作，因此它实际上不会使 CardView 透明。 我这样做是因为我认为这个问题是由 CardView 和半透明颜色的一些错误引起的，因为没有提议的解决方案适用于我的用例（需要以编程方式设置 CardView 颜色的样式）。

您得到的结果是正确着色的 CardView 背景，就像在 alpha 通道中设置了不透明度一样，并且在使用 cardElevation 和/或 cardCornerRadius 时没有视觉错误。

感谢https://filosophy.org/code/online-tool-to-lighten-color-without-alpha-channel/的等式。