SoFunction
Updated on 2025-04-10

How to achieve image shadow effect on Android

This article introduces the method of Android to achieve image shadow effect, setting canvas color, image tilt effect, and image shadow effect, and uses (Canvas.MATRIX_SAVE_FLAG); to achieve it. Since the actual size of the picture is larger than the displayed image, the size needs to be changed appropriately to achieve better results. Based on the original rectangle, draw a rounded rectangle with a shadow layer. Readers can make personalized modifications to the program code according to their own needs to better meet their own project needs.

The specific implementation code is as follows:

package ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
public class ShaderEffect extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    (savedInstanceState);
    setContentView(new ImageEffect(this));
  }
  class ImageEffect extends View{
    Paint paint; 
    public ImageEffect (Context context){
      super(context);
      paint = new Paint();//Initialize the brush to use for the shadow effect behind it.      (true);//Remove jagging.      (5f, 5.0f, 5.0f, );//Set the shadow layer, this is the key.      (new PorterDuffXfermode(Mode.SRC_IN));
    }
    @Override
    public void onDraw(Canvas canvas){
      (canvas);
      int posX = 20;
      int posY = 50;
      int PicWidth,PicHegiht; 
      Drawable drawable = getResources().getDrawable();
      Drawable dbe = getResources().getDrawable().mutate();//If the mutate method is not called, the original image will also be changed, because the callee resource is the same and all objects are in a shared state.      Drawable drawTest = getResources().getDrawable();
      Bitmap bmp = (getResources(), );
      PicWidth = ();
      PicHegiht = ();
      (posX, (2 * posY) + PicHegiht, posX + PicWidth, (2 * posY) + 2 * PicHegiht );
      (posX,posY,posX+PicWidth,posY+PicHegiht);
      (0, 0, PicWidth, PicHegiht);
      ();//Set the canvas color      (Canvas.MATRIX_SAVE_FLAG);
      (0x7f000000,.SRC_IN);
      (posX + (int)(0.9 * PicWidth/2), posY + PicHegiht/2);//The image translation is to form a shadow effect just after the original image.      (-0.9F, 0.0F);//Image tilt effect.      (1.0f, 0.5f);//The image (actually a canvas) is scaled, and the Y direction is reduced to 1/2.      (canvas);//This is the shadow rendering of the original image. If you draw it first before the original image, it will be in the lower layer.      ();
      ();
      (Canvas.MATRIX_SAVE_FLAG);
      (canvas);//This is the original image of the painting. Since canvas has a layered effect, it will be covered on the shadow.      ();
      //The default effect original image      (Canvas.MATRIX_SAVE_FLAG);
      (canvas);
      ();
      //Picture Shadow Effect      (Canvas.MATRIX_SAVE_FLAG);
      //Rect rect = new Rect(2*posX + PicWidth, 2*posY + PicHegiht, 2*posX + 2*PicWidth, 2*posY + 2*PicHegiht);//This is the theoretical shadow graph coordinate      Rect rect = new Rect(2*posX + PicWidth + 3, 2*posY + PicHegiht + 3, 2*posX + 2*PicWidth - 2, 2*posY + 2*PicHegiht - 2);
      //Because the actual size of the picture is larger than the displayed image, the size needs to be changed appropriately to achieve better results      RectF rectF = new RectF(rect);
      (rectF, 10f, 10f, paint);//Draw a rounded rectangle based on the original rectangle, and it also has a shadow layer.      (bmp, 2*posX + PicWidth, 2*posY + PicHegiht, null);//Draw the original picture.      ();
    }
  }
}