CardView is cut at the sides

Viewed 240

I'm trying to make a circle for the profile image by using CardView and for some reason, the left and right sides seem to be cut.

My xml is:

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingEnd="8dp"
    android:paddingStart="8dp"
    android:layout_gravity="center"
    android:layoutDirection="ltr">

    <androidx.cardview.widget.CardView
        android:id="@+id/cardview"
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_gravity="center"
        android:layout_marginTop="24dp"
        app:cardCornerRadius="65dp">

        <ImageView
            android:id="@+id/iv_ProfilePic"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop" />
    </androidx.cardview.widget.CardView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fib_Camera"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/tv_Username"
        android:layout_alignEnd="@+id/cardview"
        android:backgroundTint="@color/colorLightPurple"
        android:src="@drawable/ic_camera"
        app:borderWidth="0dp"
        app:fabCustomSize="44dp"
        app:maxImageSize="30dp" />

    <TextView
        android:id="@+id/tv_Username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/cardview"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="8dp"
        android:fontFamily="@font/assistant_semibold"
        android:textColor="@color/colorGrayText"
        android:textSize="18sp" />

    <RelativeLayout
        android:id="@+id/rl_previewRank"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_Username"
        android:layout_centerHorizontal="true">

        <ImageView
            android:id="@+id/iv_previewStar"
            android:layout_width="18dp"
            android:layout_height="18dp"
            android:layout_centerVertical="true"
            android:layout_marginTop="8dp"
            android:src="@drawable/ic_preview_star" />

        <TextView
            android:id="@+id/tv_myRank"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginStart="8dp"
            android:layout_toEndOf="@+id/iv_previewStar"
            android:fontFamily="@font/assistant"
            android:text="0"
            android:textColor="@color/colorEmptyStar"
            android:textSize="12sp" />

    </RelativeLayout>

</RelativeLayout>

I tried to play with margin/padding but nothing did the job.

Thank you

1 Answers

Add android:clipToPadding in the parent layout:

 <RelativeLayout
    android:clipToPadding="false"

Also consider to use ShapeableImageView instead of CardView + ImageView

  <com.google.android.material.imageview.ShapeableImageView
      ...
      android:scaleType="xxx"
      app:shapeAppearanceOverlay="@style/circleImageView"
      app:srcCompat="@drawable/ic_profile" />

with:

  <style name="circleImageView" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

enter image description here

Related