How To Make Android Apps From HTML

Hello developer! Are you interested in whether it is possible to make applications and games for Android on the HTML platform? Well, if you are reading these lines from an article which is called ‘How To Make Android Apps From HTML’, then you are probably interested in this. In this material you can learn how to make HTML applications and games on Android, what tools to use. Pros and cons and things like that. Fortunately, there is more than one way to write a mobile phone app. You can make a website, package it in a special way, and voila, here’s the app for you! Let’s start!

First way it’s to create with Framework + HTML + CSS + JS. In order to quickly port the game from HTML to APK, you can use a kind of framework for this sharpened. These are PhoneGap and IndelXDK. What is PhoneGap? PhoneGap was created around 2009 inside Canadian startup Nitobi as an open source framework that allowed access to native device functionality from an embedded webview. The goal of the project was to provide the ability to build mobile applications exclusively on web technologies (HTML5 / CSS and JavaScript), but with the ability to call native code. Historically, in order to create a native application for a particular platform, a developer had to be able to work with a specific integrated development environment (IDE), as well as with one or another object-oriented language, for example, C ++, Objective-C, or Java. For example, I have a basic understanding of Objective-C and Java, but web technologies are much closer to me – HTML, CSS, JavaScript. How great it would be if I could use the skills I already have when writing native apps! So, let’s get to know PhoneGap, an HTML5-enabled application development platform that allows you to build native applications using web technologies and also provides access to unique powerful APIs. Any specialist who understands HTML5 and has a deep knowledge of CSS and JavaScript can make sure from his own experience that web languages can compete functionally with their native counterparts (in fact, web languages do not write programs of only one type – three-dimensional games). Another advantage of this approach is that PhoneGap is not platform specific. This means that if you have a single code base (that is, in classic HTML), PhoneGap can easily package it natively for almost any mobile platform, in our case it’s Android. Thus, you acquire the broadest possibilities, since you significantly save time spent on cross-platform development, and also you do not have to learn a whole bunch of programming languages. Maybe you need to know more than the average web developer, but still, this is a site! This is clear! This is the same HTML, this is the same browser, the same JavaScript. I can say that this is one of the best practices in creating such applications from HTML.

Let’s move on to the main steps when creating an Android application using PhoneGap.

1. Prototypes. If you have a task (or you came up with it yourself), then you need prototypes. The prototype has a wonderful property to eliminate misunderstandings between different specialists (manager, leader, designer, programmer, client) involved in the project, to structure thoughts and prevent mistakes and unnecessary work from the early stages of development. You can test a future application using a focus group, this will help you get useful information from future users.
2. The next step is layouts. Let’s draw them.
3. Let’s choose a framework: Sencha Touch or jQuerymobile.
4. The layout process itself is no different from the standard one.
5. Emulators.
6. Programming a web application is essentially no different from programming a small website. Here are the same methods and approaches but implemented in JavaScript. The same MVC, the same patterns: singleton, linker, etc.
7. Debug the application.
8. Launching your app.

If we talk about IndelXDK then the impressions from it are damp and bad. As already mentioned, using the framework, the work is more automated from the first second. And this automation generates all the cons:

– Inhibition. Due to the large number of hung but unused libraries, performance can be quite frustrating.
– Limitedness. You are always limited in customizing your application settings. Want to advertise? RESTRICTED!
– The size. The final APK file with the HelloWord application was larger than 6MB (IntelXDK).

The second way to create such an Android application is Android SDK + HTML + CSS + JS. This is a completely different alignment. Although here you have to work with pens, you get a product of a completely different quality. And this is a fact! So where is the work done? To create and link an HTML project with Android, the Android SDK with Eclipse is used, which is included there. If you think you need to be some kind of JAVA programmer to make applications or games this way, you are wrong. It is enough to practically copy-paste certain code fragments into an Android project, to understand why you copied it (this is not difficult, we will explain) and you will get something like a template where you can then insert any games and applications written in HTML. How does it all work, a question may arise from a person who conceived to create his own game in HTML for Android. Let’s understand a little in the sequence of actions:

1. Creating a project in Eclipse.
2. Creating an HTML project.
3. Inserting HTML into Android and debugging.
4. Export and sign the application.
5. Optimizing with the ZIPalign utility.
6. Register on Google Play.
7. Publish the application there.

This is how an Android app is made from HTML, only in a few steps.

Conclusion

In the article ‘How To Make Android Apps From HTML’, I described in the most detailed way how to make an application or a game in these two ways (in fact, a template from the Android side where you can insert any HTML project along the way, adjusting the small details of the Android template for the needs of the application / game). Maybe you can hire HTML developer for your project. Thanks for reading!