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

19 Aug, 2021
Here, we are going to make an application for the “GeeksForGeeks” website. By making this application we will be able to learn that how we can convert a website to an Android Application just by following simple steps. You can use this concept for your personal website too and learn something new.
In this application, we will learn that how we can use different portals of a website and show them as fragments in our android application. In this application three portals of Geeksforgeeks website- Home, Practice and Contribute will be used as fragments in our application. So, that you can see a live example to convert a website to an application. The concept of WebView is used to do this desired work. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 
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 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 by following these steps you can convert your website to an application in the simplest way. So, let us see step-by-step implementation to convert GeeksForGeeks Website to an application.
Step 1: Creating a new project
Open a new project.
We will be working on Navigation Drawer Activity with language as Java. Leave all other options unchanged.
You can change the name of the project at your convenience.
There will be many default files.
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: To add a logo to our application
Paste the logo of your application in res > drawable.
Follow “How to change the default icon of Android App” for further steps.
Step 3: To add Splash Screen to our application
Follow-“Creating a Splash Screen” to learn how to add a splash screen to our application. Sample design of splash screen of our application.
Step 4: Working with 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
<?xml version="1.0" encoding="utf-8"?><!--Constraint Layout to display all the details of header file--><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="@dimen/nav_header_height"    android:background="#6C6B74"    android:gravity="bottom"    android:orientation="vertical"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingBottom="@dimen/activity_vertical_margin"    android:theme="@style/ThemeOverlay.AppCompat.Dark">     <!--Image View to display logo of application in header-->    <ImageView        android:id="@+id/imageView"        android:layout_width="107dp"        android:layout_height="87dp"        android:layout_gravity="center"        android:contentDescription="@string/nav_header_desc"        android:foregroundGravity="center"        android:paddingTop="@dimen/nav_header_vertical_spacing"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.247"        app:srcCompat="@drawable/gfg_round" />     <!--TextView for name of application -->    <TextView        android:layout_width="wrap_content"        android:layout_height="51dp"        android:layout_gravity="center"        android:gravity="center"        android:paddingTop="@dimen/nav_header_vertical_spacing"        android:text="GeeksForGeeks"        android:textAppearance="@style/TextAppearance.AppCompat.Body1"        android:textColor="#01A109"        android:textSize="24sp"        android:textStyle="bold"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="@+id/imageView"        app:layout_constraintVertical_bias="1.0" /> </androidx.constraintlayout.widget.ConstraintLayout>
After implementing the above code, the header of the Navigation Drawer looks like this: 
Change the color of the Action Bar to “#6C6B74” so that it can match the color code of the logo of our application and our UI can become more attractive. If you do not know how to change the color of the ActionBar then you can click here to learn it. Open menu > activity_main_drawer.xml file and use the following code in it so that we can add different items(portals of our website) to our navigation drawer and use their fragments.
XML
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">     <!--Group is used to group all these items together-->    <group android:checkableBehavior="single">         <!--Three items are added as name of three portals-->        <!-- Portal number 1- Home-->        <!-- menucategory is used as secondary so that             backstack(going back by pressing back button) can be used -->        <item            android:id="@+id/nav_home"            android:icon="@drawable/home"            android:menuCategory="secondary"            android:title="@string/menu_home" />         <!-- Portal number 2- Practice-->        <item            android:id="@+id/nav_gallery"            android:icon="@drawable/practice_gfg"            android:menuCategory="secondary"            android:title="Practice" />         <!-- Portal number 3- Contribute-->        <item            android:id="@+id/nav_slideshow"            android:icon="@drawable/contribute_gfg"            android:menuCategory="secondary"            android:title="Contribute" />    </group></menu>
After implementing the above code our design of the activity_main_drawer.xml file looks like this.  
Go to the layout > activity_main.xml and use the following code in it.
XML
<?xml version="1.0" encoding="utf-8"?><!-- DrawerLayout acts as top level container for window content that allows for     interactive “drawer” views to be pulled out from one or both vertical edges of the window--><androidx.drawerlayout.widget.DrawerLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:openDrawer="start">     <!-- To reuse layouts include tag is used-->    <include        layout="@layout/app_bar_main"        android:layout_width="match_parent"        android:layout_height="match_parent" />     <!-- Navigation view to make navigation drawer -->    <com.google.android.material.navigation.NavigationView        android:id="@+id/nav_view"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        android:background="#2E303E"        android:fitsSystemWindows="true"        app:headerLayout="@layout/nav_header_main"        app:itemIconTint="#fff"        app:itemTextColor="#fff"        app:menu="@menu/activity_main_drawer" />     </androidx.drawerlayout.widget.DrawerLayout>
After implementing the above code design of activity_main.xml file looks like. 
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
<?xml version="1.0" encoding="utf-8"?><navigation    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/mobile_navigation"    app:startDestination="@+id/nav_home">     <!--These fragments are made to work on all        the items listed in navigation drawer        so that there java files can be managed separately -->         <!-- Fragment for Home portal-->    <fragment        android:id="@+id/nav_home"        android:name="com.example.geeksforgeeks.ui.home.HomeFragment"        android:label="@string/menu_home"        tools:layout="@layout/fragment_home" />     <!-- Fragment for Practice portal-->    <fragment        android:id="@+id/nav_gallery"        android:name="com.example.geeksforgeeks.ui.gallery.GalleryFragment"        android:label="Practice"        tools:layout="@layout/fragment_gallery" />     <!-- Fragment for Contribute-->    <fragment        android:id="@+id/nav_slideshow"        android:name="com.example.geeksforgeeks.ui.slideshow.SlideshowFragment"        android:label="Contribute"        tools:layout="@layout/fragment_slideshow" />     </navigation>
Now it’s time to insert WebView in all the fragments – Open fragment_home, fragment_gallery, fragment_slideshow XML files and use the code respectively. 
XML
XML
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".ui.home.HomeFragment">     <!--WebView is added on full screen so that        application interface can be interactive and        user can the web content is visible on full screen -->    <WebView        android:id="@+id/web_view_home"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent" />     </androidx.constraintlayout.widget.ConstraintLayout>
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".ui.gallery.GalleryFragment">     <WebView        android:id="@+id/web_view_practice"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintHorizontal_bias="0.0"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.0" />     </androidx.constraintlayout.widget.ConstraintLayout>
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".ui.slideshow.SlideshowFragment">     <WebView        android:id="@+id/web_view_contribute"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent" />     </androidx.constraintlayout.widget.ConstraintLayout>
Now we have to create a new Activity named “help“. So that, the application user can get info to take help from the service provider. Go to layout > right-click > new > activity > Empty Activity. 
Put the name of the activity according to your choice(name used in this application-“help”). Open layout > activity_help.xml and use the following code in it.
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#6C6B74"    tools:context=".help">     <!-- Image to display help sign-->    <ImageView        android:id="@+id/imageView3"        android:layout_width="255dp"        android:layout_height="173dp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.222"        app:srcCompat="@drawable/help" />     <!-- Indicating user that we are here         to help by using a textview-->    <TextView        android:id="@+id/textView2"        android:layout_width="371dp"        android:layout_height="95dp"        android:background="#2E303E"        android:text="For any kind of queries or help you can contact us at-"        android:textColor="#FFFCFC"        android:textSize="30sp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/imageView3"        app:layout_constraintVertical_bias="0.296" />     <!-- Contact details for help-->    <TextView        android:id="@+id/textView3"        android:layout_width="393dp"        android:layout_height="59dp"        android:background="#2E303E"        android:text="careers@geeksforgeeks.org"        android:textColor="#FFFFFF"        android:textSize="30sp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintHorizontal_bias="0.666"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/textView2"        app:layout_constraintVertical_bias="0.159" />     </androidx.constraintlayout.widget.ConstraintLayout>
After implementing the above code, the design of the activity_help.xml file looks like this. 
Now we have added a piece of code to take permission for access to the internet so that our WebView can work easily. Go to manifests > AndroidManifest.xml file and add the following code to it.
<uses-permission android:name=”android.permission.INTERNET” />
Step 5: Working with java files 
Create a new java class as shown below and name it as “WebViewController” 
Use the following code in the WebViewController.java file so that code to use the URL of a website can be executed.
Java
package com.example.geeksforgeeks; import android.webkit.WebView;import android.webkit.WebViewClient; // class is extended to WebViewClient to access the WebViewpublic class WebViewController extends WebViewClient {    @Override    public boolean shouldOverrideUrlLoading(WebView view, String url) {        // loadurl function will load the        // url we will provide to our webview         view.loadUrl(url);        return true;    }}
Open HomeFragment, GalleryFragment, SlideshowFragment java files and use the code respectively.
Java
Java
Java
package com.example.geeksforgeeks.ui.home; import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.webkit.WebView; import androidx.annotation.NonNull;import androidx.fragment.app.Fragment;import androidx.lifecycle.ViewModelProvider; import com.example.geeksforgeeks.R;import com.example.geeksforgeeks.WebViewController; public class HomeFragment extends Fragment {     private HomeViewModel homeViewModel;     public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {                 homeViewModel = new ViewModelProvider(this).get(HomeViewModel.class);        View root = inflater.inflate(R.layout.fragment_home, container, false);         // Created a WebView and used the loadurl method to give url to WebViewController class        WebView webView = root.findViewById(R.id.web_view_home);        webView.loadUrl("https://www.geeksforgeeks.org/");  // Url of portal is passed        webView.setWebViewClient(new WebViewController());  // WebViewController is used        return root;    }}
package com.example.geeksforgeeks.ui.gallery; import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.webkit.WebView; import androidx.annotation.NonNull;import androidx.fragment.app.Fragment;import androidx.lifecycle.ViewModelProvider; import com.example.geeksforgeeks.R;import com.example.geeksforgeeks.WebViewController; public class GalleryFragment extends Fragment {     private GalleryViewModel galleryViewModel;     public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {                 galleryViewModel = new ViewModelProvider(this).get(GalleryViewModel.class);        View root = inflater.inflate(R.layout.fragment_gallery, container, false);         WebView webView = root.findViewById(R.id.web_view_practice);        webView.loadUrl("https://practice.geeksforgeeks.org/");        webView.setWebViewClient(new WebViewController());        return root;    }}
package com.example.geeksforgeeks.ui.slideshow; import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.webkit.WebView; import androidx.annotation.NonNull;import androidx.fragment.app.Fragment;import androidx.lifecycle.ViewModelProvider; import com.example.geeksforgeeks.R;import com.example.geeksforgeeks.WebViewController; public class SlideshowFragment extends Fragment {     private SlideshowViewModel slideshowViewModel;     public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {                 slideshowViewModel = new ViewModelProvider(this).get(SlideshowViewModel.class);        View root = inflater.inflate(R.layout.fragment_slideshow, container, false);         WebView webView = root.findViewById(R.id.web_view_contribute);        webView.loadUrl("https://www.geeksforgeeks.org/contribute/");        webView.setWebViewClient(new WebViewController());        return root;    }}
Now all of our work is done and the last work is to connect the help activity to the floating button in our application with help of intent in the MainActivity.java file. Use the following code to do so. 
Java
package com.example.geeksforgeeks; import android.content.Intent;import android.os.Bundle;import android.view.Menu;import android.view.View; import androidx.appcompat.app.AppCompatActivity;import androidx.appcompat.widget.Toolbar;import androidx.drawerlayout.widget.DrawerLayout;import androidx.navigation.NavController;import androidx.navigation.Navigation;import androidx.navigation.ui.AppBarConfiguration;import androidx.navigation.ui.NavigationUI; import com.google.android.material.floatingactionbutton.FloatingActionButton;import com.google.android.material.navigation.NavigationView; public class MainActivity extends AppCompatActivity {     private AppBarConfiguration mAppBarConfiguration;     @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar = findViewById(R.id.toolbar);        setSupportActionBar(toolbar);         // Code for floating button        FloatingActionButton fab = findViewById(R.id.fab);         // On click listener is used on floating button        // to redirect to help activity        fab.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                // Intent is used to connect help activity to floating button                Intent activity2Intent = new Intent(getApplicationContext(), help.class);                startActivity(activity2Intent);            }        });         // default code for drawer layout and navigation view        DrawerLayout drawer = findViewById(R.id.drawer_layout);        NavigationView navigationView = findViewById(R.id.nav_view);         // Passing each menu ID as a set of Ids because each        // menu should be considered as top level destinations.        mAppBarConfiguration = new AppBarConfiguration.Builder(                R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow)                .setDrawerLayout(drawer)                .build();         // default code to control the navigation view        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);        NavigationUI.setupActionBarWithNavController(this, navController, mAppBarConfiguration);        NavigationUI.setupWithNavController(navigationView, navController);    }     @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items        // to the action bar if it is present.        getMenuInflater().inflate(R.menu.main, menu);        return true;    }     @Override    public boolean onSupportNavigateUp() {        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);        return NavigationUI.navigateUp(navController, mAppBarConfiguration)                || super.onSupportNavigateUp();    }}
Note: In MainActivity.java whole code is by default or pre-existing we have just added intent code to connect help activity with the floating button.
Output: 
If you want to take help or import the project then you can visit the GitHub link: https://github.com/Karan-Jangir/GeeksForGeeks/tree/master
chaitanyamunje
Android-Studio
Android
GBlog
Java
Project
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Add Views Dynamically and Store Data in Arraylist in Android?
Android RecyclerView in Kotlin
Android SDK and it's Components
Broadcast Receiver in Android With Example
How to Communicate Between Fragments in Android?
DSA Sheet by Love Babbar
Must Do Coding Questions for Companies like Amazon, Microsoft, Adobe, ...
GEEK-O-LYMPICS 2022 - May The Geeks Force Be With You!
Geek Streak - 24 Days POTD Challenge
Practice for cracking any coding interview