Android - Is it possible to declare an alpha mask directly within layer-list XML definition?

Shlomi Schwartz picture Shlomi Schwartz · Dec 25, 2011 · Viewed 13k times · Source

A newbie question

I have this layers.xml that I use as a source for an ImageView. And two images, mask.png and image.jpg

layers.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap  android:src="@drawable/image" android:gravity="center"/>
    </item>
    <item>
        <bitmap  android:src="@drawable/mask" android:gravity="center"/>
    </item>
</layer-list>

ImageView:

<ImageView
 android:id="@+id/img_B"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:src="@drawable/layers"/>

At the moment the output is just the png over the image. I would like the png to act as a mask, clipping the image using the png alpha channel like so: enter image description here

Is that possible directly within the xml, or do I have to do it by code?

Thanks for your advice ;)

update: at the moment I achieved my goal using code to replace the entire ImageView

ImageView img = (ImageView) findViewById(imgID);

Canvas canvas = new Canvas();
Bitmap mainImage = BitmapFactory.decodeResource(getResources(), R.drawable.img);
Bitmap mask = BitmapFactory.decodeResource(getResources(), R.drawable.mask);
Bitmap result = Bitmap.createBitmap(mainImage.getWidth(), mainImage.getHeight(), Bitmap.Config.ARGB_8888);

canvas.setBitmap(result);
Paint paint = new Paint();
paint.setFilterBitmap(false);

canvas.drawBitmap(mainImage, 0, 0, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
canvas.drawBitmap(mask, 0, 0, paint);
paint.setXfermode(null);

img.setImageBitmap(result);
img.invalidate();

Answer

Fattie picture Fattie · Jun 2, 2014

Put your mask image in the folder drawable-nodpi.

Otherwise, the scaling will be wrong.

Here's some example code from an app. After the camera it adds a mask.

public void onActivityResult(int requestCode, int resultCode, Intent data)
  {
  if (requestCode == REQUEST_IMAGE_CAPTURE) // && resultCode == RESULT_OK )
    {

    try
      {
      Bitmap cameraBmp = MediaStore.Images.Media.getBitmap(
          State.mainActivity.getContentResolver(),
          Uri.fromFile(Utils.tempFileForAnImage())
                                );

      cameraBmp = ThumbnailUtils.extractThumbnail(cameraBmp, 256, 256);

      Matrix m = new Matrix();
      m.postRotate(Utils.neededRotation(Utils.tempFileForAnImage()));
      // NOTE incredibly useful trick for cropping/resizing square
      // http://stackoverflow.com/a/17733530/294884

      cameraBmp = Bitmap.createBitmap(cameraBmp,
          0, 0, cameraBmp.getWidth(), cameraBmp.getHeight(),
          m, true);


      // so, cameraBmp is now a Bitmap.  Let's add the mask!!
      // see Shiomi Schwartz's original!! http://stackoverflow.com/questions/8630365

      Bitmap mask = BitmapFactory.decodeResource(
            getResources(),
            R.drawable.mask_android_256);
      // NOTE THE MASK ** MUST ** BE IN YOUR nodpi folder

      Bitmap result = Bitmap.createBitmap( 256,256, Bitmap.Config.ARGB_8888);

      Canvas cc = new Canvas();
      cc.setBitmap(result);

      Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
      paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

      cc.drawBitmap(cameraBmp, 0, 0, null);
      cc.drawBitmap(mask, 0,0, paint);

      // so, cameraBmp is now a Bitmap but it has been masked



      yourImageViewForTheUser.setImageBitmap(result);

      // make a "baos" ... we want PNG in this case ..
      ByteArrayOutputStream baos = new ByteArrayOutputStream();
      result.compress(Bitmap.CompressFormat.PNG, 0, baos);

      imageBytesRESULT = baos.toByteArray();
      // typically you want the result as image bytes, example to send to Parse

      } catch (FileNotFoundException e)
      {
      e.printStackTrace();
      } catch (IOException e)
      {
      e.printStackTrace();
      }

    return;
    }

  }