Hyperloop: Working with Native Controls in Android

In this post, we’re going to provide a quick introduction to Hyperloop by adding an Android Button to a Titanium Alloy project and adding a click event handler. We’ll be writing code in JavaScript and using Hyperloop to access the underlying Android SDK, working directly with the android.widget.Button class.

This example focuses on Android. For the iOS-equivalent of this post, see Hyperloop: Working with Native Controls in iOS. Also, check out our Hyperloop Samples that include many native examples including a cross-platform solution for working with native buttons.

NOTE: This post assumes you’ve created a new Alloy project with the 5.4.0.GA SDK and added Hyperloop support (available in Pro and Enterprise subscriptions). You can find out more here.

Let’s get started.

In order to access native objects with Hyperloop, you have to require the relevant libraries you’ll need in your project. If you’re familiar with Java, this is essentially the same as using the import keyword. If not, you will get to know the concept in a second.

Since we are working with the class Button, we need to require it from its native namespace android.widget.Button. We do the same for all other native classes we need, including Activity which is called using Ti.Android.currentActivity in order to get a reference from our Titanium app to the native source. In your index.js controller, add the following code:

var Button = require("android.widget.Button"),
    LayoutParams = require('android.widget.FrameLayout.LayoutParams'),
    Activity = require('android.app.Activity'),
    Color = require('android.graphics.Color'),
    TypedValue = require('android.util.TypedValue'),
    Gravity = require('android.view.Gravity'),
    OnClickListener = require('android.view.View.OnClickListener'),
    currentActivity = new Activity(Ti.Android.currentActivity);

After all relevant classes are required and currentActivity is available in your controller-scope, we can proceed to create the button:

var button = new Button(currentActivity);

Pretty straight forward, right? But we want more, so let’s add button-text and background-color as well. Note that you can set any color you want to use. Check out the official Android documentation for more possible constants and play around with them. We use a blue color here:

button.setText("CLICK ME");

To match our previous iOS example, we also set a width and height for the button. Since Android is density-specific to support multiple screen specifications, we use a native utility method to translate the 200×50 size to a density-specific size. In addition, we pass the gravity-constant Gravity.CENTER to the layout parameters to place the button in the center of the screen:

var width = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 200, currentActivity.getResources().getDisplayMetrics());
var height = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, currentActivity.getResources().getDisplayMetrics());
var layoutParams = new LayoutParams(width, height, Gravity.CENTER);

Finally, we want to add some interaction to the button, so we implement a native click-listener using the previously imported OnClickListener class. Think of it as the button.addEventListener("click") in Titanium:

button.setOnClickListener(new OnClickListener({
    onClick: function(v) {
        alert("button pressed!");

That’s it! We are good to go. Let’s add the button to your window (or any other Titanium view you are testing with) and open it:


So, what more can you do with this?

You just implemented a native Android button with Hyperloop, Titanium and Alloy – Congrats! Now it’s time to check out more interesting APIs and UI elements. How about the Android [SnackBar], [BlurViews] or a third-party library? Since you are no longer restricted to just the Titanium APIs we provide, you can integrate whatever you want to.

We hope you found this basic intro useful. We’ll continue to add content and more advanced examples. In the meantime, be sure to check out the Hyperloop Samples for more examples of how to work with Hyperloop!

Code strong! ?