How to Convert web to app any website using android studio part 1

 

 

 

by  Ts Durjoy on   

Hi, This is the first of the Webview app development series. Today we will create a new project in the android studio and will setup the WebView. so, This is my   website which we will convert into an android app.

So, Let's start the android studio. As you see in the video android studio started. Now let's create a new project. To create a new project for webview app click on Create new project option on the screen shown.

After that, you have to choose your project activity from the activity list. I will choose here empty activity. You can choose any from the activity list for making webview app.

After empty activity selected, Click next.

After that, this is where you have to give your application name.  My website name is "tweetpost" so, I will use it here.

Package name if you wish you can change. You can change the location if you want.

after that choose your minimum API from the API list. I will take the minimum API 16. Because when I will show you how to implement Applovin ads minimum API 16 will be needed.

After all this basic click on the finish button, It will take a few minutes to sync. As you see whenever sync has been finished, 2 tabs, "MainActivity.java" and "activity_main.xml" have opened automatically.

Ok, we will move down and click on the text view. after that, we will select layout decoration from the view area so that we can see how is the realtime app in a device shows.

 

 

so, we will change ConstantLayout to LinearLayout in the "activity_main.xml". After that, we will change the orientation to vertical.

Then we will remove the Default textview.

Now, we will take webview here. Actually, this is the system that will convert your website to a mobile app view.

we will use layout width and height to match_parent.
we will also take an ID named here myweb.

That's it for the xml file. The final code will be in activitymain.xml is:

 

 

Top of Form

<?xml version="1.0" encoding="utf-8"?> <Linearlayout 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" android:orientation="vertical" tools:context=".MainActivity"> <WebView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/myweb"/> </Linearlayout>

Bottom of Form

 

 

Now let's move to MainActivity.java.

In the main function, we will take a webview variable. Let's call it "web". One more variable we will take and this will be a string.

let's call it. webURL. We will take a global variable so that we can use anywhere we like. Actually, this will hold the URL of the website which you wish to convert to a mobile app.

Ok, let's copy the URL of the website which you wish to convert into app. Ok as copying of the website url done.

Now, remember? we took a variable named "web". now we will store the webview of the XML file.

So, follow in the video shown.

after this, We will take a WebSettings and let's call it mywebsetting. follow the code shown in the video.
The final code will be in MainActivity.xml is:

Top of Form

package com.ss.tweetpost; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.webkit.WebSettings; import android.webkit.WebView; public class MainActivity extends AppCompatActivity { private WebView web; String webUrl = "https://tweettools.trickssoftware.com/"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); web = (WebView) findViewById(R.id.myweb); web.loadUrl(webUrl); WebSettings mywebsettings = web.getSettings(); mywebsettings.setJavaScriptEnabled(true); } }

Bottom of Form

 

After this piece of code. we will run our project on the emulator.
Now one more thing to do, As we know webview means it has to have internet access. So, we have to write some code to give internet access permission to our app. So, let's write some code. To write codes we have to go to manifests file then AndroidManifests.xml now we have to write (see below code)

Top of Form

<uses-permission android:name="android.permission.INTERNET" />

Bottom of Form

 

As we have finished the coding now you can run your webview app in the emulator.