Android App Background: using multiple images

Question

I have a background image that's split into three separate images:

backgroundTop.png
backgroundMiddle.png
backgroundBottom.png

How would I go about implementing a background in an Android app in which the top image is displayed at the top of the application, and the bottom image at the bottom, and the middle image is tiled in between? This would of course depend on how much content is loaded on the screen - much like in web pages.

In other words, the total number of times the middle image is tiled will depend on what is on the screen.

I've seen a solution to implement a tiling background out of a single image here: How to make android app's background image repeat

This works fine if you are using a single picture, but not with multiple images.

Links to examples below so you know what I mean:

http://rockfreaks.net/images/reviewPageTop.png

http://rockfreaks.net/images/reviewPageMiddle.png

http://rockfreaks.net/images/reviewPageBottom.png

Sasha

Answer 1

Think you can try combining layer list drawable (it's possible to set insets for layers) with a tiled bitmap drawable that is placed as a middle layer and positioned with appropriate insets.

Something like this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/page_top" />
  <item 
     android:insetTop="@dimen/page_top_height"
     android:insetBottom="@dimen/page_bottom_height"
     >
    <bitmap
        android:src="@drawable/page_middle_tile"
        android:tileMode="repeat"
        />
  </item>
  <item android:drawable="@drawable/page_bottom" />
</layer-list>

But it all depends on your layout indeed.

Hermon

I was looking for a solution for a different problem, and you answer helped me, too. Using a layer-list is a good idea in many scenarios, thanks for sharing! – Hazlitt

Answer 2

Set the background as the middle image and tile it. (like in the example you show)

Create a header view that you insert at the top of each page.

Create a footer view that you insert at the bottom of each page.

And have your content in the middle.

I've made it a flat file here, but you can easily imagine refactoring it into includes, or whatever your application needs.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00FF00" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dip"
        android:layout_alignParentTop="true"
        android:background="#FF0000" />

    <!-- Your content -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dip"
        android:layout_alignParentBottom="true"
        android:background="#0000FF" />

</RelativeLayout>

• Red = Header
• Green = Tiles (which would be inherited from your Theme)
• Blue = Footer

Herwin

This almost works. The problem is that the red and blue parts are merely 'on top' of the green background. It doesn't merge together as intended, you can clearly see that there are two images on top of the background image. Example: peecee.dk/uploads/042012/device-2012-04-21-174830_big_thumb.png – Sasha

Ah but then it becomes a problem with your resources. If you 9patch the header and footer to define the stretchable areas and tile the middle at the correct tile size you should get them to seamlessly integrate. theoretically – Herwin

Answer 3

Try something like this :

Top and bottom in two layouts with android:gravity="TOP" and "BOTTOM". These two layouts are set up with android:background="@drawable/xxx.png"

For the center, either use your solution or maybe use a ScrollView.

Bequeath