Tuesday, June 29, 2010

How to tile a background image in Android


For one of the apps I'm working on I wanted to have a nice pixel pattern tiled behind my widgets.
After a little bit of hunting around I found this tutorial, and I thought I'd clean up the lessons within and show you how.

Here's the contents of my main.xml layout file,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/backrepeat"
    android:gravity="center_horizontal"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />  
</LinearLayout>



which is referenced in code in the standard way like this:

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
...// (rest of onCreate method continues here..)

Now note this line:

android:background="@drawable/backrepeat"


What's going on there?
.. Glad you asked!

Here's a quick screenshot of the contents of one of my drawable folders in my project:


What is this
backrepeat.xml?

Well, here's the contents of that file here:

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



Can you see what's going on?
Backrepeat.xml defines an instance of the BitmapDrawable class, and that class references our simple scale1.jpg, located in the drawable-hdpi folder.

Simply by adding the:

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

line in bold, we are able to achieve results such as this:



Easy isn't it?

One thing to keep in mind is that you should have folders drawable-hdpi, drawable-mdpi & drawable-ldpi, you'll need to add this backrepeat.xml file and the relevant images to each of these to allow this functionality in high, medium and low dpi (dots per inch) screen sizes.

Enjoy.

30 comments:

  1. I have tried the above code but the image repeats horizontally only not vertically.....
    So can you help me.....

    ReplyDelete
  2. Hi Parveen,
    I'm not sure why that would be. Can you post your code and the image so I can have a closer look?

    Cheers,
    Glenn

    ReplyDelete
  3. my main xml file is the same as yours but I always get this on the last line.

    Multiple annotations found at this line:
    - XML document structures must start and end within the same
    entity.
    - error: Error parsing XML: no element found

    ReplyDelete
  4. Hi Timominous,
    .. You're absolutely right, luckily easily fixed, all you need to do is close off the 'LinearLayout' element.

    I adjusted my example above to do just that.
    Hope that sorts out your issue.

    Cheers,
    Glenn

    ReplyDelete
  5. Hi,
    This is a nice article.
    here you are repeating the same background pattern for the entire screen.
    Can we repeat different patterns at different positions. If you know.Please let me know.

    Thanks & Regards,
    NSD

    ReplyDelete
  6. Ok I have a question . I installed color emoji pngs into drawable and drawable hdpi . Then continued the I'd codes in public xml , all went well there and was able to compile ,then realized I need to enter the character code pointing at the id to then get the pngs . My question is where would I enter these code or do I need to make a new xml inside the drawable folder . Please help , I'm kinda new but learn really fast .also I am doing this in framework where stock stood emoji is so I will be able to see apple color emoji system wide . Thanks

    ReplyDelete
  7. Hi J roc,
    .. Are you able to post some code demonstrating what you're looking for?
    Alternatively you can email me: glenn@bluemongo.com

    ReplyDelete
  8. Hello,

    I am using this exact method and it works great, EXCEPT I am getting a border around each instance of the tiled image. I've looked around at ways to control the border in both my linear layout calling backrepeat, and inside the backrepeat.xml itself, with no luck.

    Thanks in advance for any ideas,
    Rob

    ReplyDelete
  9. Gracias Glenn me sirvio mucho.

    Thanks!

    ReplyDelete
  10. Hey, I got the following message in eclipse

    Failed to parse background_repeat.xml
    Exception details are logged in Window > Show View > Error Log.

    Do you have any idea what may help?

    ReplyDelete
    Replies
    1. Hi Michael,
      Judging from that error, I assume you've created a background_repeat.xml file and put it in the correct directory, I think it might be trying to tell you that the xml itself is perhaps not valid?
      My suggestion is to have another look at your xml file and make sure that you haven't accidentally left anything out, xml can be really picky. Perhaps if it helps try an online xml validator like http://www.w3schools.com/xml/xml_validator.asp or http://www.xmlvalidation.com/.
      Best of luck. Let me know how you go.

      Cheers,
      Glenn

      Delete
  11. i want to put a single image as background on whole list view..can u help me...?

    ReplyDelete
  12. FYI, your backrepeat.xml file can just be in res/drawable, and so long as you have the scale1.jpg in all 3 dpi drawable folders, it will choose the appropriate one for you.

    ReplyDelete
  13. Thanks a lot...best explanation found on internet.

    ReplyDelete
  14. Thanks!!I need background image for entairapplication.while im choosing somthig..or pressing some buttons like that..pls help me out hw to do?

    ReplyDelete
    Replies
    1. Hi Mohamed,
      .. Could you give some more details on what you're trying to do?
      Are you saying that you want to change the background image via code?

      Cheers,
      Glenn

      Delete
  15. Your trick worked !!

    But my background image is getting darker than it should be.

    What to do?
    it's a white image but a black layer is appering above it. so it is getting dark

    ReplyDelete
    Replies
    1. Hi Chaltanya,
      .. Can you post a screenshot somewhere so we can see your issue?

      Cheers,
      Glenn

      Delete
  16. Thanks a lot:). Can i translate your article for russian and public on my blog?

    ReplyDelete
    Replies
    1. Sorry for the late reply. Absolutely you can do that WonderTalik.

      Delete
  17. Thanks a bunch. You just saved my hide.

    ReplyDelete
  18. This tutorial worked perfectly! Thank you so much!!

    ReplyDelete