We are going to apply for the “GeeksForGeeks” website right here. We will be able to learn how to turn a website into an Android application by creating this application and following a few easy steps. You can learn something new and apply this idea to your own website as well.
Simple Steps to Convert Your Website into an Android Application:
- To add the logo of your application.
- To add a splash screen to your application.
- To use the Navigation drawer in our application so that, different portals of our website can be used as fragments in the navigation drawer.
- To use a WebView so that, the web content can be accessed easily.
- To use WebViewController class so that the content on the Website can be directly shown in the application rather than opening it in the browser.
- To add a helpline activity.
And the easiest method to turn your website into an application is to follow these steps. So let’s have a look at how to turn the GeeksForGeeks website into an application step-by-step.
Step 1: Create a New Project in Android Studio
Please see How to Create/Start a New Project in Android Studio for instructions on how to start a new project in Android Studio. Both Java and Kotlin programming languages are available for such code on Android.
If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?
Step 2: Adding Logo to the Application
Paste the logo of your application in res > drawable. Refer to How to change the default icon of the Android App for further steps.
Step 3: Add Splash Screen to the Application
Refer to Creating a Splash Screen to learn How to Add a Splash Screen to the Application. Sample design of Splash Screen of the Application.
Step 4: Working with the XML Files
Open layout > nav_header_main.xml file to design the header of our Navigation Drawer. For that use the following code in it.
XML
To match the colour code of our application’s logo and improve the appearance of our user interface, change the colour of the Action Bar to “#6C6B74.” If you’re not sure how to alter the ActionBar’s colour, you may find out how to accomplish it by reading How to alter the Action Bar’s colour in an Android App. Navigate to the menu > activity_main_drawer.xml file and insert the following code to allow us to add and utilise various items (portals of our website) in our navigation drawer.
XML
Go to the layout > activity_main.xml and use the following code in it.
XML
After Implementing the above code, the design of the activity_main.xml file looks like this.
Go to the navigation > mobile_navigation.xml file and use the following code in it so that we can specify the title and label of our website portals and can easily use them in java files.
XML
Now it’s time to insert WebView in all the fragments, Open fragment_home, fragment_gallery, and fragment_slideshow XML files and use the code respectively.
XML
XML
XML
We now need to make a new activity called “help.” In order for the application user to obtain information to seek assistance from the service provider. Navigate to layout, then select new, activity, and empty.
Activity.
Enter the activity’s name (the name used in this application is “help”) as per your preference. Utilise the following code in layout > activity_help.xml by opening it.
XML
To make it easier for our WebView to function, we have now added a piece of code to request authorisation before accessing the internet. Add the following code to the AndroidManifest.xml file located under manifests.
<uses-permission android:name="android.permission.INTERNET" />Step 5: Working with Java/Kotlin Files
Create a new class as shown below and name it “WebViewController”
Use the following code in the WebViewController File so that code to use the URL of a website can be executed.
Java
Kotlin
Open the HomeFragment file and use the code respectively.
Java
Kotlin
Open the GalleryFragment file and use the code respectively.
Java
Kotlin
Open the SlideshowFragment file and use the code respectively.
Java
Kotlin
Now that we have completed all of our work, the last task is to use the intent in the MainActivity file to tie the help activity to the floating button in our application. To do this, use the code that follows.
Java
Kotlin
