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
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.
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.
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.
Here you need to put your own application name as well as your own domain name and click on ‘Next’.
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.
Choose the activity for your app. I will recommend going with the empty 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.
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.
Choose Android or Project >>App >>Java >>your app name >>MainActivity.java. Following is the code you need to replace in your java file.
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.
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.
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.
Below the Key Store Path, click on Create new.
On the New Key Store window, provide the following information
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’.
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’.
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.
You can now distribute your App through Google Play Store.
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”
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.