Building a WebView App in Android Studio

A WebView app in Android Studio is an Android application that utilizes the WebView component to display web content within the app’s interface. Essentially, it’s a native Android app that can render web pages and web-based content just like a web browser, but it does so within its own dedicated app environment. This enables developers to create hybrid applications that combine the power of native Android features with web technologies, making it a versatile choice for displaying web content, web applications, or interactive web elements within a mobile app.

Are you looking to create a WebView app for your website or web application? Android Studio makes this process relatively straightforward. In this step-by-step guide, we’ll walk you through the process of setting up an Android WebView app from scratch.

Prerequisites

Before we begin, make sure you have the following:

• Android Studio: Download and install Android Studio if you haven’t already.
• Zip: Download the ZIP, if you haven’t already..

Step 1: Launch Android Studio

Open Android Studio on your computer.

Step 2: Organize Your Files

1. Start by extracting the contents of “WebView.zip” from the downloaded Zip file Location.
2. Move the extracted folder into your destinated directory.

Step 3: Import the Project

• In Android Studio, navigate to File -> Open.
• Find and select the extracted folder.
• Click “Open.”

Step 4: Configure Gradle

• In the project explorer, navigate to app -> build.gradle(Module:app).
• Under android -> defaultConfig, look for "applicationId".
• Replace "com.basudev.webview" with your desired application ID.

Step 5: Define Your Project Name

• In the project explorer, navigate to settings.gradle(Project Settings).
• Locate rootProject.name.
• Change "domain_name" to your chosen project name.

Step 6: Set Your Website URL

• In the project explorer, navigate to app -> java -> com.basudev.webview -> Constants.
• Open Constants.java.
• Update public static String URL with your website URL. For example, if your website is https://example.com, set URL = "https://example.com".

Step 7: Customize the Splash Screen

• Replace the default splash screen logo by pasting your logo as logo.png in the app -> res -> drawable directory. Confirm any override prompts.

Step 8: Design Your App Logo

• Right-click on app -> res.
• Go to New -> Image Asset.
• Configure your logo as required, both in the foreground and background layers.
• Click “Finish.”

Step 9: Ensure Proper Logo Scaling in Splash Screen

• Open activity_splash.xml located in app -> res -> layout.
• Check the scaling of the image logo within the ImageView with the ID @+id/imageView.

Step 10: Customize App Colors

• Open colors.xml in app -> res -> values.
• Modify the colors <color name="notification_bar_main">#000000</color> and <color name="notification_bar_splash">#701FCB</color> to match your desired color scheme.

Step 11: Update App Name

• Open strings.xml in app -> res -> values.
• Change the app name by editing the <string name="app_name">WebView App</string> entry.

Step 12: Access Firebase Console

• Go to the Firebase Console.

Step 13: Create or Select a Firebase Project

• If you don’t have a Firebase project, create one by clicking the “Add project” button and following the setup steps.
• If you already have a Firebase project, select it from the project list.

Step 14: Add an App

• Inside your Firebase project, click on the “Add app” button (represented by a +</> icon).

Step 15: Platform Selection

• Select the platform for your app. Choose “Android.”

Step 16: Register App

• Enter your Android app’s package name. You can find this in your Android Studio project’s build.gradle file.
• Optionally, you can also enter other details like the app nickname and debug signing certificate.
• Click “Register app.”

Step 17: Download Configuration File

• After registering your app, you will be prompted to download the google-services.json file.
• Click the “Download google-services.json” button. This file contains the necessary configuration settings for your Android app to connect to Firebase services.

Step 18: Add `google-services.json` to Your Project

• Move the downloaded google-services.json file into the “app” module of your Android Studio project.
• Place it in the app directory of your project.

Step 19: Sync Your Project

• In Android Studio, click File -> Sync Project with Gradle Files. This action will ensure that the Firebase SDK is properly integrated into your app.

Step 20: Create a OneSignal Account

• Go to the OneSignal website.
• Sign up for a OneSignal account if you don’t already have one. Follow the registration process.

Step 21: Create a New App in OneSignal

• After logging in, click the “Add a New App” button.
• Provide a name for your app and select the appropriate platform (Android or iOS). In this guide, we’ll focus on Android.
• Click “Create.”

Step 22: Configure Android Push Notifications

• Under “Android Configuration,” fill in the required fields:
  • Google Project Number (Sender ID): You can find this in your Firebase project settings under “Cloud Messaging.”
  • Server Key: You can also find this in your Firebase project settings under “Cloud Messaging.” It’s the API key.
  • Generate a Private Key JSON file:
    • In Project settings, go to the Service accounts tab.
    • Click Generate new private key at the bottom of the page.
    • You’ll then see a warning window. Click Generate key.
    • Click on Service Account JSON > Choose file and select the JSON file you downloaded from your service account.
    • Click Save and Continue.
• Click “Save.”

Step 23: Obtain Your OneSignal App ID

• After saving your Android configuration, you’ll receive your OneSignal App ID. It’s a unique identifier for your app.
• Keep this App ID handy; you’ll need it to integrate OneSignal with your Android app.

Step 24: Integrate OneSignal with Your Android App

• Open your Android Studio project.
• In your MainApplication class or the main activity of your app, initialize OneSignal with your OneSignal App ID. Add this code inside the onCreate method. Replace "ONESIGNAL_APP_ID" with the App ID you obtained in Step 4. OneSignal will now handle incoming notifications for your app. To handle custom logic when a notification is received, you can implement a NotificationExtenderService and customize the notification behavior as needed.

Step 25: Test Your Notifications

• To ensure that push notifications are working correctly, you can send a test notification from the OneSignal dashboard to your app.

Step 26: Clean and Build

• Clean the project by clicking Menu -> Build -> Clean Project.
• Test your app on a mobile device by pressing Shift + F10. Allow time for the Gradle build to complete.
• To Create Debug app -> Click Menu -> Build -> Build Bundle(s)/APK(s) -> Build APK(s). Allow time for the Gradle build to complete.

Conclusion

Congratulations, you’ve successfully set up your Android WebView application! To share the APK you’ve built, navigate to folder_name/app/build/outputs/apk/debug/app-debug.apk.