Locking the orientation of a Titanium Android app if fairly straightforward after you’ve done it once or twice.  I thought it would be helpful to outline the steps that I follow to lock several of my applications in a portrait orientation.

To start with you first must build your Titanium Android app.  It doesn’t matter if you have any functionality in your project yet.  You just need to make sure an AndroidManifest.xml file is created in your project’s build/android folder.  Once you have done a build, you will need to open your AndroidManifest.xml and look for the android:name property of your launch activity.  You can see an example of this in the below snippet found in our AndroidTest AndroidManifest.xml. Look for the .AndroidtestActivity line.  This is the line and pattern you will want to look for in your project’s AndroidManifest.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" >
	<application android:icon="@drawable/appicon" 
           android:label="AndroidTest" 
           android:name="AndroidtestApplication" 
           android:debuggable="false" 
           android:theme="@style/Theme.AppCompat">
		<activity 
                 android:name=".AndroidtestActivity" 
                 android:label="@string/app_name" 
                 android:theme="@style/Theme.Titanium"       
                 android:configChanges="keyboardHidden|orientation|screenSize">
		   <intent-filter>
		     <action android:name="android.intent.action.MAIN"/>
		     <category android:name="android.intent.category.LAUNCHER"/>
		    </intent-filter>
		</activity>
	</application>
</manifest>

You can see the naming convention is a period then your project name with the first letter capitalized followed by Activity.  In our example project this is .AndroidtestActivity. This is the pattern you will want to look for in your AndroidManifest.xml.

Once you have the activity name of your launch activity you will want to replace the default Android configuration with a new template.

First open your project’s tiapp.xml and locate the below default Android entry.

<android xmlns:android="http://schemas.android.com/apk/res/android"/>

Replace the default information with the below template.

    <android xmlns:android="http://schemas.android.com/apk/res/android">
        <manifest>
            <application>
                <activity
                    android:configChanges="keyboardHidden|orientation|screenSize"
                    android:screenOrientation="portrait"
                    android:name="[replace me]">
                    <intent-filter>
                        <action android:name="android.intent.action.MAIN"/>
                        <category android:name="android.intent.category.LAUNCHER"/>
                    </intent-filter>
                </activity>
                <activity
                    android:configChanges="keyboardHidden|orientation|screenSize"
                    android:name="org.appcelerator.titanium.TiActivity" 
                    android:screenOrientation="portrait"/>
                <activity
                    android:configChanges="keyboardHidden|orientation|screenSize"
                    android:name="org.appcelerator.titanium.TiTranslucentActivity"
                    android:screenOrientation="portrait" android:theme="@style/Theme.AppCompat.Translucent"/>
            </application>
        </manifest>
    </android>

Next replace the [replace me] placeholder with the name of the launch activity you found earlier.  The below example shows this replacement being done for our AndroidTest app.  Please remember to remove the brackets when making the replacement.

    <android xmlns:android="http://schemas.android.com/apk/res/android">
        <manifest>
            <application>
                <activity
                    android:configChanges="keyboardHidden|orientation|screenSize"
                    android:screenOrientation="portrait"
                    android:name=".AndroidtestActivity">
                    <intent-filter>
                        <action android:name="android.intent.action.MAIN"/>
                        <category android:name="android.intent.category.LAUNCHER"/>
                    </intent-filter>
                </activity>
                <activity
                    android:configChanges="keyboardHidden|orientation|screenSize"
                    android:name="org.appcelerator.titanium.TiActivity" 
                    android:screenOrientation="portrait"/>
                <activity
                    android:configChanges="keyboardHidden|orientation|screenSize"
                    android:name="org.appcelerator.titanium.TiTranslucentActivity"
                    android:screenOrientation="portrait" android:theme="@style/Theme.AppCompat.Translucent"/>
            </application>
        </manifest>
    </android>

Next you will need to tell Alloy to only create Windows with a portrait orientation.  This is super easy and can be done by adding one class to your app.tss as shown below.  Your app.tss can be located in your app/styles folder.  If your project doesn’t already contain an app.tss you can create one by simply creating a file called app.tss in your project’s style folder.  To learn more about global styles please read the documentation available here.  The following snippet creates a global style for the windows in your project setting the orientation to portrait.

"Window" : {
	orientationModes :[
		Ti.UI.PORTRAIT
	]
}

FAQ:

