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

Question

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();

that was a nice way to point me here! Not sure of this, but let me look around a bit and get back to you. — Shaunak, Dec 28 '11 at 13:09
You have to put this as an accepted answer because this just saved me! — DeeV, Feb 06 '13 at 17:29
The given answer does not answer the original question, I'm still wondering if a mask layer could be declared using the layer-list xml — Shlomi Schwartz, Jun 23 '16 at 12:04

Fattie · Answer 1 · 2018-02-16T10:47:32.637

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;
    }

  }

score -1 · Answer 2 · edited Jun 02 '14 at 09:29

-1

.png files can have a alpha channel included when you create them and Android can use that to isolate the image as you explain.

Create an extra channel in GIMP or Photoshop or whatever image editor you use. This will be a monochrome channel (256 shades of white to black). Make a selection of the section you want to mask OUT click on the alpha channel and fill the selection area with black. Invert the selection, still in the alpha channel, and fill it with white. Save and export .png file as 24 bit with alpha (effectively 32 bit). Your file should render correctly.

edited Jun 02 '14 at 09:29

Rahil Wazir

10,007
11
42
64

answered Jan 03 '13 at 09:53

Solone

11
3

4

it is easy to create an alpha channel image, I was asking on how to use this alpha channel as a mask – Shlomi Schwartz Jan 03 '13 at 11:54
1

@Erik Its not a question by the way :D – Rahil Wazir Jun 02 '14 at 09:29

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

2 Answers2

Linked