'ImageView exceeds parent android studio xml

How do I make a child ImageView clip to the bounds of its parent? When I add an ImageView as a child to a parent view with rounded corners, the child ImageView does not conform to the rounded corners.

I have tried:
android:cropToPadding
android:clipChildren
android:clipToPadding
android:adjustViewBounds

I have set these to true and false on the image view and the parent view, and all possible combinations.

I have a custom view: custom_view.xml for rounded corners

<shape android:shape="rectangle">
  <corners android:backgroundTint="@color/backgroundColor" android:radius="10dp" />
  <solid android:color="@color/backgroundBlue" />
</shape>

enter image description here

I have a fragment, fragment_card.xml that implements the custom view.

<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:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="105dp"
    android:layout_margin="10dp"
    android:background="@drawable/custom_view"   <-- setting the custom_view
    app:cardBackgroundColor="@color/colorAccent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/cardIconView"
        android:layout_width="105dp"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/line_separator"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
and it continues...

The child ImageView does not clip to the bounds of the parent view with the custom background. Notice the left corners are not rounded

enter image description here

CardListAdapter: 

override fun onBindViewHolder(holder: CardViewHolder, position: Int) { 
  holder.cardIconView.setImageDrawable(theimage)
}
androidxmlandroid-layoutimageviewandroid-imageview


Solution 1:[1]

So there is a little bit of misunderstanding happening here in your question. The first thing I want to address is your assumption:

"When I add an ImageView as a child to a parent view with rounded corners, the child ImageView does not conform to the rounded corners."

Your child view is in fact respecting the bounds of the parent view. The rounded corners are not the bounds of the parent View, but the clipping of the drawable that is inside the View. What you refer to as your custom view, the custom_view.xml file, is in fact a custom drawable that is applied as the background to the parent. It has no impact on the bounds of the ConstraintLayout.

If you would like your image to also have rounded corners, I would encourage you to find a tutorial on clipping the source of an ImageView. Googling for this finds several easy tutorials, including one from Romain Guy, as well as several on Medium that will do the trick for you.

To recap: your child view is in fact respecting the bounds of the parent, the background you are applying to the view is not in fact the bounds of the parent, only a drawable to act as a background within the bounds of the parent view. Thus, you will need to perform some type of masking or clipping on the image or build a custom ImageView class that auto clips its content.

Solution 2:[2]

You can try android:clipToOutline="true" on parent view or programatically cardView.setClipToOutline(true);

Solution 3:[3]

You can create another left_corner.xml and apply it to child ImageView, try this:

    <shape android:shape="rectangle">
      <corners android:backgroundTint="@color/backgroundColor" android:bottomLeftRadius="10dp" android:topLeftRadius="10dp" android:bottomRightRadius="0dp" android:topRightRadius="0dp" />
      <solid android:color="@color/backgroundBlue" />
    </shape>

Hope it helps.

Solution 4:[4]

The ImageView is actually meeting the constraints you set. That is because the bounds of the parent don't change. Here's a solution: include a margin to the ImageView combined with match_parent width a height, in order to make it fit the rounded parent leaving a little border in the sides. Play with the margin dimension (in dp) until you get what you are looking for.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Elli White
Solution 2 betu
Solution 3 Andrea Ebano
Solution 4 SnakeException

Related Questions