CardView 在两侧被切开

Question

我正在尝试使用 CardView 为个人资料图片制作一个圆圈，但由于某种原因，左右两侧似乎被切掉了。

我的xml是：

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

我试着玩 margin/padding 但没有成功。

谢谢

Answer 1

在父布局中添加android:clipToPadding：

 <RelativeLayout
    android:clipToPadding="false"

同时考虑使用 ShapeableImageView 而不是 CardView + ImageView

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

与：

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

CardView 在两侧被切开

CardView is cut at the sides

xml

android

android-cardview