Creating Blurred Backgrounds & Overlays in Titanium

With iOS 7 and the new flat design aesthetic many apps are using a blurred background or overlay to help set depth or attention.  The Ti.BlurView iOS native module now makes this easy to implement in Titanium.  Since we are using CoreImage you can use this in iOS 6 or greater.

Below shows Ti.BlurView example app.js in action, for a full walk through see the video here.

BlurView Demo
The Ti.BlurView module’s source is available on Github here.

You can get started today using Ti.BlurView with the following:

Please note you need iOS 6 or greater to use this module so make sure to set the min-ios-ver in your Titanium tiapp.xml to at least the value displayed below.

<min-ios-ver>6.0</min-ios-ver>

Below is a snippet showing how to create a blurred background image similar to the Yahoo Weather app.

var mod = require('bencoding.blur');

var win = Ti.UI.createWindow({
	backgroundColor:'blue'
});

var bgView = Ti.UI.createView({
	height:Ti.UI.FILL, width:Ti.UI.FILL,
	backgroundImage:"42553_m.jpg"
});
win.add(bgView);

var blurView = mod.createView({
	height:Ti.UI.FILL,
	width:Ti.UI.FILL,
	blurLevel:5, blurCroppedToRect:false,
        backgroundView:bgView
});
bgView.add(blurView);

win.addEventListener('open',function(d){

	var container = Ti.UI.createView({
		backgroundColor:"#fff", borderRadius:20,
		top:100, height:150, left:40, right:40
	});
	blurView.add(container);
	var label = Ti.UI.createLabel({
		text:"Show how to blur like the yahoo weather app.",
		color:"#000", width:Ti.UI.FILL,
		height:50, textAlign:"center"
	});
	container.add(label);

});

win.open();

You can also use the applyBlurTo method to create your own Blur View containers.  For information on how to do this please see the documentation here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s