Android

Android App from your Website using Android Studio 3.6.3

In this tutorial, we will discuss how to develop Android App from website. We will be using latest Android Studio i.e 3.6.3. I will to try to explain it in easy way.

This tutorial is for both Android App Developer’s and Non Android App Developer’s. You don’t need any programming language to build your app. Just follow the steps clearly and then you are ready to use Android App.

You can create Android App for any website but your website should be responsive. Otherwise, it will not look good in mobile devices.

There are some requirement that you need to install before starting development.

  1. Android Studio
  2. Any Android Mobile Device
  3. Good Computer (Optional)

3 point is optional. If you don’t have good computer then you can face slowness while development.

For Installing Android Studio – Click Here

Develop Android App from website

Open Android Studio and then click Start a new Android Studio project

Open Android Studio
Open Android Studio

You will see Project Template for your Android App as shown below

Select Project Template
Select Project Template

Select Empty Activity and then click Next Button.

Now, you will see Configure Your Project Screen as shown below

Configure Your Project
Configure Your Project

Configuration to be fill

Name: Name of your App

Package Name: Start with com and then you can use as per choice.

Language: Java

Minimum SDK: API 16: Android 4.1 (Jelly Bean)

All other settings should be default. You will see default language selected by Android Studio is Kotlin. Make sure to change it to Java before click Finish Button

Click Finish and then wait for process to complete.

Wait for process to complete
Wait for process to complete

After few min, you will see screen as shown below

Processing
Processing

Still you can see some process is going on in bottom of screen.

After all process complete, you will see two files that are by default open

Start Up Screen of Project Development
Start Up Screen of Project Development

Adding Internet Permission to your App

Basically, we are trying to load your website in Android App. For loading website, then definitely we need internet. By default, your app is not configure to use internet. For adding internet permission :-

Open file AndroidManifest.xml. File is located in manifests folder. For better understanding check below screen shot.

Open AndoirManifest.xml
How to open AndoirManifest.xml

Now copy and then paste below line

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

Then your Final file will look like

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.digital.devildoxx">
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
    <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/AppTheme">
        <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>
Add Internet Permission to App
Add Internet Permission to App

Configuring Front End to Load your website

Go to activity_main.xml file as shown below

Front End Preview
Front End Preview

You can see Hello World in white preview. Click on Hello World and then press Delete button in your keyboard.

Delete Hello World
Delete Hello World

You can see search icon in Palette section.

Search Button in Palette Section
Search Button in Palette Section

Click on Search button and then type webview

You will see one element WebView.

WebView Element
WebView Element

Use mouse to drag and drop WebView element. When you drop, it will get resize to screen.

Default Resize of Web View Element

On Right Side, you can see many sections. I have highlighted some sections.

You can see Width and Height in constraints section. These are fill automatically when you drop the web view element.

Similarly, there is attribute section in which you can see id which is set blank.

Change in Constraints Section

layout_height = fill_parent

layout_width = fill_parent

Similarly, in Attribute Section

id = myViewElement

Change Attribute Id and Constraints

Back End Code to Load Website in App

We are done with front end and required permission for your Android app. Now, we have to develop back end code to load website.

We will do back end code in one file only then we will build apk directly. This file is by default open when you start a new app. If you mistakenly close the file then you can find it here

app/java/package-name/MainActvity.java

MainActivity.java file
MainActivity.java file

Create private variable myView and then call WebView library in it. Then you can see one function onCreate. Bind your private variable with your WebView Element inside onCreate function.

Create Private Variable and Bind Element with WebView Library
Create Private Variable and Bind Element with WebView Library
private WebView myView;


protected void onCreate (...

    myView = (WebView)findViewById(R.id.myViewElement);
}

As you know, all websites uses JavaScript. We have to enable JavaScript in Android app, only then we can use website in it properly.

Settings of WebView

We have to set some settings for WebView. So, that we can enable our requirements. Like JavaScript and URL to load in WebView element.

Copy and then paste below lines inside onCreate function. It should be after binding of variable with element .


    WebSettings webSettings = myView.getSettings();
    webSettings.setJavaScriptEnabled(true);

This will enable JavaScript for your website in Android app. After calling your private variable and then call loadUrl function. In this function, you will pass your website URL.

myView.loadUrl("https://digital.devildoxx.com");

Now, copy and then paste one more line after that. This line will open all links on your website inside your Android app. Otherwise, all links will open in device browser.

myView.setWebViewClient(new WebViewClient());

Final Code in onCreate function

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Binding WebView variable with our webView element in activity_main.xml using id
        myView = (WebView)findViewById(R.id.myViewElement);

        // Get Web Settings to make Javascript enable for your website.
        WebSettings webSettings = myView.getSettings();
        webSettings.setJavaScriptEnabled(true); // It will make Javascript Enable for your website.
        myView.loadUrl("https://digital.devildoxx.com"); // Loading Your website in your webview element

        // Open Link on your website inside app without opening device browser.
        myView.setWebViewClient(new WebViewClient());
    }

Back Button Functionality

Just copy and then paste below function after onCreate.

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

There is if condition in it. It means when user hit back button, it will force WebView to load previous URL inside your Android app. Once there is no previous URL, then it will exit the application.

Final Code in MainActivity.java

package com.digital.devildoxx; // Replace it with your package name.

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    private WebView myView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Binding WebView variable with our webView element in activity_main.xml using id
        myView = (WebView)findViewById(R.id.myViewElement);

        // Get Web Settings to make Javascript enable for your website.
        WebSettings webSettings = myView.getSettings();
        webSettings.setJavaScriptEnabled(true); // It will make Javascript Enable for your website.
        myView.loadUrl("https://digital.devildoxx.com"); // Loading Your website in your webview element

        // Open Link on your website inside app without opening device browser.
        myView.setWebViewClient(new WebViewClient());
    }

    // Back Button Functionality

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

Building Your APK file to install in your mobile

Build APK
Build APK

Go to Build> Build Bundle then click Build APK. Once build is generated then you will pop up message in bottom right

Pop Up Message

Click on Locate and then you will see your Android App apk in File Explorer

File in File Explorer
File in File Explorer

Connect your device with your computer. Copy and then Paste Android App file in your Mobile Storage.

Now, open your Android App file and install in your mobile. You will see some warning’s as you are directly installing apk. Ignore it and then click Install Anyway.

Now, you can see your Android app in App Drawer.

App Drawer
App Drawer

Click on your Android App and then you will see your app running

Your Android App
Your Android App

For any type of query mail at devildoxx@gmail.com

For Social Media Promotions, please visit https://digital.devildoxx.com

Tags

Anil Mehra

I am Anil Mehra, a passionate, workaholic and a Full Stack Tech Savvy Programmer with true north towards growth. I have worked on 256 live projects in MNC. I am expertise in the field of Programming, Server Management, SEO, Blogging and SMO...

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close