Use Android API in NativeScript and Angular2 to Manipulate Images
One of the great things with NativeScript is the possibility to use standard web styling and templating tools (namely HTML and CSS) to build your cross-platform mobile application. Unfortunately, some features are not (yet) available, like for example the CSS
background: linear-gradient property or
filter. Fortunately though, NativeScript provides an almost full access to both iOS and Android native API, allowing to access powerful features, such as advanced image processing.
In this article, I will show you how to perform 3 image processing manipulation, using the Android API with TypeScript.
Before heading to the cases, go ahead and create a new NativeScript project using Angular2
tns create ImageProcessingApp --ng
Then, add the android platform support to the newly created application
tns platform add android
We will also need to add the package to be able to access the Android API within a TypeScript source file. Run the following command within the ImageProcessingApp directory:
npm install --save tns-platform-declarations
Then, add the following line to the reference.d.ts file
/// <reference path="./node_modules/tns-platform-declarations/tns-core-modules/android17.d.ts" />
Add a Linear Gradient Effect
This section will show you how to add a gradient background to a NativeScript View. To do this, we’re going to use the Android class GradientDrawable. Open up app.component.ts and add an AbsoluteLayout to the template, which will serve as the placeholder for the gradient background.
Notice the id we gave to the Layout. We’re going to need it in order to access it and start manipulate it via the Android API. Let’s start doing this right now:
We’ve used the ViewChild decorator around the background property, giving the id corresponding to the view we want to capture (#background). This is of type ElementRef.
Now, let’s create a new TypeScript file, hosting the function to apply a gradient background through the Android native API. We’ll place it in app/utils folder
We’e using a GradientDrawable object from the Android API. We take an array of color codes in input, transform them into an Android Color object and pass them to the GradientDrawable. The rest is pretty straightforward. And since we’re using TypeScript, we can get autocompletion suggestions straight to the objects from the library, which is really useful.
Now, we need to call this function within the app.component, with the given background View in input, and the colors we want for the gradient. Open up app.component.ts and update it like this:
We use the OnInit hook access the background View (we can’t do it within the constructor, because it would be too early as the view would not be created already). We then call the setLinearGradient function with the nativeElement of the View in input, as well as an array composed of the #FA7EFE and #9F14FC colors. The result:
Add a grayscale filter
For this effect, we’re going to use an existing image which we’ll put to the app/images folder. I’ll use the following image, so go ahead and download it:
Open up utils/background-processing.ts und add the following method:
Then, open up app.component.ts and write the following content:
Add a Blur Effect Using RenderScript
For this effect, we’re going to need a direct access to the picture we want to manipulate, and pass it to a RenderScript object. The picture I’m going to use can be downloaded here. Make sure to download the “Large” format (1356 x 2048). Then, implement the applyBlurredBackground() function, in background-processing.ts like this:
This one is slightly more complicated than the two others. The code related to the proccessing with RenderScript is actually an adapted version of the one I found on this article. You can adjust the radius constant to fit your needs, 25 is the max value (goes from 1 to 25). We need to pass two arguments: the actual image against wihch we want to apply the blur effect, and the view we want to use as a container.
Finally, we can use this function like this in app.component.ts:
Just like we did for the Gradient effect in the first section, we define an AbsoluteLayout as a template, and give it the #background id. This allows us to retrieve it as ElementRef, through the @ViewChild decorator. We use the image-source library to retrieve the background from the images folder, and then, we pass them together to the applyBlurredBackground() function, which provides the following result:
Angular2, NativeScript and tagged android, angular2, Native, nativescript. Bookmark the permalink.