46

I'm trying to load a bitmap in Android which I want to tile. I'm currently using the following in my view to display a bitmap:

canvas.drawBitmap(bitmap, srcRect, destRect, null)

I essentially want to use this bitmap as a background image in my app and would like to repeat the bitmap in both the X and Y directions.

I've seen the TileMode.REPEAT constant for the BitmapShader class but i am not sure if this is to be used for repeating the actual bitmap or is used for applying a filter to the bitmap.

Meenal
  • 2,879
  • 5
  • 19
  • 43
Rich Lawrence
  • 1,660
  • 3
  • 15
  • 17

8 Answers8

132

You would do this in the xml instead of the java code. I haven't attempted this myself but I did find this example.

<xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/MainLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@drawable/backrepeat"
>

then in an xml called backrepeat.xml

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/back" 
    android:tileMode="repeat" />

reference

originalbryan
  • 1,027
  • 1
  • 13
  • 21
branchgabriel
  • 4,241
  • 4
  • 34
  • 48
  • 4
    just to add, backrepeat.xml goes in the "drawable" folder – Ben Gotow Jan 10 '10 at 05:24
  • Might be being pedantic here but first line should read - – Neil Oct 12 '12 at 16:09
  • 1
    This works in recent Android API versions (around 4.x), but does not work at least until API 2.2. Anyone know a workaround/fix and some more details? The http://developer.android.com/reference/android/R.attr.html#tileMode reference says it was added since API 1 but still it doesn't work. – Jonny Jan 13 '13 at 12:37
  • 1
    This example is everywhere, but why do we assume it works when it actually creates tiled background with the ugliest whitespace padding around each image? It's borderline useless. I went through every hoop and tried everything. I've tried using transparency and no transparency. – Herb Meehan Apr 03 '15 at 22:12
38

Figured out the code version:

  BitmapDrawable TileMe = new BitmapDrawable(MyBitmap);
  TileMe.setTileModeX(Shader.TileMode.REPEAT);
  TileMe.setTileModeY(Shader.TileMode.REPEAT);

  ImageView Item = new ImageView(this);
  Item.setBackgroundDrawable(TileMe);

Then if you have a drawable to tile, this can be used instead to make the BitmapDrawable:

  BitmapDrawable TileMe = new BitmapDrawable(BitmapFactory.decodeResource(getResources(), R.drawable.tile));
