Image view not clipped inside constraint layout with drawable shape background

Question

This is my drawable shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <corners android:topLeftRadius="20dp"
        android:topRightRadius="20dp"
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="60dp"/>
<solid android:color="@color/primary_blue"/>


</shape>

My layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="296dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:clipChildren="true"
    android:clipToPadding="false"
    android:background="@drawable/bg_shape_bottom_right_curved"
    app:cardPreventCornerOverlap="false"
    android:outlineProvider="background"
    android:layout_height="198dp">

   <ImageView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
      android:src="@drawable/phase_banner"
      android:scaleType="centerCrop"
      android:adjustViewBounds="true"/>
</LinearLayout>

The image keeps on being square and not getting the shape of drawable. Please help

When i add shape to the layout its showing the shape . But when i set image src its showing sqaure image , when setting background, it getting into right shape. But i need to load image from glide . so i need to make it work with src

Answer 1

Unfortunately, your background drawable does not qualify for clipping. From Clip Views:

Only rectangle, circle, and round rectangle outlines support clipping, as determined by the Outline.canClip() method.

Your background drawable does not qualify as a rounded rectangle but is implemented internally as a path (I believe). This is one reason clipping is failing for you.

Let's create a simple rounded rectangle drawable:

simple_rounded_rectangle.bg

<shape android:shape="rectangle" >  
    <corners android:radius="30dp"/>  
    <solid android:color="@color/primary_blue"/>  
</shape>

Also, let's modify the layout a little:

activity_main.xml

<LinearLayout 
      android:id="@+id/layout"  
      android:layout_width="400dp"  
      android:layout_height="198dp"  
      android:background="@drawable/simple_rounded_rectangle"  
      android:outlineProvider="background">  
  
  <ImageView  
      android:id="@+id/imageView"  
      android:layout_width="match_parent"  
      android:layout_height="match_parent"  
      android:adjustViewBounds="true"  
      android:scaleType="centerCrop"  
      android:src="@drawable/phase_banner" />  
</LinearLayout>

We will also need to add some code to direct the view system to clip the view to the outline:

MainActivity.kt

class MainActivity : AppCompatActivity() {  
    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        setContentView(R.layout.activity_main)  
        val layout = findViewById<LinearLayout>(R.id.layout)  
        layout.clipToOutline = true  
  }  
}

The main thing in this code is the line

layout.clipToOutline = true 

which indicates that clipping should occur. There should be an XML attribute that does the same thing android:clipToOutline but there isn't below API 31. See the android:clipToOutline bug report.

Putting it altogether we see the following. (The image is one I supplied.)

If you use your drawable for the background, it will not be clipped for the reason I mentioned above.

You will need to fall back to a different method of clipping if you need asymmetric corners on your drawable. You may want to look at applications of clipPath. You will find information on how to do this if you do some online searching. I also suggest the Medium post Clipping and shadows on Android for other alternatives.

Take a look at the Material Components Library. MaterialCardView and ShapeableImageView may be useful.