Skip to main content

The quest for a better UX - the backgrounds.

The background

Good looks go a long way in getting downloads for your apps. I'm a fan of looking out for beautiful app designs. I've looked at so many apps, gotten so much inspiration, but have yet to achieve anything that I can be proud of.

Blame genetics if you must. I am a developer, and although I play the guitar and love music and beautiful art and images (even tried photography once), I suck in the design area. I can give an idea, a design, but cant execute it. I'm a coder damnit!

But, I'm not planning to just sit and let it be. I am pretty sure, just like how I picked up the guitar playing, I can train myself to make better user experiences via good looking apps.

This post will show you how your app can be transformed from the ugly looking thing below (it's a personal taste really) to a more presentable looking app further below.

The simple basic look

With an image background (image from

With a tiled background

The effects

Check the following links out. They are a wealth of resource for your design inspiration. Imitate them if you need to.

40 dribbble shots...

What MOST of these apps have in common is that they have a textured background. A textured background is one where the activity or panel or button have an image or pattern on, instead of a colour or gradient.

What to search for

So, you're all ready to add that background in eh? Where do you get these type of backgrounds? I've been spending a lot of time trying to find similar backgrounds, and only recently I found out what I was actually looking for (before that I was listening to U2's Still Havent Found What I'm Looking For! << check it out)...

You need to google for "subtle backgrounds" or "subtle patterns" (check this one out: ). You could also get a good wallpaper from too if you're not looking for tiled background. Use GIMP to edit and resize the images for your needs as some of the images on can be pretty big.


Option 1 - An image wallpaper from a file.

This one is too easy for me to cover here. Just set your view's background property to the image, plain and simple. A hint: use images that are not in focus, use blurred images so that your controls/views stand out! (Wow! an advice from an art retard!)

Option 2 - Get the current wallpaper

This is nice to give your apps a look like it is part of the device. This bit uses the live wallpaper library you can get from B4A's forum.

Sample code:

Dim m As LiveWallpaper
Activity.Background = m.Drawable

Option 3 - Tiles

If you're going after the tiled look, let me remind you, that using a single tile image in using the "fill" option on your app's background will most likely not quite look nice. You need to tile the images.

Following is a pretty useful B4A code snippet you can use to draw the tiles. Add it to a code module, and call it for any views (try applying tiled textures to edittext or buttons too) Apologies for the formatting, I'm still finding my way around blog formatting techniques!

Sub drawBG (fname As String, vw As View)
Dim bpbg As Bitmap
bpbg.Initialize(File.DirAssets, fname)
Dim bp2 As Bitmap
bp2.InitializeMutable(vw.Width, vw.Height)
Dim cvbg As Canvas
Dim rs As Rect
Dim rd As Rect
Dim left As Int
Dim top As Int
left = 0
top = 0
Do While left < vw.Width
rd.left = left
rd.Right = rd.left + bpbg.Width
Do While top < vw.Height = top
rd.Bottom = + bpbg.Height
cvbg.DrawBitmap(bpbg, rs, rd)
top = top + bpbg.Height
left = left + bpbg.Width
top = 0
End Sub


From what I've noticed, most of the apps that appeal to me have a nice tiled textured background. The background will need to be partnered with matching look and feel that matches the other views too. I'm gonna go study how these apps did that, where the buttons fit in so well with their backgrounds. Once I've learn that bit, you're sure to get a post on it from me.

I'll also be looking at applying typography to apps to beautify them. All this I am actually learning now as I go along with the 2012 theme for Mad Elephant's apps look and feel, and will be applying the lessons learnt to the apps too.

Stick around for the journey... and remember to subscribe to the newsletter!

Cheers and happy tiling!



  1. That's still.... hideous.
    What you should have done is:
    +create a gradient (no photoshop skills required, you're a coder, damnit!)
    -choose a base color (google flat ui colors - a mini page)
    -choose a second color very close to the first
    -apply the said gradient
    +make the inputs big. like way big. flat in style. no drop shadows. flat as fu**
    +don't write login. it's stupid. everyone does that. try "hello, friend!" or "howdy!" or, better yet, create a variable with a big list of greetings (poss. multi-language, with a tiny! note tiny! flag somewhere so you know what language it is). call a random to pick a greeting and boom!
    +it's a touchscreen! + sensor box.
    -shake to login
    -tilt to login
    -tap to login
    -slide left-write to login
    -etc etc etc.

    Best regards, paul.


Post a Comment

Popular posts from this blog

AppBucks Push and Icon Ads - Alternative to Airpush, Leadbolt, SendDroid and StartApp

We developers are always on the lookout for better monetisation options for our mobile apps. With the recent slow down on the mobile advertising scene after the December spending spree, people are starting to question the ad networks. The thing is, there IS a slow down across all networks. It is weird in that in 2012, my revenues kept growing in January and February. Well, it looks like advertisers are also getting savvier and better using their funds on ads. Let me introduce you to AppBucks (referral link).

My First Unity3D Game Unleashed! - Impact Jumper!

And it is in 2D! LOL! Folks, check out my half cooked, too-early-to-release, Unity3D Physics based game - Impact Jumper .

StartApp Ads - Initial Review and Basic4Android Library

Hey ya all... I've just posted the Basic4Android library for StartApp (this is a referral link). You can get the B4A library here . StartApp is an icon ad network, and they pay on a per-installation basis. StartApp Registration - Get $25 Register for StartApp with my referral link  (click it, I know you want to!), and once your download hits 100 new installs, you'll get a bonus of $25 into your account, and yes, I'll get some bonus too. StartApp First Days Review Well, it looks pretty impressive. An app of mine, more popular in the US had about 157 downloads (users who opt-in for the icon ads) and made $2.51. While another app, with a more global distribution had 296 opt-ins and made $2.09 revenue. It looks like the performance of these opt-in based icon ads could match up to the notification ad format. Give it a go! Cheers! -Bill