CardView padding and rounded corners

10,387

If that's an horizontal RecyclerView, add an ItemDecorator to it to have some spacing between objects.

SpaceItemDecorator itemDecorator = new SpacesItemDecorator(16)
mList.addItemDecoration(itemDecorator);

With an SpaceItemDecorator similar to this:

public class SpacesItemDecorator extends RecyclerView.ItemDecoration {

    private final int space;

    public SpacesItemDecorator(int spaceInPx) {
        this.space = spaceInPx;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, 
            RecyclerView.State state) {
        outRect.left = space;
        outRect.right = space;
    }
}
Share:
10,387
user3746428
Author by

user3746428

Updated on July 04, 2022

Comments

  • user3746428
    user3746428 almost 2 years

    I am trying to add rounded corners and padding to my card views, corner radius don't seem to work when I have content padding.

    This is my current XML:

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/cardView"
        android:layout_width="71dp"
        android:layout_height="39dp"
        card_view:cardElevation="0dp"
        card_view:cardUseCompatPadding="false"
        card_view:cardPreventCornerOverlap="false"
        card_view:cardCornerRadius="7dp"
        card_view:contentPaddingLeft="4dp"
        card_view:contentPaddingRight="4dp">
    
        <TextView
            android:id="@+id/title"
            android:layout_width="71dp"
            android:layout_height="39dp"
            android:textColor="#ffffff"
            android:background="#FF9400"
            android:gravity="center" />
    </android.support.v7.widget.CardView>
    

    If I remove the content padding, then the corner radius works, but I need both.

    Anyone have any ideas? I know I can set cardUseCompatPadding to true, but then the entire card has padding which messes with the text view.

    EDIT:

    Here is the design I currently have, and what I'm replicating:

    enter image description here