How to Convert Any Website to Android App in Android Studio?

Posted by

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

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x