A Super Easy Guide to Convert Your Website Into a Mobile App in 4 Steps


A Super Easy Guide to Convert Your Website Into a Mobile App in 4 Steps
Convert Your Website Into a Mobile App


Having a website and a mobile app for that website is now the need of everyone. So if you have a website and want to make a mobile app of that website too and don't know how to do it, you are at the right place. In this guide, you can convert your website into android app in just 4 easy steps. Let's get started.

Important Note

Before starting the android studio guide, I want to recommend you to have a good and stable internet connection to avoid any kind of inconvenience, disturbance, uneasiness and cumbersomeness.

Step  1: Create an Android Studio Project With the Name of Your Website

The first step of converting your website into mobile app is to create an android studio project with the name of your website.
Create new android studio project
Create new android studio project

Select a Project Template

Just choose the empty activity and click next.

Select a Project Template
Select a Project Template

Configure Your Project

Write the name of your project on which you want to make your app. This can also be the name of your website. You can read further about configuring your project here
Just make sure your configuration is same as it is and then click on finish.
Configure your project
Configure your project
After clicking the finish button and your first step will be completed. Android Studio IDE will take some time to build your project and after successful building of your project you can move to step 2.

Step 2: Editing the XML File

Second step is to edit the xml file of your project. There is no need to worry, I've provided you the code. You just need to paste this code into the xml file of you project.

Here is your code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<WebView
android:id="@+id/webview1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true" />

</RelativeLayout>

Step 3 : Editing Your Java Code

The third step is to edit your java code and I have also provide you that code. You just need to change the website address of my blog "www.maslgamestudio.com" with your website address. and make sure that you also change the package "com.masl.webviewapp" with the package of your app.

Here is your code:

package com.masl.webviewapp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

WebView webView = (WebView) findViewById(R.id.webview1);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.loadUrl("https://www.maslgamestudio.com");
webView.setWebViewClient(new WebViewClient());


}
}

Final Step 4: Adding Internet Permissions in Manifest File

This step is very important as to open a website, internet is required. A mobile app cannot use internet without having permission and this permission must be added at the time of development in it's manifest file. just paste this code into your manifest file and it must look like this.

Here is your code:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.masl.webviewapp">
<uses-permission android:name="android.permission.INTERNET"/>

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>
After this you need to build your project. If you need guide to build your project, you can check out my article here.

Result:


Suggestions/Queries

If you have any suggestion or query you can comment below or you can contact us using our contact us page.

Post a Comment

0 Comments