• Q: Why lock at the Android Activity level, isn’t adding the Alloy style enough?
• A: Unfortunately no. The Alloy style is applied after the window is created. So if the device is held in a landscape orientation you will see the window open and turn. Locking at the Android Activity level stops this behavior.
• Q: Does this mean all of my Ti.UI.Window object will be locked in portrait?
• A: Yes, this locks both at the Android Activity and Titanium object levels.
• Q: Can I later change the orientation by updating my Ti.UI.Window orientation?
• A: No, orientation is locked at the Android Activity level as well.

The latest version of Ti.Utterance adds Android support for both Text to Speech and Speech to Text.  The Ti.Utterance native module surfaces the native platform APIs for Text to Speech, and on Android now Speech to Text.

Text to Speech

The Speech proxy provides your Titanium apps Text to Speech capabilities on both iOS and Android.  Ti.Utterance uses AVSpeechUtterance on iOS and android.speech.tts.TextToSpeech on Android.  This enables you to provide the Ti.Utterance module with a string, such as “hello world” for the module to speak.

To learn more about Text to Speech please read the documentation:

• Android
• iOS

Sample

Full example available here.

var utterance = require('bencoding.utterance'),
	textToSpeech = utterance.createSpeech();

textToSpeech.startSpeaking({
	text:"Hello World"
});	

Speech to Text

The SpeechToText proxy is available on Android and provides Speech to Text capabilities using your device’s native platform speech recognizer.  When the startSpeechToText method is called, a microphone dialog will appear and listen for input from the user.  When the user stops speaking, Android’s speech recognizer will convert what was said into one or more text phrases.  If Android is not fully able to match was is said, the speech recognizer will provide a list of options in the order it feels is the best match.

To learn more about Speech to Text  please read the documentation:

• Android

Sample

Full example available here.

var utterance = require('bencoding.utterance'),
	speechToText = utterance.createSpeechToText();

speechToText.startSpeechToText({
	promptText:"Say something interesting",
	maxResults: 10
});

speechToText.addEventListener('completed',function(e){

	if(e.success && (e.wordCount > 0)){
		alert("Speech Recognized "
				+ e.wordCount
				+ " matches found: "
				+ JSON.stringify(e.words));
	}else{
		alert("Unable to recognize your speech");
	}

});

The Demo

One of the most popular effects in mobile today is the “blur”.  Although the blur effect is most commonly associated with iOS, several notable apps such as Etsy’s Android app use this technique.

The Ti.Blur module now provides Android support so that you can use this popular effect in both your Android and iOS Titanium apps.

The initial release of Ti.Blur for Android provides two APIs make applying a Box Blur easy.  The first APIs is an extended Ti.UI.View object called, BasicBlurView.  This view works similar to a Ti.UI.ImageView and applies the blur effect to the image or screenshot provide.  The second API is a called applyBlurTo and allows you to directly apply the Box Blur effect to an image.

The following shows them module’s example app in action.

BasicBlurView on Android

The basicBlurView is a new view object within the Ti.Blur module.  This view object applies a Box Blur to any image provided to it’s image property. The blurRadius property is used to determine the level of blur that is applied.

This view would typically be used to blur an image, such as background image that you already have available in your app, or by taking a capture of the device’s current screen and providing it to the basicBlurView.

The basicBlurView is also cross-platform providing support for both Android and iOS.

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

var win = Ti.UI.createWindow({
    backgroundColor:'white', title:"Image Blur Demo"
});
var vwTest = mod.createBasicBlurView({
    width:Ti.UI.FILL, height:Ti.UI.FILL, blurRadius:10,
    image: 'your-image-here.png'
});

win.add(vwTest);

win.open();

Blurring an image without a View object

The Ti.Blur module allows you to blur an image or blob directly without the use of a View object.  This is helpful if you want to cache the image for later, or use one of Titanium’s other built in UI objects.

The following code snippet is from the example app demonstrating how to apply a blur to an existing image packaged in your app.

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

var win = Ti.UI.createWindow({
    backgroundColor:'white', title:"Image Blur Demo"
});

var imgblurredImage = mod.applyBlurTo({
    image:'42553_m.jpg',
    blurRadius:10
});

var vwTest = Ti.UI.createImageView({
    width:Ti.UI.FILL, height:Ti.UI.FILL,
    image:imgblurredImage
});

win.add(vwTest);

win.open();

Getting Started

Get started using Ti.Blur on either iOS or Android using the below links:

Source:

• github/benbahrenburg/Ti.BlurView

Modules:

• iOS
• Android

Documentation:

• iOS
• Android

Examples:

• iOS
• Android