Clip angles of a tiled bitmap in a layer list

I want to do something similar to the bottom here (for all four corners, but I only have the bottom of the image to show you):

enter image description here

What I still have:

<?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, this gives me a tiiiny pixel in each corner, according to the preview:

enter image description here

So how do I copy these corners? The visible blow was not so and really not needed ...


Verified things:

Adding a solid to objects gives the perfect opposite to what I want. Perhaps there is a masking trick ...

<?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>

enter image description here


Tile:

Simple tile

+4
source share
1 answer

I can come up with several options.

  • Just add another 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>
    
  • :

    <?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>
    

. , . , android:scaleX="float" android:scaleY="float" .

  1. , RoundedBitmapDrawable .

    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);
    
+2

Source: https://habr.com/ru/post/1695666/


All Articles