Convert website into android app || WebView app source code - Santa Coder

Hello there! If you’re looking to convert your website into an Android app or convert your WordPress/Blogger website into an Android app, then you’ve come to the right place. This article will guide you on how to convert your website to an Android app without the need to hire a developer.

In order to begin, you must click on the button below to purchase a WebView source code first.

Once you’ve made the purchase, follow these simple steps to reskin the source code:

Before starting the steps, Download and unzip the WebView source code. After unzipping, you’ll see a folder named “WebView”. Open the Android Studio IDE and import this WebView source code.

Step 1: How to change the app name?

1. In Android Studio, go to the “res” folder and look for the “values” folder.
2. Open the “strings.xml” file.
3. Look for the line that says “app_name” and change the name to your desired app name.

Step 2: How to change the package name?

1. Go to the “java” folder and look for the “com” folder.
2. Locate the folder named “santacoder” inside “com” folder.
3. Right-click on the “santacoder” folder and hover your mouse cursor over the Refactor from the context menu.
4. Click on the “Rename” option and then choose “In Current Module”.
5. Delete the previous name which is named “santacoder” and replace it with your company name.

Step 3: How to change the application Id and namespace?

To change the application id and namespace, Click on the build.gradle app module from the left sidebar in android studio. You’ll see the namaspace and application Id which is “com.santacoder.santaweb”. Delete this “com.santacoder.santaweb” and replace it with your unique package name.

Step 4: How to change website link?

1. In Android Studio, go to the “res” folder and look for the “values” folder.
2. Open the “strings.xml” file.
3. Look for the line that says “host_url” and change the URL to your website URL.

Step 5: How to hide the website header on the app?

If you want to hide your website header on the app, Follow these simple steps below.

“I have already told you how to open the strings.xml file. So, open the strings.xml file again and look for the line that says “header_reference_is” and “header_id_or_class”. Inside “header_reference_is”, write either “id” or “class”. If you have written “id”, you need to put your website header “id” inside the “header_id_or_class”. If you have written “class”, you need to put your website header class inside the “header_id_or_class”.

Step 6: How to change OneSignal app id for push notification?

To add a OneSignal App Id to your app, you need to follow a few steps to create the OneSignal App Id first.

1. Open this OneSignal website in a new tab and then sign up and log in it.
2. After logging in, click on “New App/Website.”
3. Enter your app name, and then select “Google Android (FCM).”
4. Click on “Next: Configure Your Platform.”
5. Click on “Copy from your Firebase Console” and log in using your Google account.
6. After that, click on “Add Project,” then enter your app name, and click on the “Continue” button twice.
7. Now select the “Default Account for Firebase” from the dropdown option and click on the “Create project” button.
8. After the project is created, click on the “Android icon,” enter your package name and app name, and then click on the “Register App” button.
9. Click on “Download google-services.json” to download the google-services.json file. After that, copy this JSON file, go to Android Studio, click on “Android,” and choose “Project.” Now paste the JSON file inside the “app” folder. Then, go back to Firebase, click on the “Next” button twice, and finally, click on the “Continue to the console” button to complete the account creation process.
10. Click on the “Settings icon” at the top of the sidebar, then click “Project settings,” and then click on the “Cloud Messaging” tab. After that, you’ll see “Cloud Messaging API (Legacy)not_interestedDisabled” and three dots. Click on the three dots and click on the “Manage Api in Google Cloud Console.” Click on the enable button to enable the Cloud Messaging service.
11. After enabling it, go back to the Firebase tab and refresh it. Now you’ll see the Firebase “Server key” and “Sender ID.” Copy these keys and IDs one by one and paste them on the OneSignal website.
12. Now click on the “Save & Continue” button on the OneSignal website. Select “Native Android” and click on the “Save & Continue” button again.
13. Finally, you’ll see your App Id. Copy it by clicking the copy icon, and then go to Android Studio and open the strings.xml file. Paste the App Id inside “one_signal_app_id.”

Step 7: How to change Google Ad Manager Ads Id’s?

If you do not have a Google Ad Manager account, you need to create one by clicking on this link. Once your account is created, click on “Inventory” > “Apps” and add your app by clicking the “Add App” button. After that, create an ad unit for banner and interstitial. Once you have successfully created the ad unit, copy the App ID and ad units one by one, and paste them inside “am_app_id”, “am_banner_id” and “am_interstitial_id” in strings.xml file.

Step 8: How to change contact email, privacy policy link, terms and conditions link and share message?

1. Open the strings.xml file again.
2. Delete the previous email ID and enter your email ID inside “contact_email”.
3. Delete the previous privacy policy link and paste your privacy policy link inside “privacy_policy_link”.
4. Delete the previous terms and conditions link and paste your terms and conditions link inside “terms_conditions_link”.
5. You can modify the share message from the strings.xml file located inside “msg_share”.

Step 9: How to change social media links?

To change the social media links, Open the strings.xml file and replace it your social links with “facebook”, “instagram”, “twitter and “youtube”.

Step 10: How to change app logo in WebView app

1. Right-click on the “app” folder and hover your mouse cursor over the “New” from the context menu.
2. Click on the “Image Asset” and then click on the “file” icon from “path” field and select your app logo.
3. Click on the “Background Layer” and then click on the “color” field to select the background color.
4. After that, click on the “Next” and “Finish” button.

Step 11: How to change Splash Screen Logo, Header Logo and Navigation Logo?

This step is very simple! Just copy your logo and paste it into the ‘drawable’ folder, but make sure that your logo file name is ‘logo.png’.”

Step 12: How to change the colors of the app?

1. In Android Studio, go to the “res” folder and look for the “values” folder.
2. Open the “colors.xml” file.
3. Look for the line that says “colorPrimary”, “colorPrimaryDark”, “navigation_item_color”, “youtube_icon_color” and customize the colors what you want.

Step 13: How to modify ads settings?

1. Open the strings.xml file again.
2. If you want to disable the ads, You need to set “false” inside “is_ad_manager_ads_enabled”.
3. If you want to display ads on every page visit or after a certain number of page visits, you need to set the value inside ‘show_ads_after_x_clicks’ to the desired number what you want.