Izkata
  • 8,961
  • 2
  • 40
  • 50
  • That works great, but how would you repeat it only vertically? I tried removing the setTileModeX, but then it doesn't even work at all. – William L. Jul 25 '12 at 15:05
  • @WilliamL. Odd. The [docs](http://developer.android.com/reference/android/graphics/drawable/BitmapDrawable.html#setTileModeX(android.graphics.Shader.TileMode)) seem to say that it should work with only one of them. Best guess is to try out [`Shader.TileMode.CLAMP`](http://developer.android.com/reference/android/graphics/Shader.TileMode.html) and see what happens, then. – Izkata Jul 25 '12 at 15:57
  • It works if I repeat it horizontally only, but not vertically only. And CLAMP does the same thing as having not set the tile mode in the first place. – William L. Jul 25 '12 at 16:03
16

The backrepeat.xml above is buggy

<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/tile"
    android:tileMode="repeat"
    android:dither="true" />
Bo.
  • 580
  • 5
  • 17
6

It seems that some people are interested in doing this in a View, at the onDraw method. The following code has worked for me:

bgTile = BitmapFactory.decodeResource(context.getResources(), R.drawable.bg_tile);

float left = 0, top = 0;
float bgTileWidth = bgTile.getWidth();
float bgTileHeight = bgTile.getHeight();

while (left < screenWidth) {
    while (top < screenHeight) {
        canvas.drawBitmap(bgTile, left, top, null);
        top += bgTileHeight;
    }
    left += bgTileWidth;
    top = 0;
}
marcinn
  • 3
  • 2
kgiannakakis
  • 103,016
  • 27
  • 158
  • 194
  • It will fill all the area. The last tile may not be complete, the right/bottom most space of the screen will still be drawn. – kgiannakakis Jun 05 '11 at 16:26
  • I was only using this for a segment my canvas rather than all of it, so obviously you get extra drawn then width and height are not divisible by imagesize. I deleted my comment as it's not relevant to the question. Sorry! – stealthcopter Jun 05 '11 at 18:02
  • In this case you would use BitmapDrawable.setBounds and BitmapDrawable.draw(Canvas) – tactoth Dec 03 '12 at 05:38
5
<xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:id="@+id/MainLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="@drawable/back"
    android:tileMode="repeat"
>

This worked fine for me. I did not have to create the bitmap seperately. I used the tileMode attribute in the layout.

navi
  • 179
  • 1
  • 7
1

Just put this line of codes in the onCreate():-

 final Bitmap bmp = BitmapFactory.decodeResource(getResources(),R.drawable.actionbar_bg);
 final BitmapDrawable bitmapDrawable = new BitmapDrawable(bmp);
 bitmapDrawable.setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
 final ActionBar bar = getSupportActionBar();
 bar.setBackgroundDrawable(bitmapDrawable);
Ridcully
  • 23,362
  • 7
  • 71
  • 86
Amit Jayaswal
  • 1,725
  • 2
  • 19
  • 36
0

If you want to repeat the background only vertically you can set the width of your layout to "wrap_content", whereas if you want to set the background to repeat horizontally set the height to "wrap_content". If both height and width are set to "fill_parent" then it will tile in the X and Y directions.

For example, the following code will repeat your background vertically:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:background="@drawable/news_detail_activity_bg">
</LinearLayout>
j0k
  • 22,600
  • 28
  • 79
  • 90
Andrea Thacker
  • 3,440
  • 1
  • 25
  • 37
0
/* Tiled Layer Bitmap*/


public class TiledLayer {
private int cellWidth;
private int cellHeight;
private int yPosition = 0, xPosition = 0;
private int[][] grid;
private Image image;
private int[] tileXPositions;
private int[] tileYPositions;
private ArrayList animatedTiles;
private int numberOfTiles;
private int numberOfColumns;
private int numberOfRows;
private int gridColumns;
private int gridRows, width, height;

public TiledLayer(Image image, int columns, int rows, int tileWidth,
        int tileHeight, int width, int height) {
    this.grid = new int[columns][rows];
    this.gridColumns = columns;
    this.gridRows = rows;
    this.width = columns * tileWidth;
    this.height = rows * tileHeight;
    this.animatedTiles = new ArrayList();
    setStaticTileSet(image, tileWidth, tileHeight);
}

public void setStaticTileSet(Image image, int tileWidth, int tileHeight) {
    this.image = image;
    this.cellWidth = tileWidth;
    this.cellHeight = tileHeight;
    int columns = 64;//image.getWidth() / tileWidth;
    int rows =40;// image.getHeight() / tileHeight;
    this.tileXPositions = new int[columns];
    int pos = 0;
    for (int i = 0; i < columns; i++) {
        this.tileXPositions[i] = pos;
        pos += tileWidth;
    }
    this.tileYPositions = new int[rows];
    pos = 0;
    for (int i = 0; i < rows; i++) {
        this.tileYPositions[i] = pos;
        pos += tileHeight;
    }

    if (columns * rows < this.numberOfTiles) {
        // clear the grid, when there are not as many tiles as in the
        // previous set:
        for (int i = 0; i < this.grid.length; i++) {
            for (int j = 0; j < this.grid[i].length; j++) {
                this.grid[i][j] = 0;
            }
        }
    }
    this.numberOfTiles = columns * rows;
    this.numberOfColumns = columns;
    this.numberOfRows = rows;
}

public int createAnimatedTile(int staticTileIndex) {
    if (staticTileIndex >= this.numberOfTiles) {

        throw new IllegalArgumentException("invalid static tile index: "
                + staticTileIndex + " (there are only ["
                + this.numberOfTiles + "] tiles available.");

    }
    this.animatedTiles.add(new Integer(staticTileIndex));
    return -1 * (this.animatedTiles.size() - 1);
}

public void setAnimatedTile(int animatedTileIndex, int staticTileIndex) {
    if (staticTileIndex >= this.numberOfTiles) {

    }
    int animatedIndex = (-1 * animatedTileIndex) - 1;
    this.animatedTiles.set(animatedIndex, new Integer(staticTileIndex));
 }

 public int getAnimatedTile(int animatedTileIndex) {
    int animatedIndex = (-1 * animatedTileIndex) - 1;
    Integer animatedTile = (Integer) this.animatedTiles.get(animatedIndex);
    return animatedTile.intValue();
 }
 public void setCell(int col, int row, int tileIndex) {
    if (tileIndex >= this.numberOfTiles) {

        throw new IllegalArgumentException("invalid static tile index: "
                + tileIndex + " (there are only [" + this.numberOfTiles
                + "] tiles available.");

    }
    this.grid[col][row] = tileIndex;
}

 public int getCell(int col, int row) {
    return this.grid[col][row];
 }

 public void fillCells(int col, int row, int numCols, int numRows,
        int tileIndex) {
    if (tileIndex >= this.numberOfTiles) {

        throw new IllegalArgumentException("invalid static tile index: "
                + tileIndex + " (there are only [" + this.numberOfTiles
                + "] tiles available.");

    }
    int endCols = col + numCols;
    int endRows = row + numRows;
    for (int i = col; i < endCols; i++) {
        for (int j = row; j < endRows; j++) {
            this.grid[i][j] = tileIndex;
        }
    }
 }

    public final int getCellWidth() {
    return this.cellWidth;
 }

    public final int getCellHeight() {
    return this.cellHeight;
 }

 public final int getColumns() {
    return this.gridColumns;
 }

public final int getRows() {
    return this.gridRows;
}

public final void paint(Graphics g) {
    int clipX = 0;// g.getClipX();
    int clipY = 0;// g.getClipY();
    int clipWidth = width;// g.getClipWidth();
    int clipHeight = height;// g.getClipHeight();

    // jmt restore clip to previous state

    int x = this.xPosition;
    int y = this.yPosition;
    int[][] gridTable = this.grid;
    for (int i = 0; i < this.gridColumns; i++) {
        int[] gridRow = gridTable[i];
        for (int j = 0; j < gridRow.length; j++) {
            int cellIndex = gridRow[j];
            if (cellIndex != 0) {
                // okay this cell needs to be rendered:
                int tileIndex;
                if (cellIndex < 0) {
                    Integer tile = (Integer) this.animatedTiles
                            .get((-1 * cellIndex) - 1);
                    tileIndex = tile.intValue() - 1;
                } else {
                    tileIndex = cellIndex - 1;
                }
                // now draw the tile:
                g.save(Canvas.CLIP_SAVE_FLAG);
                // jmt: clear the screen
                Rect r = new Rect(0, 0, cellWidth, cellHeight);
                g.clipRect(r);
                g.setClip(x, y, this.cellWidth, this.cellHeight);
                int column = tileIndex % this.numberOfColumns;
                int row = tileIndex / this.numberOfColumns;
                int tileX = x - this.tileXPositions[column];
                int tileY = y - this.tileYPositions[row];

                g.drawImage(this.image, tileX, tileY);
                g.restore();
            }
            y += this.cellHeight;
        } // for each row
        y = this.yPosition;
        x += this.cellWidth;
    } // for each column

        // reset original clip:
        g.setClip(clipX, clipY, clipWidth, clipHeight);
     }
}
RBK
  • 2,481
  • 2
  • 30
  • 52