How to Convert a WordPress Site into an Android App using Android Studio

Does your WordPress website need a mobile app? If you check your website traffic in google analytics, then you will see that more and more people browse the internet using their mobile phones. One of the easiest ways to make sure that mobile users have a nice experience on your site is by making it mobile responsive.

For some businesses, having a responsive site is not sufficient enough. They may want to offer an even nicer user experience by creating their own mobile apps.

If you have been thinking about turning your WordPress site into an android app, then you might already be aware of how much it costs to have an app built from scratch.

There are two methods to convert a site into an android app:

  • Using plugins(paid plugins).
  • Coding(using Android Studio).

STEPS TO CONVERT WORDPRESS SITE INTO AN ANDROID APP

The first thing you need is a running WordPress site, for that you need the best hosting and essential plugins.

Step 1: Downloading and Installing Android Studio

Android Studio gives you an advanced code editor and a set of app templates. In addition, it contains tools for development, debugging, testing, and performance that make it faster and easier to develop apps.

Download the android studio from the official site. There are options available for different operating systems.

Android Studio

Complete the installation process after downloading the studio, it will take a few minutes for the process to complete.

Step 2: Creating a New Project

The Android Studio welcome screen gives you a number of options for what you want to do. I want to create a new project, so click on the option for Start a new Android Studio project.

Creating a android project

Step 3: Basic Settings for a new App

Android Studio uses the company domain and application name to form the name of the package that will be used for your app.

naming the app

Here you need to put your own application name as well as your own domain name and click on ‘Next’.

Device Selection

You now need to indicate which API level of Android your app will use. API levels increase with every new version of Android. Unless you only want your app to run on the very newest devices, you probably want to specify one of the older APIs.

Cavity Selection

Choose the activity for your app. I will recommend going with the empty activity.

Main Activity

Keep the names as it is and click on ‘Finish’. Now you have successfully created an empty app.

Step 4: Layout of the App

A layout describes the appearance of the screen. Layouts are written as XML files and they tell Android how the different screen elements are arranged.

For editing the layout you need to open activity_main.xml.

Layout of app

Choose Android or Project >>App >>res >>layout >>activity_main.xml. Copy the code below and paste it in your xml file.

Note: In the line tools:context=”com.example.first.MainActivity” you need to put your domain name and app name.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.first.MainActivity">

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

Step 5: Main Code for Running the App

The main activity code is a Java file MainActivity.java. This is the actual application file which ultimately runs your application.

convert

Choose Android or Project >>App >>Java >>your app name >>MainActivity.java. Following is the code you need to replace in your java file.

package com.example.first;

import android.support.v7.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 mywebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mywebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings= mywebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mywebView.loadUrl("https://example.com/");
// Line of Code for opening links in app
mywebView.setWebViewClient(new WebViewClient());
}

//Code For Back Button
@Override
public void onBackPressed() {
if(mywebView.canGoBack())
{
mywebView.goBack();
}

else
{
super.onBackPressed();
}
}
}

NOTE: Replace the URL (example.com) with your Domain Name.

Step 6: Developing Components for the App

The components you develop as a part of your application, you must declare all its components in a manifest.xml which resides at the root of the application project directory. This file works as an interface between Android OS and your application, so if you do not declare your component in this file, then it will not be considered by the OS.

Note: You need to change android:label=”@string/app_name” and replace app_name with your app name.

Component Section

Choose Android or Project >>App>>manifests >>AndroidManifest.xml. Copy the code and paste in your xml file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.wptorc.wptorc">
     <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>

Step 7: Running the App

So far you have seen what your Android app looks like in Android Studio. Now we have to see how it’s running.

There are two options when it comes to running your apps. The first option is to run on a physical device and the second option is to use the Android emulator.

The emulator enables you to set up one or more Android virtual devices and then run your app in the emulator as though it is running on a physical device.

Now click on the Run button(play icon) at the top menu bar.

Running the app

Next, Android studio installs the app on your Android Virtual Device and starts it and if everything is fine with your set-up and application, it will display following

The Run button builds and deploys your app to a device. However, to build your app to share or upload to Google Play, you’ll need to use one of the options in the Build menu to compile parts or all of your project. We will see that in Step 9.

Step 8: How to Change App Icon

Android Studio includes a tool called Image Asset Studio that helps you generate your own app icons from material icons, custom images, and text strings.

All you have to do is upload your image and image asset will generate a set of icons at the appropriate resolution for each size that your app supports. Follow the video to change the icon.

Note: Click on the path field to find the image or logo you want to upload. If your image or logo name is different, then you need to add the name in android:icon=”@mipmap/new name” in AndroidManifest.xml code.

Step 9: Signing Your App to Share on Google Play

Android requires that the APK be digitally signed with a certificate before it can be installed. And you need to sign your App before you upload it to the Google Play.

Start the signing process by following the steps shown below.

In the top menu bar, click Build >Build>Generate Signed Bundle/APK.

build options

Below the Key Store Path, click on Create new.

keystore path

On the New Key Store window, provide the following information

keystore location

Key store path: Select the location where your keystore should be kept and create a password for your keystore.

The Alias name can be kept as shown in the image or you can change the name.

Create and confirm the password. This should be different from the password you chose for your keystore.

Validity: Your key should be valid for at least 25 years, so you can sign app updates with the same key.

Enter the necessary information in the certificate field and Click ‘OK’.

keystore file

To sign your APK for release in Android Studio, click on Build >> Generated Signed Bundle/APK and you will see the above image. Click on ‘Next’.

Signed App

In this window select the destination folder for your Signed App. Select the build type, whether it is free or paid app.

Next, select both V1 and V2 Signature Versions. Click on ‘Finish’ and you will see the following notification at the bottom of your screen.

Generated Signed APK

You can now distribute your App through Google Play Store.

EXTRAS:

activity under

If you want to remove the top bar from your app, all you need to do is go to Android >> app >> res >> values >> style.xml and change the following line of code

style name=”App Theme” parent=”Theme.AppCompact.Light.ActionBar”

to

style name=”App Theme” parent=”Theme.AppCompact.Light.NoActionBar”

Now I would like to turn it over to you

Are you going to convert your WordPress site into an android app using the above method?

Or maybe you have a question about something you read.

Either way, let me know by leaving a comment below right now.

3 thoughts on “How to Convert a WordPress Site into an Android App using Android Studio”

  1. Thanks a lot for your tutorial I searched a couple of weeks can’t make an application and all sources have bugs many thanks I created my first app on Google play store.
    Feedback: can you please change the title of this article to How to Convert any website to Android App using Android Studio

Leave a Comment

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

Scroll to Top

ARE YOU IN?

Learn about the exclusive wordPress tips and insights. join and stay ahead of the pack.

get exclusive wordpress tips & tricks

Learn about the exclusive wordPress tips and insights. join and stay ahead of the pack.

Share
Tweet
Share
WhatsApp