Categories

Follow Us @web_learners

Monday, March 23, 2020

How to Create Android App Project and Setup Webview | Webview App Development Series Part 1

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:








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:








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)






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

In Bangla                                                                   In English

   

I will show you in the next video how to add a progress bar in Webview App then we will be able to understand how much the site has loaded and how much left to be loaded.

Anyway, That's it. In the next video, I will show you how to remove the action bar in Webview App showing on the top. If you face any problem let us know. we will try to help you as much as possible.

Thank you

6 comments:

  1. hello can u make this webview app for my website i will pay u plz reply me at dheerajkarade@gmail.com on on facebook.com/dheerajkarade

    ReplyDelete
    Replies
    1. ok, you can contact me at shorifaislam786@gmail.com with your requirement and details. Thank you.

      Delete
  2. By the way here is the Gig you can place order if you need app.

    https://www.fiverr.com/share/1K1X85

    ReplyDelete
  3. error: package androidx.appcompat.app does not exist import androidx.appcompat.app.AppCompatActivity;

    What does this error mean?

    ReplyDelete
  4. error: package androidx.appcompat.app does not exist import androidx.appcompat.app.AppCompatActivity;

    What does this error mean?

    ReplyDelete
  5. Hello, please can i get the source code for the webview app. I want one that i can download. I will be grateful if you can compile all for me. I tried following your videos but finding a lot of challenge.-0

    ReplyDelete