Setting the mask programmatically seems to not work

[nathan-fiscaletti]

When creating a drawable programmatically it doesn't seem to set the mask.

GradientDrawable drawable = new GradientDrawable();
drawable.setShape(GradientDrawable.RECTANGLE);
drawable.setCornerRadius(16);
drawable.setColor(Color.WHITE);
mask.setMask(drawable);

[nathan-fiscaletti]

D/MaskableFrameLayout: Are you sure you don't want to provide a mask ?
    Mode is DST_IN
    Are you sure you don't want to provide a mask ?
D/MaskableFrameLayout: Can't create a mask with height 0 or width 0. Or the layout has no children and is wrap content

[christophesmet]

Well is your mask's height 0 or the width 0 ? Is the layout empty or has it no size ?
I suggest you place a breakpoint and check its size.

[nathan-fiscaletti]

I updated it to use the following:

getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            getViewTreeObserver().removeOnGlobalLayoutListener(this);
        } else {
            getViewTreeObserver().removeGlobalOnLayoutListener(this);
        }

        GradientDrawable drawable = new GradientDrawable();
        drawable.setShape(GradientDrawable.RECTANGLE);
        drawable.setCornerRadius(16);
        drawable.setColor(Color.BLACK);
        drawable.setSize(getWidth(), getHeight());
        mask.setMask(drawable);
    }
});

Which gets rid of the layer height / width error, however it still doesn't work at all. And in fact, not only does it not mask the view but it seems to completely hide everything in it.

On top of that, even if i don't try to set it programmatically and instead only set it in XML, it still seems to have the same effect.

Here is the XML for the view itself. (I have the root element set with a black background for testing.

View XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:background="@android:color/black">
    <com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout
        android:id="@+id/frm_mask_animated"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:mask="@drawable/rounded_rect"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:porterduffxfermode="DST_IN" >
        <com.makeramen.roundedimageview.RoundedImageView
            android:id="@+id/mi1_image1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/user"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        <com.makeramen.roundedimageview.RoundedImageView
            android:id="@+id/mi2_image1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginRight="4dp"
            android:scaleType="centerCrop"
            android:src="@drawable/user"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/mi2_image2"
            app:layout_constraintTop_toTopOf="parent" />
        <com.makeramen.roundedimageview.RoundedImageView
            android:id="@+id/mi2_image2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginLeft="4dp"
            android:scaleType="centerCrop"
            android:src="@drawable/user"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toRightOf="@id/mi2_image1"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        <com.makeramen.roundedimageview.RoundedImageView
            android:id="@+id/mi3_image1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginRight="4dp"
            android:scaleType="centerCrop"
            android:src="@drawable/user"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/mi3_image3"
            app:layout_constraintTop_toTopOf="parent" />
        <com.makeramen.roundedimageview.RoundedImageView
            android:id="@+id/mi3_image3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginLeft="4dp"
            android:layout_marginBottom="4dp"
            android:scaleType="centerCrop"
            android:src="@drawable/user"
            app:layout_constraintBottom_toTopOf="@id/mi3_image2"
            app:layout_constraintLeft_toRightOf="@id/mi3_image1"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        <com.makeramen.roundedimageview.RoundedImageView
            android:id="@+id/mi3_image2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="4dp"
            android:scaleType="centerCrop"
            android:src="@drawable/user"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="@+id/mi3_image3"
            app:layout_constraintTop_toBottomOf="@id/mi3_image3" />
        <com.makeramen.roundedimageview.RoundedImageView
            android:id="@+id/mi4_image1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginRight="4dp"
            android:layout_marginBottom="4dp"
            android:scaleType="centerCrop"
            android:src="@drawable/user"
            app:layout_constraintBottom_toTopOf="@id/mi4_image4"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/mi4_image2"
            app:layout_constraintTop_toTopOf="parent" />
        <com.makeramen.roundedimageview.RoundedImageView
            android:id="@+id/mi4_image2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginLeft="4dp"
            android:layout_marginBottom="4dp"
            android:scaleType="centerCrop"
            android:src="@drawable/user"
            app:layout_constraintBottom_toTopOf="@id/mi4_image3"
            app:layout_constraintLeft_toRightOf="@id/mi4_image1"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        <com.makeramen.roundedimageview.RoundedImageView
            android:id="@+id/mi4_image3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginLeft="4dp"
            android:layout_marginTop="4dp"
            android:scaleType="centerCrop"
            android:src="@drawable/user"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toRightOf="@id/mi4_image4"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/mi4_image2" />
        <com.makeramen.roundedimageview.RoundedImageView
            android:id="@+id/mi4_image4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="4dp"
            android:layout_marginRight="4dp"
            android:scaleType="centerCrop"
            android:src="@drawable/user"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/mi4_image3"
            app:layout_constraintTop_toBottomOf="@id/mi4_image1" />
    </com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

[christophesmet]

I suggest debugging it, run the sample. Change your dimensions, colors, masks, porterduff mode etc
It probably has an error somewhere. When you can point mee to the error I'll gladly update the library.

[nathan-fiscaletti]

One thing I'm noticing, (if you look at that XML above), is that when i add children within the MaskableFrameLayout, their constraints don't seem to work. I can't constrain them to "parent", they all just jump to 0,0.

Even with something very simple like this:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:background="@android:color/transparent">
        <com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout
            android:id="@+id/frm_mask_animated"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:mask="@drawable/rounded_rect"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:porterduffxfermode="DST_IN">
        <ImageView
            android:id="@+id/mi2_image1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginRight="4dp"
            android:scaleType="centerCrop"
            android:src="@drawable/user"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        </com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

[christophesmet]

Because it's a Framelayout and not a ConstraintLayout.

[nathan-fiscaletti]

Yeah, remind me not to try to work this early in the morning. Sorry for the confusion.