¿Cómo crear una aplicación de noticias con WebView Controller en Android Studio?

En este artículo, vamos a crear una aplicación de noticias con la ayuda de un controlador WebView en Android Studio. Al hacer esta aplicación, aprenderemos cómo acceder al Permiso de Internet en nuestra aplicación de Android y cómo usar WebView con su clase llamada WebView Controller. Después de hacer esta aplicación, también estará al tanto de la actividad del Cajón de navegación en Android Studio. Entonces, ¡comencemos!

¿Qué vamos a construir en este artículo? 

En esta aplicación, vamos a utilizar la actividad del Cajón de Navegación y colocar diferentes fragmentos de diferentes periódicos en ella. En los fragmentos del cajón de navegación, usaremos WebView para acceder a los sitios web de los diferentes canales de noticias y, por último, crearemos una clase WebView Controller para que podamos mostrar todos estos sitios web en nuestra propia aplicación en lugar de ir al navegador. . A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java . 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Abra Android Studio y cree un nuevo proyecto seleccionando Actividad del cajón de navegación . Obtendrá muchos archivos predeterminados, pero solo tendrá que hacer cambios en aquellos en los que tengamos que trabajar.

Paso 2: trabajar con archivos XML

Abra el archivo layout > nav_header_main.xml para diseñar el encabezado de nuestro cajón de navegación. Para eso, use el siguiente código en él:

<?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>

Después de implementar el código anterior, la interfaz de usuario del archivo de encabezado será como:

Abra el archivo menu > activity_main_drawer.xml y use el siguiente código para que podamos agregar diferentes elementos a nuestro cajón de navegación y usar sus fragmentos.

<?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>

Después de la implementación del siguiente código, el diseño del archivo activity_main_drawer.xml parece

Cambie el color de la barra de acción a «#201E1E» para que coincida con el código de color del logotipo de nuestra aplicación y nuestra interfaz de usuario se vuelva más atractiva. Si no sabe cómo cambiar el color de la barra de acción, puede hacer clic aquí para aprenderlo. Vaya a diseño > actividad_principal.xml y use el siguiente código en él.

<?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>

Después de implementar el código anterior, nuestra interfaz de usuario se ve así

Vaya al archivo de navegación > mobile_navigation.xml y use el siguiente código para que podamos especificar el título y la etiqueta de nuestros artículos y usarlos fácilmente en archivos Java.

<?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>

Ahora es el momento de insertar WebView en todos los fragmentos. Abra los archivos XML fragment_home, fragment_gallery, fragment_slideshow y use el código respectivamente.

<?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>

Paso 3: Agregar permiso de Internet en el archivo de manifiesto

Ahora hemos agregado un fragmento de código para obtener permiso de acceso a Internet para que nuestro WebView pueda funcionar fácilmente. Vaya al archivo manifiestos > AndroidManifest.xml y agréguele el siguiente código.

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

Paso 4: trabajar con los archivos java

Cree una nueva clase Java como se muestra a continuación y asígnele el nombre » WebViewController «

Use el siguiente código en el archivo WebViewController.java para que se pueda ejecutar el código para usar la URL de un sitio web.

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;
    }
}

Ahora es el momento de trabajar en archivos java de fragmentos. Abra los archivos java HomeFragment, GalleryFragment, SlideshowFragment y use el código respectivamente.

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;
    }
}

¡¡Felicidades!! Ha completado con éxito esta aplicación de noticias. También puede agregar más fragmentos de números para más canales de noticias (una pequeña tarea para usted aprendiendo de este artículo) y hacer que la aplicación sea más informativa. Aquí está el resultado de nuestra aplicación.

Producción:

Si desea obtener ayuda o importar el proyecto, puede visitar el enlace de GitHub: https://github.com/Karan-Jangir/News_app/tree/master

Por lo tanto, creamos una aplicación de noticias que usa WebViewController para acceder a los sitios web de los canales de noticias y mostrarlos en nuestra aplicación muy fácilmente.