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
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"?>
<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"?>
<androidx.drawerlayout.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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
android:id="@+id/mobile_navigation"
app:startDestination="@+id/nav_home">
<fragment
android:id="@+id/nav_home"
android:name="com.example.newsapp.ui.Home.HomeFragment"
android:label="Zee News"
tools:layout="@layout/fragment_home" />
<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
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
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".ui.Home.HomeFragment">
<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
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
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;
public class WebViewController extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
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);
WebView webView = root.findViewById(R.id.web_view_zee);
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.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.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.
Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!
Adblock test (Why?)
Original page link
Best Cool Tech Gadgets
Top favorite technology gadgets
0 comments:
Post a Comment