The mobile data has long overtaken the desktop in terms of traffic volume, and developers are faced with the question: what to choose - a native application or a website? A modern approach allows you to combine these worlds, creating hybrid solutionsthat work like websites, but look like full-fledged apps. This is especially true for businesses that need a presence on Google Play without the expense of maintaining two separate code bases.
The process of creating such a product requires an understanding of Android architecture and how web technologies work. You don't need to be an expert in Java or Kotlin to get your project started, but basic knowledge of HTML, CSS, and JavaScript is a must. In this article, we will look at how to turn a regular website into a mobile application using modern tools and proven techniques.
There are several implementation paths, from simple PWA to using special frameworks like Cordova or Capacitor. The choice of a specific method depends on what functions of the smartphone you need: access to the camera, GPS, file system, or simply displaying content. Let's dive into the technical details.
Choosing an approach: PWA vs. native wrapper
The first thing you'll face is the choice of technology. The simplest and most modern way is Progressive Web Apps (PWA). These are websites that use the browser's capabilities to work offline, send push notifications, and install on the home screen. They do not require compilation into an APK file in the classical sense, but Google Play now allows you to publish them through Trusted Web Activity.
An alternative option is to create a native shell (WebView). In this case, you create a minimalist Android app that is essentially a bare-bones browser that opens your website. For this, tools like Android Studio and languages Kotlin or Java are used. This approach gives more control over system permissions and integration with the OS.
⚠️ Attention: Google Play has tightened the requirements for applications that are simply copies of sites. Your application should provide a unique user experience that is different from the mobile version of the site in the browser.
The third way is to use cross-platform frameworks such as Flutter or React Nativethat allow you to write code in JavaScript or Dart and compile it into native code. However, if your goal is to “wrap” an existing website, then the first two options will be preferable.
- 🚀 PWA - ideal for content projects and online stores.
- 📱 WebView - gives access to native Android APIs for web content.
- 🛠 Frameworks - the best choice for complex interactive logic.
It is important to understand the difference in performance. The native shell can work faster when the Internet is poor, since some resources can be cached inside the application. PWAs are completely dependent on the capabilities of the browser Chromeinstalled on the user's device.
Preparing a web resource for mobile adaptation
Before packaging the site into an application, you need to make sure that it is ready for this. Mobile screens have different sizes and pixel densities, so adaptive layout is not an option, but a necessity. Use CSS media queries and relative units to ensure the interface looks consistent on any device.
The critical element is the manifest file manifest.json. It is he who tells the operating system how your application should look after installation: what its icon, name, screen orientation and theme color are. Without a correctly configured manifest, the browser will not prompt the user to install the application.
{"name":"My Application",
"short_name":"App",
"start_url":"/",
"display":"standalone",
"background_color":"#ffffff",
"theme_color":"#000000",
"icons": [
{
"src":"icon-192.png",
"sizes":"192x192",
"type":"image/png"
}
]
}
You should also optimize the download speed. Mobile networks are often unstable and users won't wait long for downloads. Compressing images, minifying scripts, and using modern formats like WebP will greatly improve User Experience.
Use Service Workers for static caching. This will allow the application to open instantly even in the absence of the Internet, showing previously loaded pages.
Don't forget about security. Google Play requires that all applications use the protocol HTTPS. Sites without an SSL certificate will be marked as unsafe, which may result in refusal to publish or blocking of functionality.
Creating a project in Android Studio
To create a native shell, you will need a development environment Android Studio. This is an official tool from Google that contains everything you need to build, test and debug applications. Installation may take time, since the package weighs several gigabytes.
After installation, create a new project by selecting the "Empty Activity" template. Select Kotlinas the programming language, as it is currently the preferred one for Android development. Java is also supported, but new API features are often released for Kotlin first.
Most of the work will be done in the file MainActivity.kt. Here you need to initialize the component WebViewthat will render your website. It is important to configure the WebView settings correctly so that it behaves like a browser: enable JavaScript, zoom support and local storage.
☑️ Setting up an Android project
Pay attention to the minimum SDK version. It is recommended to set the value to at least 21 (Android 5.0) to cover the vast majority of active devices. Older versions of Android are practically not used and their support will only increase the size of the application.
| Parameter | Value | Description |
|---|---|---|
| Min SDK | 21 (Lollipop) | Minimum Android version |
| Target SDK | 34 (Android 14) | Version for which it is optimized |
| Language | Kotlin | Programming language |
| Build Config | Gradle | Build system |
In the activity code you need to add navigation processing. If the user clicks the back button in the application interface, he should return to the previous page of the site, and not close the application. This is implemented through the method onBackPressed.
Configuring WebView and permissions
The component WebView requires careful configuration. By default, many features are disabled for security reasons. You need to explicitly enable JavaScript, otherwise the site's dynamic content will not load. It is also worth setting up caching to reduce the load on the network.
Pay special attention to the file AndroidManifest.xml. This is where all the permissions that your application requires are written down. To work with the Internet, you definitely need a line <uses-permission android:name="android.permission.INTERNET" />. Without it, the application will not even try to load the page.
⚠️ Attention: Starting with Android 9 (API 28), traffic is encrypted by default. If your site only runs over HTTP, the app will not be able to load content. You must either switch the site to HTTPS or add an exception to the security configuration.
If your application needs access to the camera, microphone, or geolocation, you must not only write permissions in the manifest, but also request them from the user at runtime. In Android this is done through the mechanism Runtime Permissions.
webView.settings.javaScriptEnabled = truewebView.settings.domStorageEnabled = true
webView.settings.allowFileAccess = true
webView.webChromeClient = WebChromeClient
To implement access to native functions (for example, take a photo and send to the server), the interface JavaScriptInterfaceis used. It allows web code to call native Kotlin methods, creating a bridge between web technologies and the operating system.
Issues with Cookies and Sessions
In WebView, cookies may not persist between sessions by default. Use CookieManager to force the saving and synchronization of authorization data.
Adaptation of the interface and navigation
Users are accustomed to certain behavior patterns in applications. The top Action Bar should contain the title or logo, and the bottom of the screen can be reserved for navigation. It's important to hide standard browser elements like the address bar to create the illusion of a native app.
Gesture handling is another important aspect. Websites often use swipes for navigation, which can conflict with Android's system gestures. It is necessary to test the application on devices with different types of navigation: button and gesture.
- 🎨 Hide the scrollbars for a clean interface.
- 🔙 Implement the correct operation of the "Back" button.
- 🔄 Add a loading indicator when switching between pages.
The loading indicator is especially important. In the browser we see a progress bar at the top, but in the application it is not there by default. Implement your own progress bar or a spinner that disappears after an event onPageFinished.
Don't forget about screen orientation. For most applications, especially utilities and stores, it is better to lock landscape mode, leaving only portrait mode. This simplifies the layout and prevents display errors on tablets.
Build, test and publish
When the code is ready, the assembly stage begins. In Android Studio this is done through the menu Build → Generate Signed Bundle / APK. To publish on Google Play, you will need a file format AAB (Android App Bundle), which allows Google Play to optimize the size of the application for each specific device.
Before release, be sure to test on real devices. The emulator is good for initial debugging, but it cannot reproduce all the nuances of working with hardware, memory and network. Test the application on different versions of Android, from the minimum supported to the latest available.
⚠️ Attention: Google Play policy requires that applications created by new developers first be tested in a closed track with 20 testers for 14 days.
To publish, you need a Google Play Console account. Registration costs a one-time fee of $25. After uploading the file and filling out the description, screenshots and categories, the application will be sent for moderation.
The verification process can take from several hours to several days. Moderators check the application for compliance with the rules, the absence of malicious code and the functionality of basic functions. If rejected, you will receive a detailed report indicating errors.
Use AAB format instead of APK for publishing. This is a modern standard that reduces the size of the downloaded file for the user by 30-50%.
Frequently asked questions (FAQ)
Do you need to know Java or Kotlin to make an application from a website?
For the basic shell (WebView), minimal knowledge is enough to copy the template code. However, to access phone functions (camera, files) and publish to the Store, a basic understanding of programming logic is required.
Is it possible to monetize such an application?
Yes, you can use advertising networks such as Google AdMob, or implement in-app purchases. However, integration of purchases via WebView requires the use of a special JavaScript interface.
Will the application work on iPhone?
The described method is only suitable for Android. For iOS (iPhone), the process requires the use of Xcode, the Swift language and a Mac device. PWAs work on iOS, but with limitations.
How to update content in the application?
If you use the WebView or PWA approach, the update occurs on the server side. You don't need to republish your app on Google Play to change text or images on your site.
Creating a web app on Android is an affordable way to enter the world of mobile development. By following these steps, you can create a working product that will be convenient for millions of smartphone owners to use.