Android - Drawable Repeat Shape To Create Pattern

I need to create a pattern to set as a background of some View. I want the pattern to look something like this: I don't want to import any image to drawable, but instead, I want t

Solution 1:

You can get a pattern of repeating tiles based upon shape drawables by creating a custom View and overriding onDraw().

Let's start by creating the tile as a layer list made of shape drawables, in this case alternating squares of black and white:

my_background.xml

<selectorxmlns:android="http://schemas.android.com/apk/res/android"><item><layer-list><item ><shape ><solidandroid:color="#ffffff"/><sizeandroid:height="8dp"android:width="8dp"
                    /></shape></item><itemandroid:left="4dp"android:top="4dp"android:bottom="0dp"android:right="0dp" ><shape ><solidandroid:color="#ff000000"/><sizeandroid:height="4dp"android:width="4dp"
                    /></shape></item><itemandroid:left="0dp"android:top="0dp"android:bottom="4dp"android:right="4dp"><shape><solidandroid:color="#ff000000"/><sizeandroid:height="4dp"android:width="4dp"
                    /></shape></item></layer-list></item>

You need a method drawableToBitmap() to transform the tile into a Bitmap like here.

Override onDraw():

@OverrideprotectedvoidonDraw(Canvas canvas)
{
    super.onDraw(canvas);
    Drawabled= getResources().getDrawable(R.drawable.my_background);
    if (d != null)
    {
        Bitmapb= drawableToBitmap(d);
        BitmapDrawablebm=newBitmapDrawable(getResources(), b);
        bm.setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);

        bm.setBounds(canvas.getClipBounds());
        bm.draw(canvas);
    }
}

Depending on the type of View, you may have to take additional steps.

• For a custom View extending some kind of Layout, set the android:background attribute to any color in order to trigger the call to onDraw()
• For many Views it may be easier to implement and at the same time better for performance to position your custom View below the other View (e.g. as two children in a RelativeLayout) and make the sizes match.
• If you want to extend from ImageView you will need to draw the foreground drawable on top of the background pattern. In this case, you can modify onDraw() as follows:

onDraw() preserving foreground drawable:

@OverrideprotectedvoidonDraw(Canvas canvas)
{
    super.onDraw(canvas);

    // preserve foreground drawable if there is one:Drawablefd= getDrawable();

    Drawabled= getResources().getDrawable(R.drawable.my_background);
    if (d != null)
    {
        Bitmapb= drawableToBitmap(d);
        BitmapDrawablebm=newBitmapDrawable(getResources(), b);
        bm.setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);

        bm.setBounds(canvas.getClipBounds());
        bm.draw(canvas);
    }

    if (fd == null)
        return;

    // set bounds as needed
    fd.setBounds(0, 0, 100, 100);
    fd.draw(canvas);
}

EDIT

As mentioned above, in some cases (e.g. TextView, ProgressBar) you may want to use a workaround:

• Make your View background transparent.
• Create a custom layout using the pattern as background.
• Wrap the View in the custom layout (set the layout width and height to wrap_content).