Adding low opacity colored overlay on imageview

Question

I have an imageView in my application that displays some background image like this:

I had like to add some colored overlay above it like this (blue colored overlay):

The code I'm using to do this is:

Picasso.with( context ).load( R.drawable.ic_nocover ).resize( targetWidth, targetHeight ).into( iv, new Callback() {
    @Override
    public void onSuccess() {
        tv.setText( title );
        iv.setBackgroundResource( R.drawable.ic_nocover );
        iv.setColorFilter(getRandomMaterialColor( context, "500" ), PorterDuff.Mode.SRC_ATOP);
    }

    @Override
    public void onError() {
        tv.setText( title );
        iv.setBackgroundResource( R.drawable.ic_nocover );
        iv.setColorFilter(getRandomMaterialColor( context, "500" ), PorterDuff.Mode.SRC_ATOP);
    }
} );

where getRandomMaterialColor( context, "500" ) is a method I created to pick random colors.

But the result I'm getting is just the image without any overlay.

Any reason it doesn't work?

My XML looks like this:

<androidx.cardview.widget.CardView
    android:id="@+id/imagecard"
    android:layout_width="110dp"
    android:layout_height="188dp"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    app:cardCornerRadius="10dp">

    <ImageView
        android:id="@+id/iv_BookCover"
        android:layout_width="110dp"
        android:layout_height="140dp"
        android:scaleType="fitXY" />

    <TextView
        android:id="@+id/tv_BookCover"
        android:layout_width="110dp"
        android:layout_height="140dp"
        android:fontFamily="@font/assistant_semibold"
        android:gravity="top|center"
        android:inputType="textMultiLine"
        android:paddingStart="4dp"
        android:paddingTop="20dp"
        android:paddingEnd="4dp"
        android:paddingBottom="20dp"
        android:scaleType="fitXY"
        android:textColor="@color/colorBlackText"
        android:textSize="18sp" />

</androidx.cardview.widget.CardView>

I'm trying not to make any changes in the XML and to do it programmatically.

Thank you

Answer 1

Your code seems to have no problems. If the getRandomMaterialColor() returns a valid int value including finite alpha channel (e.g. 0x3F0000FF), the overlay effect should be shown correctly as you expect.