Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android App Background: using multiple images

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

like image 425
Petteri Pertola Avatar asked Apr 21 '12 15:04

Petteri Pertola


1 Answers

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.

like image 152
Roman Mazur Avatar answered Sep 21 '22 01:09

Roman Mazur