# Hyperloop and Android - Using Third Party Android Libraries
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 (opens new window) – 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 (opens new window), 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 (opens new window)
# Setting up the app
In the next step, we create a new Titanium project with ti create
and click 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 (opens new window).
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");
Add it to our window or a view:
$.index.add(parkedView); // $.view.add(parkedView);
# Listen to events
Android TextView uses the TextWatcher () (opens new window) to listen to the change events.
const TextWatcher = require("android.text.TextWatcher");
This 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 (opens new window)
This document was adapted from Appcelerator blog post: Hyperloop and Android: Using Third Party Android Libraries (opens new window)