android clipChildren not working cornerRadius shape

Question

I have a problem to clipping a constraint layout view.

this is my xml layout code

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/deck_card_corner_radius"
  android:clipChildren="true"
>
  <ImageView
    android:id="@+id/imageView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:scaleType="centerCrop"
    app:srcCompat="@drawable/splashscreen" />

</android.support.constraint.ConstraintLayout>

deck_card_corner_radius

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <gradient android:angle="270" android:endColor="#316db2" android:startColor="#316db2" />
  <corners android:bottomLeftRadius="30dp" android:bottomRightRadius="30dp" android:topLeftRadius="30dp" android:topRightRadius="30dp"/>
</shape>

without image i got this

no image src

with image

not clipping corner

can someone help me?

Answer 1

How about using CardView?

I don't think setting rounded background actually 'shapes' the view radius. It's still a rectangle with sharp edges just rendering the rounded background in it. You can check this out by looking at the layout editor. If you click the view, you know it's actually not round even after setting the rounded background.

I've been using CardView for this and it works well.

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardPreventCornerOverlap="false"
    app:cardCornerRadius="4dp"
    app:cardUseCompatPadding="true">

           <!-- Content goes here i.e. ImageView, ConstraintLayout, etc... -->

</android.support.v7.widget.CardView>

The most important thing in here is app:cardPreventCornerOverlap=false. It clips the content so that it can fit into the container view smoothly without any unnecessary padding. The documentation is here.