如何在 Android 中创建圆形 CardView？

Question

我正在尝试创建一个圆形的 CardView。 但我不知道该怎么做。 是否有任何属性可以让我获得 Circular CardView？。

XML 代码如下：

 <android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view_outer"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_gravity="center"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardCornerRadius="0dp"
    card_view:cardElevation="3dp" >

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

Answer 1

只需使用shapeAppearanceOverlay属性：

<com.google.android.material.card.MaterialCardView
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:cardBackgroundColor="@color/colorPrimaryLight"
    app:shapeAppearanceOverlay="@style/circle"
    />

和：

<style name="circle">
    <item name="cornerSize">50%</item>
</style>

Answer 2

<androidx.cardview.widget.CardView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_margin="10dp"
        app:cardCornerRadius="100dp"/>

可能将 app:cardCornerRadius 更改为宽度和高度的一半。

或者可能是自定义 CardView

public class CircularCardView extends CardView {
    public CircularCardView(@NonNull Context context) {
        super(context);
    }

    public CircularCardView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public CircularCardView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);



    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int width = getMeasuredWidth();
        setMeasuredDimension(width, width);
        setRadius(width/2);
    }
}

XML

<com.yourpackage.name.CircularCardView
        android:layout_width="50dp"
        android:layout_height="100dp"
        android:layout_margin="10dp"
        app:cardElevation="10dp"
        />

Answer 3

如果您迁移到 androidx 会更好，但您可以使用此代码向卡片视图添加形状

 <app:android.support.v7.widget.CardView
        android:layout_width="150dp"
        android:layout_height="148dp"
        android:elevation="12dp"
        app:cardCornerRadius="75dp"
        android:layout_centerHorizontal="true"
        android:innerRadius="40dp"
        android:shape="ring"
        android:thicknessRatio="4">
             
    </app:android.support.v7.widget.CardView>

Answer 4

我想要一个圆形图像所以做了这样的事情

<androidx.cardview.widget.CardView
        android:id="@+id/roundCardView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:elevation="0dp"
        app:cardCornerRadius="10dp"
        app:layout_constraintTop_toTopOf="@id/userName"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="20dp">
        
    <ImageView
        android:id="@+id/profilePic"
        android:layout_width="100dp"
        android:layout_height="100dp" />
    </androidx.cardview.widget.CardView>

Answer 5

这对我适用于所有 Android 版本

 <androidx.cardview.widget.CardView
                android:layout_width="90dp"
                android:layout_height="90dp"
                app:cardCornerRadius="45dp"
                android:shape="ring"
                app:cardElevation="5dp">