How to Build a News App Using WebView Controller in Android Studio?

In this article, we are going to make a News App with help of a WebView Controller in Android Studio. By making this application we will learn how to access Internet Permission in our android application and how to use WebView with its class named WebView Controller. After making this application you will also be aware of Navigation Drawer activity in android studio. So, let us start!

What we are going to build in this article? 

In this application, we are going to use the Navigation Drawer activity and set different fragments of different newspapers in it. In the fragments of navigation drawer, we will use WebView to access the websites of the different news channels and at last, we will make a class WebView Controller so that, we can show all these websites in our own application rather than going to the browser. A sample GIF 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. 

Step by Step Implementation

Step 1: Create a New Project

Open Android Studio and create a new project by selecting Navigation Drawer Activity. You will get many default files but you have to make changes only in those where we have to work.

Step 2: 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"?>
<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="#201E1E"
    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">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="130dp"
        android:layout_height="110dp"
        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.0"
        app:srcCompat="@drawable/news_app_img" />

    <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="News App"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textColor="#F6F8CA"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.501"
        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 UI of the header file will be like:

Open menu > activity_main_drawer.xml file and use the following code in it so that we can add different items 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 android:checkableBehavior="single">

        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/z"
            android:menuCategory="secondary"
            android:title="Zee News" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/t1"
            android:menuCategory="secondary"
            android:title="Times Of India" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/h"
            android:menuCategory="secondary"
            android:title="Hindustan Times" />

    </group>

</menu>

After implementation of the following code design of the activity_main_drawer.xml file looks like

Change the color of the ActionBar to “#201E1E” so that it can match the color code of logo of our application and our UI can become more attractive. If you do not know how to change the color of the action bar then you can click here to learn it. Go to 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="#FDF2D5"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</androidx.drawerlayout.widget.DrawerLayout>

After implementing the above code our UI 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 items 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 Zee News-->
    <fragment
        android:id="@+id/nav_home"
        android:name="com.example.newsapp.ui.Home.HomeFragment"
        android:label="Zee News"
        tools:layout="@layout/fragment_home" />

    <!-- Fragment for Times Of India-->
    <fragment
        android:id="@+id/nav_gallery"
        android:name="com.example.newsapp.ui.Gallery.GalleryFragment"
        android:label="Times Of India"
        tools:layout="@layout/fragment_gallery" />

    <!-- Fragment for Hindustan Times-->
    <fragment
        android:id="@+id/nav_slideshow"
        android:name="com.example.newsapp.ui.Slideshow.SlideshowFragment"
        android:label="Hindustan Times"
        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 version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    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_zee"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

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.Gallery.GalleryFragment">

    <WebView
        android:id="@+id/web_view_toi"
        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" />

</androidx.constraintlayout.widget.ConstraintLayout>

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.Slideshow.SlideshowFragment">

    <WebView
        android:id="@+id/web_view_hindustan"
        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>

Step 3: Add internet permission in the manifest file

Now we have add a piece of code to take permission for access to the internet so that our WebView can work easily. Go to the manifests > AndroidManifest.xml file and add the following code to it.

<uses-permission android:name="android.permission.INTERNET" />

Step 4: Working with the 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

import android.webkit.WebView;
import android.webkit.WebViewClient;

// class is extended to WebViewClient to access the WebView
public 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;
    }
}

Now it’s time to work on java files of fragments. Open HomeFragment, GalleryFragment, SlideshowFragment java files and use the code respectively.

Java

package com.example.newsapp.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.newsapp.R;
import com.example.newsapp.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 WebView Controller class
        WebView webView = root.findViewById(R.id.web_view_zee);

        // Url of website is passed here
        webView.loadUrl("https://zeenews.india.com/");

        // WebViewController is used
        webView.setWebViewClient(new WebViewController());
        return root;
    }
}

Java

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.newsapp.R;
import com.example.newsapp.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_toi);
        webView.loadUrl("https://timesofindia.indiatimes.com/");
        webView.setWebViewClient(new WebViewController());
        return root;
    }
}

Java

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.newsapp.R;
import com.example.newsapp.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_hindustan);
        webView.loadUrl("https://www.hindustantimes.com/");
        webView.setWebViewClient(new WebViewController());
        return root;
    }
}

Congratulations!! You have successfully completed this news application. You can also add more number fragments for more news channels(a small task for you as learning from this article) and make the app more informative. Here is the output of our application.

Output:

If you want to take help or import the project then you can visit the GitHub link: https://github.com/Karan-Jangir/News_app/tree/master

Hence, we made a news application that uses WebViewController to access the news channels’ websites and show them in our application very easily.