How to convert a website into android app inside Android studio | part 1/3

Hello everyone. This is Fuad Mohammed. In this very first android tutorial, I'm going to show you how to develop your own android app for your website step by step by using android studio.
LET US START...
1. First open android studio and create a new project by typing app name and package name. Then click next.

2. Target android devices window will appear. Choose 'phone and tablet', then choose minimum sdk version and click next. I choose 4.0.3 so that my app will run on devices with 4.0.3+ android version.

3. On this 'Add activity' window, choose 'empty activity' as shown on the image below, then click next.

4. The 'Customise activity' dialog will appear. Leave everything as it is and click finish.

wait untill android studio finishes creating your project.

We are going to edit 3 files:
mainActivity.java, activity_main.xml and android_manifest.xml. Also prepare 150×150px(png) file and copy it to drawable folder. We will use it as an icon for our app.

1. Activity_main.xml

This is our layout file. where we design the UI(user interface) of our app by using xml (eXtensible Markup Language). We use a view called 'webView' to display the contents of the website inside android app. Copy and paste this code inside your parent view. If 'Constraint layout' was used as a parent layout, change it to 'Relative layout'.

<WebView
    android:id="@+id/mywebview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
    

android:id attribute - is used for giving id to the view. The + sign means new id. in this case our new id is 'mywebview'.
android:layout_width and android:layout_height attributes are used to set the width and height of the layout. we are giving it a width and height that matches/equals the width and height of its parent(Relative layout).

2. MainActivity.java

This is where we write a program for our app. Open MainActivity.java. then declare WebView and paste this code inside onCreate method.

webview = (WebView) findViewById (R.id.mywebview);
webview.setWebViewClient(new WebViewClient());
webview.getSettings().setJavaScriptEnabled(true);
webview.loadUrl("https://orosoftblog.blogspot.com/");

1. initialize your view. make sure that the argument we are passing inside findViewById() matches the ID inside activity_main.xml.
2. handle link clicks. make link clicks to be opened inside the app not in other browsers.
3. javascript is disabled by default. So we have to enable it manually. this is very important. else otherwise our app will ignore javascript.
4. load the url. Don't forget the protocol.

3. Android_manifest.xml

This is where we write how our app works. We need internet permission for this project. our app cannot use Internet without Internet permission. add this line above application tag.

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

4. Setting custom icon

Open android manifest and search for 'android:icon' attribute. edit it like this.

android:icon="@drawable/youriconfilename"

Do not write file extension here.

Handling backpress (Optional..)

This is about what our webView have to do if a user pressed back key while browsing. just paste this code out side onCreate method inside MainActivity!

    @Override
    public void onBackPressed(){
     if (webview.canGoBack()){
            webview.goBack();
        }
        else {
            super.onBackPressed();
        }
    }

If the webView can go back Redirect a user to the previous page. else, let it for the OS.

Hiding Toolbar/Appbar (Optional..)

change DarkActionBar to NoActionBar in styles.xml.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

BOOM.. That's it. you made your own website browser app. Run the app n enjoy.
Problems/errors?? Comment down here. i'll try my best to help you..