“Show me your phone, and I’ll tell you who you are.” You can paraphrase the famous phrase to describe how connected we are today with smartphones. Indeed, apps can tell a lot about us. Outgoing people have a phone full of social networks, athletes have workout trackers, and food lovers have a scattering of deliveries from restaurants. And someone develops all these applications, makes them useful and convenient assistants.
In this article, we will talk about how to learn how to create mobile applications from scratch. First, we will consider all the stages of development, and then we will try to develop it ourselves from scratch. And all this without a single line of code. Join us – let’s do it together!
Stages of mobile application development
To understand how to develop a mobile app, you first need to learn more about the steps involved in building one. This process only seems complicated and needs to be clarified. There is nothing supernatural in it if you understand it properly. All application development comes down to several stages:
- An idea.
- Prototype development.
- Development (writing code).
- Test and debug.
- Release.
Now let’s talk a little about each of them in turn.
An idea
An idea is the first step in creating a mobile application, which is at the heart of every product. Ideas are usually formed from the needs of the people who use the applications. Needs are all around us, and applications such as ordering a taxi, delivering food, renting a scooter, communicating, and many others satisfy them. That’s why the most requested apps are those that help people and make their lives easier. If you also want to create a cool application, ask yourself: “What problems could it solve?” The answer depends on whether the application will be useful and popular with users.
In this article, we will create a coloring application together. The idea is to help distract and occupy a person with something interesting in their free time. This means that it is suitable for everyone: both adults and children.
Prototype development
This stage includes the development of the visual component of your product. Specialists determine the application’s color scheme and create the design of objects such as buttons, windows, widgets, etc.
Often a UX/UI designer develops a prototype. Such a specialist can imagine the application layout, where the buttons and widgets will be located, and what functions they will perform. The designer creates the main screen of the program and other pages. At the same time, it indicates the logical connection and transitions between them. This usually happens with the help of special prototyping services, such as Marvel, InVision, Proto.io, Pixate, Framer, and others.
Code writing
This is where the programming phase begins, that is, the creation of the application code. At this point, the designer has already handed the developer a project prototype, where he described in detail the main desktop, buttons, and functionality. In other words, he told me how it all should work. After receiving a clear technical task, the programmer begins to write code for each element. For example, for a login button or for sending a message.
Test and debug
The testing phase begins when the first version of the application has already been created. If the company has a department of testers, they can see the code itself and how the product works in general. These specialists’ purpose is to find code errors and pass them back to the development department. If the company is small or one developer creates the application, he can ask users to become testers. In exchange for finding bugs, it will give a group of users testing the application more functionality. Ultimately, everyone wins – the developer gets help, and the audience gets new opportunities.
Release
When you understand that the project is ready and can be released, look for a platform where they sell and buy mobile applications. For a certain percentage of the sale, such sites are ready to host your program and help distribute it to many users. The top sites are:
- Google Play;
- App Store;
- Appland;
- Samsung Apps;
- Huawei App Store.
When we create our application, we will analyze each stage in detail in the second part of the article. You have to be both a designer and a programmer! We can implement all the functions these specialists perform in the App Inventor mobile application designer. This is a powerful application development tool that is designed specifically for beginners. In it, you can create products for all the needs of life, from an alarm clock to games, and figure out how to make your application.
Guide: how to create a mobile application for Android
Stage 0. Get acquainted with the App Inventor service
Let’s feel like developers and try to create our mobile applications from scratch! As we said above, we will take a coloring book for children and adults as a project idea. We will create it in the well-known visual development environment, App Inventor.
- Create a new project.
1. Follow the link to the main page of the App Inventor website. To start creating a mobile application, click on the Create Apps button! The site will then ask you to sign up with your Google account. We do this and accept the license agreement.
2. In the tab that opens next, indicate that we want to create a new project. Projects are created either through the menu button “Projects” – “Start a new project,” or through the welcome window button Start a blank project.
3. What do you need to create an application in the first place? Give him a name! We’ll do it in the next window. Since our application creates graphical sketches, let’s call it SkyPaint.
4. After that, we will get to the designer screen for creating projects – the development environment. Its interface is quite easy and takes little time to learn. The basis of this service is creating a mobile application using the tools of two desktops. Let’s analyze them further.
Stage 1. Adding the necessary components to the screen
Now that you’ve seen the power of App Inventor, it’s time to start your project! Below we have compiled a step-by-step guide on creating your Coloring Book app with different difficulty levels. The path to our project will begin with drawing on the screen. Like artists, we will paint on canvas. To do this, follow the instructions:
In the program menu “Drawing and Animation” we find the component “Canvas” and drag it to the screen.
In the settings, specify the dimensions “Fill parent.” These settings will stretch the canvas to fill the entire screen of the designer.
Next, select the width of the line and the color of the future drawing in the properties of the canvas.
Step 2: Add Buttons to Change the Canvas Background
Now that we’ve set up the canvas, it’s time to add some buttons that will change the background on click. This will help make our application as interactive as possible.
Go to the “Location” components. This area allows you to arrange certain interface elements in a horizontal or vertical position. We select the horizontal position (hereinafter – GR).
In the GR property, select the width size according to the “Parent Content.” Now our area is ready for the location of the various components. We will place the buttons.
Drag the three buttons from the “User Interface” service tab inside the horizontal position area and make sure they appear in the list of components.
In the properties of each button, change its name, which will be displayed on the screen. It is important to give each button a name. We have 3 of them in total, so there will be three names: Lite, Middle, and Hard. These will be the difficulty levels of our coloring.
To beautifully place the buttons, set the width of each element in the program according to the “Parent Content”.
Through the “Media” constructor window, add three drawings for coloring. You can take our material – Lite, Middle, and Hard – or use your own.
Let’s check if the pictures are displayed on the “Canvas.” To do this, find “Canvas” in the components window and go to its properties. This tab has a Background Image option. If we correctly transfer the media files to the program, a list of coloring pages that have been loaded will drop out when you click on this option. Select one of them and it will appear on the phone screen.
Health check
Before making the application available to everyone, you must run it to conduct health tests. Yes, we went through only two stages, but it is important to test the application after each stage of development. Let’s figure out how to do it.
To get started, download the “MIT App Inventor” application from the official website.
Let’s return to the App Inventor service. In the program menu, select the “Connect” tab. In the drop-down menu, select the item “AI Assistant.”
A QR code would appear on the screen if we did everything correctly. It can be opened using the MIT App Inventor mobile application, the Scan QR code button.
Scan the code, and the application will appear on your phone in working order! When the verification is over, move on to the next stage of program development. And remember: it is important to test the application from time to time.
Step 3. Add buttons to change the color and thickness of the brush
By this point, we have already understood that the process of creating an application in the App Inventor designer is simple. In fact, we have already formed the elements: arranged them horizontally, and added buttons and media files. Our next task is to use the service to create buttons for the color palette in our application.
1. Add a new horizontal layout at the bottom of the screen to place the new color buttons inside.
Important
Be sure to see that the buttons are displayed exactly in this horizontal arrangement, and not in the arrangement on top, where the coloring difficulty selection buttons are located.
2. We remove the names of the buttons so that only colors are displayed.
3. In the properties of each button, select the background color.
Important
The button’s background color in the future will display the color of the brush with which we paint the coloring.
4. Apply the width of all elements to each button according to the “Parent content.”
Now we need to add a tool to help increase the brush width. It will come in handy when we paint our coloring book. We will use the Slider tool in the mobile app builder to do this. It is located in the tool palette on the “User Interface” tab.
1. Drag the “Slider” down the service screen, preferably above the color selection buttons.
2. In the “Slider” properties, select the minimum value – 10 and the maximum value – 100. This will be the brush width range.
After that, we will rename the names of the buttons as the corresponding colors are called. Ready! We have completed the prototyping phase in the App Inventor constructor. It’s time to program our buttons so that they perform the actions we need. More on this in the next section.
Stage 4. Programming the application
As we have already said, in App Inventor, you can code components without even knowing programming languages. We will do this on the App Inventor “Blocks” desktop, which we met at the very beginning of the article.
Let’s start by programming the width of the brush through the “Slider” tool.
1. In the list of blocks, click “Slider”. Select “when the Slider 1. Position is Changed” and drag it to the program workspace in the opened list of blocks for this element.
2. In the list of constructor blocks, select “Canvas.” In the opened list of blocks for this element, select “assign Canvas 1. Line Width” and nest the block inside the block “when Slider 1. Position Changed”.
In the block “when Slider 1. Position Changed,” click on the button “get Pointer Position” and drag this block to the end of the line “assign Canvas 1. Line Width”.
Now we need to code the color picker buttons in the same service. They are all programmed similarly, so that we will consider the general algorithm.
1. In the list of blocks, select a color. Let’s say it’s blue. Select “when Blue. Click” and drag it to the designer’s workspace in the list of blocks for this element.
2. In the list of program blocks, select “Canvas.” In the opened list of blocks for this element, select “assign Canvas 1. Paint color” and put the block inside the block “when Blue. Click”.
3. In the list of blocks, select the blue color again. In the opened list of blocks for this element, select “Blue. Background Color” and drag to the end of the block line “Assign Canvas 1. Paint Color”.
4. Repeat all these steps for other color buttons to complete this mobile application step.
Ready! We have coded the width of the brush through the slider tool and the color palette. It’s time to start programming the render event. Our task is to make the program perceive our finger as a brush; when we press the screen with our finger, we can draw with color.
Drawing takes place on the canvas, so it is advisable to program the canvas in the mobile application designer to touch it. Any point (touch) has its own coordinates along the X and Y axes. Thus, the program understands that the point is located at a certain address.
1. In the list of blocks, select “Canvas”. In the opened list of blocks for this element, select “when Canvas 1. Dragged” and drag it onto the workspace. This block will tell the program that our finger is a brush.
2. In the list of program blocks, select “Canvas.” In the opened list of blocks for this element, select “call Canvas 1. Draw a Circle” and put the block inside the block “when Canvas 1. Dragged”.
3. In the block “call Canvas 1. Draw a Circle,” click on the button “get the current X” and drag it to the centerX sector of the block “call Canvas 1. Draw a Circle”.
4. In the block “Call Canvas 1. Draw a Circle,” click on the button “Get current Y” and drag it to the centerY sector of the block “Call Canvas 1. Draw a Circle”.
5. In the list of blocks, select “Canvas.” In the opened list of blocks for this element, select “Canvas 1. Line Width” and drag it to the radius sector of the block “call Canvas 1. Draw Circle”.
Excellent. We have almost reached the final stage of creating a mobile application! It remains only to configure the buttons for changing backgrounds, i.e. different drawings, through the service, and we can show our coloring to this world 🙂
1. In the list of blocks, select the “Horizontal Arrangement” of the coloring background selection buttons. If your buttons are named “Button 1”, “Button 2”, and “Button 3”, we recommend renaming them to Lite, Middle, and Hard.
2. Click on the Lite button in the opened list of blocks for this element, select “when Lite. Click,” and drag it to the program workspace.
3. In the list of blocks, click on “Canvas.” In the opened list of blocks for this element, select “assign Canvas. Background picture. Lite.png” and move it inside the block “when Lite. Click”. If you use a different picture, the title may be different.
4. Do the same with the Middle and Hard buttons.
Coloring book is ready! We have an application where you can draw and change different pictures. Only one function is missing – an eraser. Let’s add it to the same constructor.
1. Let’s go to the “Designer” mode of the App Inventor service and add a new button. “Cleaning.”
2. Next, we go to the “Blocks” desktop.
3. In the list of blocks, select “Cleaning”. If you havItalled “Button 1,”. In the o, if you haven’t renamed the buttonpened list of blocks for this element, select “when Cleaning. Click”.
In the list of blocks, select “Canvas.” In the opened list of blocks for this element, select “call Canvas 1. Clear” and move it inside the block “when Clearing. Click”.
How to save an application
Accept my congratulations! You just figured out how to make your application and practiced it. If you want to share your work, there are a few steps you need to follow.
Go to the Android App menu item.
Choose apk format.
Save the file. Now you can publish it and send it to all your friends.
App Inventor is one of the best builders to help you learn the basics of mobile app layout. It is suitable for a beginner who does not know the basics of programming but wants to understand how to create a mobile application for Android.
This article taught us how to create your application and covered the main steps. If you want to develop your skills further and develop new projects, we are waiting for you at Skysmart programming courses. There we will teach you how to create useful and exciting projects, including games. And all this without code!
