How Can I create a Circular CardView in Android?

user_13131354 0
Viewed 2027

i'm trying to create a circular CardView. But I don't know how to do it. Is there any attribute with which I can get a Circular CardView?.

The XML code is the following:

 <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>
android-cardview material-components-android android xml
5 Answers

Just use the shapeAppearanceOverlay attribute:

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

with:

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

enter image description here

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

May be changing app:cardCornerRadius to half of the width and height.

OR May be Custom 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"
        />
user_39951260

Its better if you migrate to androidx but you can use this code add shape to your card view

 <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>
user_73806880

I wanted to have a circular image So did something like this

<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>
user_88519710

This worked for me for all Android Versions

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