如何在卡片视图上设置彩色边框

Question

我正在实现卡片视图，但我找不到任何边框选项来设置边框。

这是我的 card.xml:

<android.support.v7.widget.CardView android:layout_marginTop="10dp"
  android:id="@+id/cardView"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  xmlns:android="http://schemas.android.com/apk/res/android"
  card_view:cardPreventCornerOverlap="false"
  app:cardPreventCornerOverlap="false"
  xmlns:card_view="http://schemas.android.com/tools"
  xmlns:app="http://schemas.android.com/apk/res-auto">

  <RelativeLayout
     android:background="@drawable/tab_bg"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:padding="16dp">

     <TextView
         android:id="@+id/title"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Title"
         android:textSize="20sp" />

  </RelativeLayout>

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

这是我想要在卡片视图上实现绿色边框的图片？

帮帮我。我怎样才能实现这个东西？我不知道。

谢谢。

Answer 1

创建可绘制对象selector.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#808080"/>
    <stroke android:width="3dp" android:color="#B1BCBE" />
    <corners android:radius="20dp"/>
    <padding android:left="0dp" android:top="0dp"
             android:right="0dp" android:bottom="0dp" />
</shape>

然后给定这个作为背景，根据你的选择改变颜色

Answer 2

这是您问题的解决方案：

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
   <solid android:color="#ffffff" />
   <stroke android:width="1dip" android:color="#00ff00"/>
   <corners android:radius="20dip"/>
</shape>

将其用作布局的背景可绘制对象

Answer 3

从 v28 设计支持库开始，我们可以使用 Material Card View，它为我们提供了开箱即用的 material 风格的卡片视图实现。

<android.support.design.card.MaterialCardView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp">
    ... child views ...
</android.support.design.card.MaterialCardView>

您可以使用卡片视图附带的两个属性进一步设置卡片视图的样式：

app:strokeColor - 给定笔画使用的颜色，必须设置才能显示笔画
app:strokeWidth - 应用于视图笔划的宽度

Answer 4

我通过使 cardBackgroundColor 绿色和 contentPadding 1dp 并在卡片内部具有带有白色的 ConstraintLayout（或其他布局）背景，像这样：

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:contentPadding="1dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:padding="8dp">

    ...

这样就不需要额外的 xml 或其他多余的代码。

结果：

Answer 5

虽然这个问题很老了，但它可能会帮助其他面临这个问题的人。只需在 build.gradle

中添加新的 MDC 库

implementation 'com.google.android.material:material:1.2.0-alpha05'

然后在您的布局中添加 MaterialCardView

<com.google.android.material.card.MaterialCardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/CardViewStyle"
    app:strokeColor="@color/your_color"
    app:strokeWidth="@dimen/_1sdp">

</com.google.android.material.card.MaterialCardView>

in style.xml

<style name="CardViewStyle" parent="Widget.MaterialComponents.CardView">
    <item name="cardBackgroundColor">@color/white</item>
    <item name="cardForegroundColor">@color/transparent</item>
    <item name="cardElevation">0dp</item>
    <item name="rippleColor">@color/colorRipple</item>
</style>

Answer 6

使用 material 组件库 只需将 MaterialCardView 与 app:strokeColor 和 app:strokeWidth 属性。

注意如果没有 app:strokeColor，无论 app:strokeWidth 值如何（默认值为 app:strokeColor=@null 和 app:strokeWidth=0dp).

类似于：

<com.google.android.material.card.MaterialCardView
    ...
    app:strokeWidth="1dp"
    app:strokeColor="@color/stroke_color"
    app:cardElevation="xxdp">

    ...

</com.google.android.material.card.MaterialCardView>

使用 Jetpack Compose 1.0.x 您可以在 中使用 border 属性Card 可组合：

Card( border= BorderStroke(1.dp, Red)){
    //.....
}

Answer 7

您可以通过以下方式轻松实现

RecyclerView 的 CardItem。

<androidx.cardview.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tool="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/space"
    android:elevation="@dimen/space"
    app:cardCornerRadius="@dimen/space">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/csl_language"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/card_language_neutral"
        android:padding="@dimen/space">
       
        ..............        

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

注意子约束布局中的@drawable/card_language_neutral作为背景

card_language_neutral.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke
        android:width="1dp"
        android:color="@color/black" />

    <corners android:radius="@dimen/space" />

    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />

</shape>

确保 android:radius 属性设置为等于 CardView 的 cardCornerRadius。您可以使用子约束布局的背景或您的情况下的相对布局来更改 cardView 上边框的颜色、宽度

注意：要以编程方式将背景可绘制对象更改为其他可绘制对象（或其他颜色的可绘制对象），请使用以下命令

_csl.setBackgroundResource(R.drawable.card_language_glow)

如何在卡片视图上设置彩色边框

how to set colored border on cardview

android

android-appcompat

material-design

android-cardview