Clip corners of a tiled bitmap in a layer-list

Question

I wish to accomplish something that looks like the bottom part of here (for all four corners, but I only have the bottom of the image to show you):

What I have so far:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:src="@drawable/orange_tile"
            android:tileMode="repeat"
            android:dither="true"
            android:gravity="center" />
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="2dp"/>
            <stroke android:color="@color/white" android:width="0.5dp" />
        </shape>
    </item>
</layer-list>

However, that gives me a tiiiny pixel in each corner, as per the preview:

So, how do I clip those corners? The visible stroke wasn't it and isn't actually desired...

---

Things tried:

Adding a solid to the items gives the perfect opposite of what I want. There may be a masking trick possible...

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:src="@drawable/orange_tile"
            android:tileMode="repeat"
            android:dither="true"
            android:gravity="center" />
    </item>
    <item>
        <shape android:shape="rectangle">
            <color android:color="@color/white" />
            <corners android:radius="2dp"/>
            <stroke android:color="@color/white" android:width="0.5dp" />
        </shape>
    </item>
</layer-list>

---

The tile:

Answer 1

I can think of a few options.

1. Just add one more background rectangle to hide the corners:

   <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   
   <item>
       <bitmap android:src="@drawable/orange_tile"
           android:tileMode="repeat"
           android:dither="true"
           android:gravity="center" />
   </item>
   
   <item>
       <shape android:shape="rectangle">
           <corners android:radius="2dp"/>
           <stroke android:color="@color/white" android:width="0.5dp"/>
       </shape>
   </item>
   
   <item>
       <shape android:shape="rectangle">
           <corners android:radius="0dp"/>
           <stroke android:color="@color/white" android:width="0.5dp"/>
       </shape>
   </item>
   
   </layer-list>
   

2. You can move your corners rectangle out of the view and make it bigger:

   <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   
   <item>
       <bitmap android:src="@drawable/icon_bg"
           android:tileMode="repeat"
           android:dither="true"
           android:gravity="center" />
   </item>
   
   <item android:top="-1.5dp" android:bottom="-1.5dp"
       android:left="-1.5dp" android:right="-1.5dp"
       >
       <shape android:shape="rectangle">
           <corners android:radius="2dp"/>
           <stroke android:color="@color/white" android:width="1.5dp"/>
       </shape>
   </item>
   
   </layer-list>
   

You'll need to fine-tune the offsets for this case. This one is a bit hacky, because it shrinks the tile content. You might want to scale the image with android:scaleX="float" and android:scaleY="float" when fine-tuning.

3. If you are open to code solution for getting rounded corners you can also try the RoundedBitmapDrawable class.

   float cornerRadius = 2f * Resources.getSystem().getDisplayMetrics().density;    
   
   Bitmap tileBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.orange_tile);
   RoundedBitmapDrawable roundedTileDrawable = 
       RoundedBitmapDrawableFactory.create(getResources(), tileBitmap);
   
   roundedTileDrawable.setCornerRadius(cornerRadius);