Wednesday, July 15, 2015

Custom Tiled Background Theme in Android Activity

Making a tiled background in Android can be made simply by xml.

But, what if you need enough flexibility to manage a background theme where you can change color and pattern by user interaction, as in our free secure instant messaging app SHADO?

Since custom themes are immutable in Android, you can use our approach as a starting point for building your own runtime changeable themed UI with less code and xml resources, too.

First of all, you need a handful of patterns to use as backgrounds. They must be PNG images with transparency otherwise you won't see any change in the background color. Here are some examples:

Name them as you prefer (background_pattern_0.png, background_pattern_1.png, and so on) and put your patterns under the appropriate res/drawable resolution folder (res/drawable-hdpi, for example).
The second step would be to prepare your custom drawable resource using LayerList (and put it under the folder res/drawable) as follows:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="" >
    <item android:id="@+id/shape_color">
        <shape android:shape="rectangle" >
            <solid android:color="@color/black" />
    <item android:id="@+id/shape_pattern"
            android:tileMode="repeat" />

Third, define your colors in the res/values/colors.xml file and, fourth, define the layout for your Activity as in the following skeleton:

<RelativeLayout xmlns:android=""
    android:background="@drawable/background_activity" >

    <!-- Here you can put your further layouts and controls -->


Fifth, in your Activity source code (or in an helper Java class), you can set the background theme programmatically as below:

private void setBackgroundTheme(RelativeLayout rlActivity) {
    LayerDrawable ldTheme = (LayerDrawable) rlActivity.getBackground();
    GradientDrawable shape = (GradientDrawable) 
    BitmapDrawable bmp = (BitmapDrawable) ResourcesCompat.getDrawable(getResources(), 
        BACKGROUND_PATTERNS[currentPattern], null);
    bmp.setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
    ldTheme.setDrawableByLayerId(, bmp);

To use ResourceCompat you must import the Android Support API v4.

currentColor and currentPattern are two static variabiles you read promptly when the user make a selection on a Color or on a Pattern spinner, for example. Remember to save the user choice in SharedPreferences as soon as possible to keep track of it when app is restarted.

BACKGROUND_COLORS and BACKGROUND_PATTERNS are two final static int arrays linking to appropriate resources, for example:

private static final int[] BACKGROUND_COLORS = {
private static final int[] BACKGROUND_PATTERNS = {

Finally, you have to call setBackgroundTheme in the Activity's onCreate method and pass it the RelativeLayout root of the Activity layout, for example in this way:

setBackgroundTheme((RelativeLayout) findViewById(;

Following is a background theme example based on the above code. You can download the complete code for this example here.

Have fun!