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

05 Aug, 2021
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!
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 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
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 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 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
Java
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;    }}
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;    }}
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.
Android
GBlog
Java
Project
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Retrofit with Kotlin Coroutine in Android
Must Do Coding Questions for Companies like Amazon, Microsoft, Adobe, ...
DSA Sheet by Love Babbar
Socket Programming in C/C++
GET and POST requests using Python
Must Do Coding Questions for Product Based Companies