简体   繁体   中英

Android MaterialCardView cut corner style

I used a MaterialCardView

I've given it a Cut Corners style

But the views are far from the corners

IMAGE: Image spacing

It also I used the following code:

app:cardPreventCornerOverlay="true"

But it does not clip the corner

IMAGE: not croped image

Can anyone help me?

<com.google.android.material.card.MaterialCardView
   android:id="@+id/topLayout"
   android:layout_width="0dp"
   android:layout_height="0dp"
   android:clipChildren="true"
   app:cardBackgroundColor="@color/colorBackground"
   app:cardElevation="1.5dp"
   app:layout_constraintBottom_toTopOf="@+id/navigationBar"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toBottomOf="@+id/toolbar"
   app:shapeAppearanceOverlay="@style/CardView.Shape.Cut">

   <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_marginStart="-21dp"
      android:layout_marginTop="-21dp"
      android:layout_marginEnd="-21dp"
      android:layout_marginBottom="-21dp"
      app:layout_constraintBottom_toBottomOf="@+id/topLayout"
      app:layout_constraintEnd_toEndOf="@+id/topLayout"
      app:layout_constraintStart_toStartOf="@+id/topLayout"
      app:layout_constraintTop_toTopOf="@+id/topLayout">

      <androidx.appcompat.widget.AppCompatImageView
          android:layout_width="match_parent"
          android:layout_height="210dp"
          android:scaleType="centerCrop"
          android:src="@drawable/photo_profile" />

   </RelativeLayout>

IMAGE: from top code

if use of:

app:cardPreventCornerOverlay="true"

IMAGE: cardPreventCornerOverlay

You can use ShapeableImageView from the material components library and give it the same shapeAppearance as the card, so the corners match.

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/imageview/ShapeableImageView.java

It might only be avaialble as an alpha version though.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM