Hariom
Prajapati
02 Jul 2022
ArticleIn this tutorial, we will learn that how to convert your blogger, wordpress or any other website to a professional Android app using Android studio.
First, let us see what android studio is
What is Android Studio?
Android studio is a very popular and fastest tool which use to building an app for every type of Android devices for free.
So now using this Android studio we will build a professional website.
Follow all the below steps to turn website into app -
Step 1 - Download Android studio
In step 1 you need to download the Android studio app from the internet.
- Open your web browser on a laptop or computer.
- Now search for "download Android studio".
- Now click on the first search results shown in below figure.
- Let's click on "download Android studio" shown in the below figure.
- Now you need to read term and condition page and then tick on agree button and then click on "download Android studio for window".
- After clicking on the download button your Android studio will start downloading.
- After downloading you need to install the Android studio.
Note :- Installation process may take longer time according to your Internet speed and specification of your laptop or computer, so keep waiting.
Step 2 - Now open your Android studio app.
Step 3 - click on create new project.
Step 4 - After that select "empty activity" and process to next shown in the below figure.
Step 5 - Now you will see a new interface in which you have to write.
- Name - Name of your application.
- Package name - Package name will automatically generate after you type name.
- Save location - Remains it same.
- Language - Change language to "Java".
- Minimum SDK - Remains it same as "API 16: Android 4.1 (jelly bean).
- Checkbox - Don't take on the checkbox.
Now click on the finish button.
Step 6 - After follow step 5 you need to wait for some time until the loading process not completed which shown in the below figure.
Step 7 - After the loading process is done then you will see "manifests" folder on left side.
Step 8 - Now open "manifests" folder and then double-click on "androidManifest.xml".
Step 9 - Now copy the below code.
Code
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
Step 10 - Now paste it on "androidManifest.xml" file after package name of your app, generated in step 5 as shown in figure.After that Press ctrl + a and then Press ctrl + s .
Step 11 - Now go to "activity_main.xml" file and select all code of "Textview" and delete them.
Step 12 - Now delete all the code of last line in "activity_main.xml" file but keep only "</layout>".
Note :- When you delete this code then you will see that the above code on second line will automatically deleted.
Step 13 - Now write "Relative" before "layout" without space as shown in below figure.
Step 14 - Now click on "design" on the right side of the window.
Step 15 - Now click on palette and search for "WebView".
Step 16 - Now drag and drop "WebView" inside the white rectangular box.
Then the rectangular box look like
Step 17 - Now click on code button which is in the right side of window.
Step 18 - Now copy the below code.
Code
android:id="@+id/webview"
Step 19 - Paste the code below of "web view" as shown in figure.
Step 20 - Now open the resource (res) folder and then right-click on "values" folder which is inside the resource (res) folder and go to new and then click on "values resource file".
Step 21 - Now write "style.xml" inside the "file name" and then remains every field same and then click on Ok.
Step 22 - Now delete all code inside "style.xml" file and then copy the below code and paste it inside "style.xml" file.
Code
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/design_default_color_primary</item>
<item name="colorPrimaryDark">@color/design_default_color_primary_dark</item>
<item name="colorAccent">@color/design_default_color_on_secondary</item>
</style>
</resources>
Step 23 - Now you need to go "MainActivity.java" and then click on three dots.
Step 24 - Now copy the below code and paste it on line number 6 after "import android.osBundle".
Code
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
Step 25 - Now again copy the below code and paste it on line number 11 after "public class".
Code
private WebView mywebView;
Step 26 - Copy the below code and paste it after line number 15 like below figure.
Code
mywebView=(WebView) findViewById(R.id.webview);
mywebView.setWebViewClient(new WebViewClient());
mywebView.loadUrl("https://example.com/");
WebSettings webSettings=mywebView.getSettings();
webSettings.setJavaScriptEnabled(true);
Note :- Replace the example.com with your website URL.
Step 27 - Now click after second last closing bracket and press enter then paste the below code inside it .
Code
public class mywebClient extends WebViewClient{
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon){
super.onPageStarted(view,url,favicon);
}
@Override
public boolean shouldOverrideUrlLoading(WebView view,String url){
view.loadUrl(url);
return true;
}
}
@Override
public void onBackPressed(){
if(mywebView.canGoBack()) {
mywebView.goBack();
}
else{
super.onBackPressed();
}
}
Now you will see a text which is in the colour red "Bitmap". Move your cursor over the text "Bitmap" and then click on "import class".
Step 28 - Now go to the resource (res) folder and then right-click on "drawable" and go to "new" and select "image asset".
Step 29 - Now choose the "path" of your logo from your computer or laptop then click "next" and then click on "finish".
Step 30 - now click on "build" button which at the top of the window and then click on "generate signed bundle / APK .
Step 31 - select "APK" and then click on "next".
Step 32 - Now click on "create new".
Step 33 - Now fill the form.
- Key store path - Select any path from your computer where you want to save APK file.
- Password - Write any password.
- Confirm - Write same password.
- Alias - remains it same.
- Password - Write above password.
- Confirm - Write same password.
- Validity (years) - Select 50.
- First and last name - Write your first and last name.
- Organisation unit - Write your profession.
- Organisation - Write your website name.
- City or locality - Write your city name.
- State or province - Write your state name.
- Country code (xx) - Write your two digits country code which you type before the mobile number.
Now click ok
Step 34 - Now tick on the "remember password" ( your choice) and then click "next".
Step 35 - Now select "release" and also tick on "signature versions" checkbox as shown in figure and then click on finish.
Step 36 - Now your app is ready. To view your apk file click on "executing tasks" shown in the image below
and then click on "locate" .
Here your apk file is inside the release folder. By default name of your apk file is "app-release.apk". So you need to rename it with your own website name like example.apk.
Note :- Do not remove ".apk" extension.
Frequently asked questions
1) Can you turn a website into an app?
Answer - Yes, you can turn a website into a app for free using Android studio. follow the above steps to create app using Android studio without coding knowledge.
2) How do I make my Google site a mobile app?
Answer - Make Google site or any other site to a mobile app by following above steps.
3) How do I make an APK file from a website?
Answer - Make an APK file of your website using Android studio by following each step written in this tutorial.
4) How can I create an Android application?
Answer - You can create an Android application for free using Android studio without knowledge of coding by following the above steps.
5) How convert HTML to APK?
Answer - You can convert your HTML code into APK using Android Studio for free by following the steps given in this tutorial.
