Introduction :
Converting a website to a mobile app using Android Studio is a very interesting project. Using the Android Studio IDE, you can create a WebView-based application to transform a website to a mobile application. The WebView allows you the integration of web content into Android application.
In this article, I shall explore you how to convert your website into a basic Android app using Android Studio IDE. Here, I show you how to set up your Android Studio project to configure the WebView component and run your app on a phone.
What is WebView :
A WebView is a component of the Android Studio IDE. The WebView allows you to embed web content (HTML, CSS and JavaScript) within a mobile (Android) application. It allows you to display web pages within your app. You can use the WebView component to load and display web content inside Android application. This can be useful for displaying dynamic content from a website.
About the application :
This is a simple Android application to display any website on a mobile phone. In this app, I display my site (puskarcoding.com) on my phone. When you create the app on Android Studio, you can see puskarcoding.com will be displayed without any browser.
Step for create the application :
To convert a website to a mobile app using an Android Studio IDE is very easy. Following the below steps, you can quickly create a basic web app that displays your website on a mobile phone.
Step 1 :
At first, open the Android Studio on your pc. Now, create a new project with empty activity and name the project such as “my_website”. Here, I build the project with java language. If you do not know how to create Android app, you can follow my link.
Step 2 :
After sometime, you can see a default project is opened on your Android Studio IDE. First, open the AndroidManifest.xml file. Here, you have to add the Internet permission. So you can add the following code inside the tag. It should be before the tag.
<uses-permission android:name="android.permission.INTERNET" />The AndroidManifest.xml file looks like this.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.my_website">
<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/Theme.My_website">
<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>Step 3 :
After that, open the activity_main.xml file and replace the default code with the following code.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/web_view"
tools:layout_editor_absoluteX="179dp"
tools:layout_editor_absoluteY="312dp" />
</android.support.constraint.ConstraintLayout>Step 4 :
Lastly, open the MainActivity.java file and replace the default code with the following code. Here, you have to keep the first line same as your default code such as “package com.example.my_website;”
package com.example.my_website;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
WebView web_view;
WebSettings web_setting;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
web_view= (WebView) findViewById(R.id.web_view);
web_setting = web_view.getSettings();
web_setting.setJavaScriptEnabled(true);
web_view.setWebViewClient(new WebViewClient());
web_view.loadUrl("https://www.puskarcoding.com");
}
@Override
public void onBackPressed() {
if(web_view.canGoBack()){
web_view.goBack();
}
else
super.onBackPressed();
}
}Run the application :
To run the app on your phone, connect your phone to computer via USB cable (data cable). Now, click the green “Run” button in the Android Studio IDE. After that, the app will be installed and launch on your device. You can see your app on a phone like this image.
Conclusion :
Finally, you have learned how to convert a website to a mobile app using Android Studio IDE. This is a very basic Android app which displays your website on the phone. Now, you can customize your web app as you like. Thank you for visiting my site.
