In this tutorial we'll see how to use NoCode plugins.
It's recommended to follow the Hello Pal tutorial before this one.
What to do?
In this sample, we'll let the user select a photo from her album or capture a photo by device's camera and then apply some filters to those photos.
Create a new project
Let's start by creating a new project. Name it
Image Effects or whatever you want. We'll start with a Blank Template and we won't include DevPal Android content.
For more information about creating a new DevPal project, click here.
Add a new screen
We need to add at least one screen. In the
Activities tab, click the
New blank activity button. You can give any title and description to this newly created screen. For this sample, we name it
For more information about adding screens to your project, click here.
To open the
Design and NoCode window, just click the newly created screen.
Switch to the
Android XML tab and copy&paste the XML below to the text editor on this tab.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Choose photo" android:id="@+id/button_ChoosePhoto" android:layout_margin="10dp" android:layout_gravity="center_horizontal"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Take a photo" android:id="@+id/button_TakePhoto" android:layout_margin="10dp" android:layout_gravity="center_horizontal"/> <ImageView android:id="@+id/imageViewPhoto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:maxHeight="200dp" android:maxWidth="200dp" android:layout_weight="1" android:layout_gravity="center"/> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Grayscale" android:id="@+id/button_Grayscale" android:layout_margin="10dp" android:layout_gravity="center_horizontal"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Invert" android:id="@+id/button_Invert" android:layout_margin="10dp" android:layout_gravity="center_horizontal"/> </LinearLayout> </LinearLayout>
Here we have some Buttons and an ImageView to display the photo.
Within a second, DevPal Studio will parse the xml you've pasted and it will be ready to use the UI elements in NoCode section.
Before going any further it's recommended to read the NoCode basics here if you haven't yet.
Now, we're done with the UI design and it's time to NoCode!
Here are the variables generated from our UI:
Choosing a photo from gallery
What we want to do first is to let the user choose a photo from her album and display this photo on the ImageView. So drag&drop the button_ChoosePhoto variable to the NoCode Graph and select
Get with default event.
Now, click the output execution pin of newly created NoCode item and drag it to an empty area. The NoCode item list will be displayed. Search for "album", "photo", "image", or "gallery". Whichever you search for, you'll find the item
Imaging -> Select Image From Album in the list. Just select it.
You see that it just needs a
Chooser title which will displayed to the user when choosing a photo. Type anything here.
There are 3 output pins:
Cancelledoutput execution pins will be called when the user selects a photo or cancels the selecting process respectively.
Selected imageoutput pin is the photo the user chooses. Its data type is
Bitmap. (You can see descriptions and datatypes by hovering mouse over the pins' titles)
Displaying the selected photo
We want to display the selected photo to the user by the ImageView. So let's get our ImageView first by dragging the
imageViewPhoto variable to and empty area and by selecting
Get from the menu.
Now, we have our ImageView ready to use. Drag from this getter item and search for
Bitmap because the
Selected image pin of the
Select image from album item is a Bitmap. Select the
ImageView Methods -> Set image bitmap.
To make it work, connect the
Selected image pin to the
Bitmap pin as seen below.
Holding reference to the selected photo
Because we'll need to apply some effects to the selected photo and refresh the ImageView control to display this effect-applied photo, we better hold a reference of the selected photo once and use it anywhere.
To do so, let's create a new variable named
Selected Photo and set its data type to
What we need to do is to set this variable's value to the
Selected image pin of the
Select image from album item.
That's it. Now we'll use
Selected Photo variable whenever we need to access the current photo.
Take a photo from camera
We also let the user to take a photo from device camera. It's very similar to what we've done for selecting photo from gallery. Instead of
Select image from album, we'll use
Get photo from camera item. Below is the NoCode for this functionality.
Did you know?
You can duplicate a NoCode item by copying and pasting it anywhere in the NoCode graph. Just select a NoCode item and press Ctrl-C to copy and Ctrl-V to paste.
Image Effects NoCode Plugin
Now it's time to apply image effects to the selected photo.
We'll use a NoCode plugin named
Image Effects that is coming with DevPal Studio as a built-in plugin.
For more information about NoCode plugins please read this document
To use a NoCode plugin, we need to import it first. Just click the
Use NoCode Plugins button on the toolbar and check the plugins you want to import. For this project, we'll use the
Image Effects plugin, so click the checkbox of this plugin.
Once you import a NoCode plugin, its methods, its data types etc. will be available to use. You'll see its methods in the
NoCode Items List when you open it by right clicking an empty area.
First let's try the
Grayscale Image method of the
Image Effects plugin. When you add this NoCode item and look at the
Source pin you'll see that its data type is a
Bitmap. So we can connect our
Selected Photo variable to this pin.
Instead of getting the variable and connecting it to the pin, we can click the little rectangle next to the
Source pin and select
Select from variables option. This will display variables of this data type. Choose our
Selected photo variable from the list.
Result pin is a
Bitmap too. This means that we can set this result to the ImageView control directly.
The NoCode for Grayscale part shown below.
This one is very similar to Grayscale Image. Instead of
Grayscale Image, select the
Invert Image NoCode item from the list.
Full NoCode graph
At this point, click
Compile buttons and be sure it compiles without errors.
Here is the full NoCode graph of this app.
Although this is really a simple graph for such a relatively complex application, we can even optimize the NoCode graph.
Optimizing the NoCode graph is just a visual optimizing, does not affect the generated code.
We can collapse some NoCode items so they won't allocate space on the graph. Collapsing items typically applies to variable getter items. So in this graph we can only collapse the
imageViewPhoto getter items.
To collapse an item right click the getter item's pin title or pin itself and select
Next version feature
Automating the optimizing a NoCode graph is in our to-do list. So there might be a feature called Auto redesign NoCode graph in the next version.
When we've done with collapsing, the full NoCode Graph seems like this:
Running the app
We're ready to run the app on a device or an emulator.
Before running the app, you need to make sure that an Android device is connected to your computer or an Android emulator is running. For more information about running an app, please click here.
To run our app, just click the
Run button on the
Build toolbar on the main screen. This will build the app and generate the .apk file and then runs it on the connected device or an emulator.