Create an Android app from Your Website

Hello there, Today here we will create an android app from your website. No prior knowledge of Android is expected. Some knowledge with java would be better.

Here is the website, we will be converting it to an android app.

And here is the Android app.

As you see, we are creating an android app for that website. We will need something to work on. We need Android Studio up and running on your device. Let’s get started.

Setting Up the Environment

We need to download the Android studio. Search for Android Studio and click the first link. You need to accept term and conditions before downloading. Once downloaded install it. The Android Studio comes with the latest OpenJDK embedded in order to have a low barrier to entry for beginners, that for you :). This means no more forth configuration needed on the system side.

Once installed Run the android studio. On your first run, you need some configuration. Select Standard as Install type. It will download some components to make the android studio up and running. Once Done we are ready to go.

First Project on Android Studio

Now you will be in the Android Studio Welcome screen. Select Start a new Android Studio project.

Now fill in the details, Application name, Company domain (Enter the domain name for the website eg aashishtiwari.com.np). Select the project location. Click Next.

Now you need to select Targeted android device. Let it be the default selected. It should be Phone and Tablet.

Add an Activity to Mobile, Select Empty Activity we will need no pre-built structure.

Configure Activity, Activity Name is by default MainActivity let it be. Remember to uncheck the Generate Layout File.

It would take some time, just wait till it finishes its loading. There are a lot of things to understand but for this very simple project you need to understand these two directories:

• manifests stores AndroidManifest.xml, which is an XML file that describes the structure of an Android app. This file also records permission settings (where applicable) and other details about the app.
• java stores an app’s Java source files according to a package hierarchy.

Now the Coding part

Inside the java, you will find MainActivity, double click on it to open it on the editor. Here we will create a WebView, initialize webview and load the URL in that webview.

    
package np.com.aashishtiwari.ashishtiwari;

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {
    WebView myWebView;
    Context context;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        context = this;

        myWebView = new WebView(context);

        setContentView(myWebView);
        myWebView.loadUrl("https://aashishtiwari.com.np");
    }
}
    
  

You can always click that Green Run button to run the developed app in your real android device or emulator within your device. You may need to download and install the emulator.

Check Internet and the Web.

Did you just click the play button and Run the app. Did it crash? It should as we are accessing the internet from our application and we are not asking permission to use the internet. You need to add permission on the manifests file. You need to add <uses-permission android:name=”android.permission.INTERNET”/>, just before the start of the application.

    
.............................
package="np.com.aashishtiwari.ashishtiwari">

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


    <application
.............................
    
  

As we have some JavaScript on that website we need to enable it. For that, we can make use of WebSettings. Also, let’s add Swipe to Refresh option. and here is the code. Here is the final MainActivity.java

    
package np.com.aashishtiwari.ashishtiwari;

import android.content.Context;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {
    WebView myWebView;
    Context context;
    WebSettings webSettings;
    private SwipeRefreshLayout layoutRefresh;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        context = this;

        layoutRefresh = new SwipeRefreshLayout(context);
        myWebView = new WebView(context);
        layoutRefresh.addView(myWebView);

        setContentView(layoutRefresh);
        webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
        myWebView.loadUrl("https://aashishtiwari.com.np");

        layoutRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                myWebView.reload();
                layoutRefresh.setRefreshing(false);
            }
        });
    }
}
    
  

Here we use https://aashishtiwari.com.np/ so use this url in the loadUrl. You need to replace it as your need. Also, the package name will be different for your case.

Now the working part is done. To get .apk from this code, Click in Build (on the toolbar) then Build Bundles / APKs and select Build Apks. Once the apk is generated you can locate it on the project folder app/build/outputs/apk/debug

Conclusion

Here we create an android app from the website. No much code is needed we just load the URL of the website inside an android app. This project follows no best programming practices. It’s just a simple app with a webview provided by android. whatever if you find any mistakes in these tutorials you can help us through that comment section down there.