Make an Android app with Kodular

4 min readJul 16, 2022

You will do

No need for any prior knowledge of coding
Only need a valid email ID to sign up for the Kodular account.

Step By Step Instruction

Step 1: Go to the official website

Here, after landing through the page, click on “Get started” and create an account, and also you can log in with other options.

Here is the simple attached.

After successful login, you will redirect to the page where you can create your own app without any code.

Step 2: Create an App

On this page, you will find two options, either you can create your project from scratch or can import your already created project.

In our case, we will go with the first option.

So, click on “Create project” and give it the name of your project, in our case the project name is “GardenTrialProject”.

Step 3: Use Components and get familiar with the interface

Now, in this step, you will see a similar kind of interface.

In the left section, you will find many tools related to the user interface, layout, media, maps, social, storage, etc. which you can drag and drop to the view screen and apply accordingly.
Here it is showing a mobile view where you drag your user interface components and build your app without writing a single line of code.
This section listed all the components which we use in our app.
Here it tells about each component property that we select by clicking on the particular component.

Step 4: Make a Demo App

Here we create a Demo App, which will have two screens, screen1 and screen 2.

In this first screen, we have a button component that has the functionality that whenever the user clicks the button, then will redirect to another screen2. Where we have an image.

So, it’s a simple application for demonstrating the workflow and quick start with kodular.

First screen

Drag and drop the button component from the left side Palette, and from the right-hand section, you can change the property of the button.

For example, change the color, font, text style, etc.

2nd screen

And also on the second screen, just select the image from the left section and drag on the drop to the view section.

After that, go to the property section of the image and (2) upload an image, and (3) check the “scale picture to fill” options if needed.

Now, let’s come to the logic and functionality part that we can achieve via the block section.

So, implanting the logic that while clicking the button we should redirect to another screen, we require a button click event and control block.

Go to the left section and by clicking we will be able to see all events, methods, and properties.

Choose event and drag and drop to the “Viewer” screen and also choose the control block and attached through the event and from the drop-down of control section and choose screen 2.