Android App Background: using multiple images

Petteri Pertola picture Petteri Pertola · Apr 21, 2012 · Viewed 13.5k times · Source

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

Answer

Roman Mazur picture Roman Mazur · Apr 21, 2012

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.