ImageView exceeds parent android studio xml

user_3634990 0
Viewed 1085

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)
}
imageview android-layout android-imageview android xml
4 Answers

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.

user_21961380

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

user_126892420

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.

user_117141580

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.

user_82267410
Related