Search code examples
androidxmlandroid-layoutimageviewpicasso

Place a scrim above an ImageView shown using Picasso


I'm showing an image using Picasso into an ImageView in a toolbar and I gotta make readable the Toolbar title even if it's a B&W pic so I want to add a scrim that should add a shadow starting from the bottom of the image, just like this.

Left without scrim, right with scrim

I've tried adding it to the xml and it's covered by the image shown with Picasso, also tried to add it using the java but didn't work so.... help me if you can!

posting the code I used right here.

ImageView header;
    header = findViewById(R.id.tour_image);

    if(String.valueOf(getIntent().getStringExtra("image")).equals(getApplicationContext().getResources().getString(R.string.no_image))) {
        Picasso.get()
                .load(String.valueOf(getIntent().getStringExtra("image")))
                .fit()
                .centerInside()
                .into(header);
    }else{
        Picasso.get()
                .load(String.valueOf(getIntent().getStringExtra("image")))
                .fit()
                .into(header);
    }

    header.setBackground(getResources().getDrawable(R.drawable.scrim));

<ImageView
            android:id="@+id/tour_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/scrim"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax"/>

Thanks for your help!


Solution

  • Add view with scrim in CollapsingToolbarLayout

         <android.support.design.widget.CollapsingToolbarLayout>
    
             <ImageView />
    
             <View 
                 background="@drawable/scrim"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent" />
    
             <android.support.v7.widget.Toolbar />
    
         </android.support.design.widget.CollapsingToolbarLayout>