CODEWITHSUNDEEP
androidbackgroundstylestileapp-themes
Petteri Pertola
Petteri Pertola

Reputation: 281

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

Upvotes: 6

Views: 14911

Answers (3)

Roman Mazur
Roman Mazur

Reputation: 3074

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.

Upvotes: 10

Blundell
Blundell

Reputation: 76574

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

enter image description here

Upvotes: 1

noli
noli

Reputation: 3755

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.

Upvotes: 0

Related Questions