Hyperloop and Android: Using Third Party Android Libraries

Guest poster, Michael Gangolf, has been using Titanium since 2010, been a Titan since 2017 and Android lover since the beginning. You can follow him at @michaelgangolf or on Github at https://github.com/m1ga

With Hyperloop, you can use native Android libraries directly in Titanium using Javascript. In this short tutorial, we will use an existing third party AAR library in our app.

The library we will use is Parked Text View – which is basically a textfield with a static and a variable text:

The AAR file

First, you will have to download the compiled version of the library or build it yourself using gradle. Since the binary is not available in this repo or on maven central, you have to clone the repo and run `gradle build` in the main folder. The AAR file is included in the demo github repo at: https://github.com/m1ga/hyperloop.parkedText

The app

In the next step, we create a new Titanium project with `appc new` and say Yes to “Would you like to enable native API access with Hyperloop for this app?”.

We create a folder called “app/platform/android/“ and copy the AAR file into this folder.

The Parked Text github repo has a Usage section with some information on how to include the view but some parts are missing, so we have to look at the main Java file which is located here.

There we can find the basic constructor public ParkedTextView(Context context) and some useful public methods – setHintText(), setParkedText() or setParkedHintColor() – which we are going to use.

Importing classes

In Java, you would import a class like this:

	import android.view.View;
	View view = new View();

the equivalent in Hyperloop would be:

	const View = require("android.view.View");
	const view = new View();

Before we can create the ParkedTextView object, we need to create the context that is used inside the constructor:

	const Activity = require("android.app.Activity");
	const context = new Activity(Ti.Android.currentActivity);

The ParkedTextView class is com.goka.parkedtextview.ParkedTextView, which needs to be imported like this:

	const ParkedTextView = require("com.goka.parkedtextview.ParkedTextView");
	const parkedView = new ParkedView(context);

Use the component

Now, we have a JavaScript UI component we can use in our Titanium project in a way we use normal UI components and call some methods:

	parkedView.setParkedTextColor("#000000");
	parkedView.setParkedHintColor("#999999");
	parkedView.setParkedText(".slack.com");
	parkedView.setHintText("your-team");

and add it to our window or a view:

	$.index.add(parkedView);	// $.view.add(parkedView);

Listen to events

An Android TextView uses the TextWatcher () to listen to the change events.

	const TextWatcher = require("android.text.TextWatcher");

It provides three listeners that we assign to Javascript callback functions:

	const textWatcher = new TextWatcher({
		onTextChanged: onTextChanged,
		afterTextChanged: afterTextChanged,
		beforeTextChanged: beforeTextChanged
	});
	function beforeTextChanged() {
		console.log("Before: " + parkedView.getText());
	}
	function onTextChanged() {
		console.log("Changed: " + parkedView.getText());
	}
	function afterTextChanged(s) {
		console.log("After: " + s);
	}

Layout

The last step is to apply a layout, so it will take as much space as needed (like Ti.UI.SIZE). To do that, we use the Android LayoutParams. First, import the classes:

const LayoutParams = require("android.widget.FrameLayout.LayoutParams");
const ViewGroupLayoutParams = require("android.view.ViewGroup.LayoutParams");

Then, apply the layout:

const layoutParams = new LayoutParams(ViewGroupLayoutParams.WRAP_CONTENT, ViewGroupLayoutParams.WRAP_CONTENT, Gravity.CENTER);
parkedView.setLayoutParams(layoutParams);

Done

The app is ready now! And, the library will be used in our app and receive the text the user types in.

The full example is available at https://github.com/m1ga/hyperloop.parkedText

1 COMMENT

  1. Great Artical Michael ?? I think articals like this are need to make developer comfortable with hyperloop. I am using hyperloop for anroid app. My iOS app crashes randomly on device when I set run-on-main-thread to true. So for iOS I am still using old way.

    Few months back, I tried to implement Material Snackbar “MaterialComponents/Snackbar” on iOS using hyperloop but when I use action handler app starts crashing.

Comments are closed.