How to create a modern web view for android

0 Comments





In this article, we can create a modern web view for android applications. If you want to make an Android app then you must know this type of web view. Now a day every web view the mobile application is applying this type of web view. It a user friendly and good look and reliable for android users.

So, if you interested to create a modern and latest web view then follow stepwise which is given below.

Step: 1

First, we can do import material design dependency in your build.gradle(Module: app) under Gradle Scripts folder. Also, import Firebase Database Dependency for Realtime database purposes. Both dependency import in your dependency sections. We will be given a dependency below.

// Material Design Dependency
implementation 'com.google.android.material:material:1.1.0'
// Realtime Database Dependency
implementation 'com.google.firebase:firebase-database:19.3.0'

Step: 2

Now, we can create a vector asset for refresh icon and lock icon purposes. These two icons are important for this project. If you do not want to create vector asset icons then you can not make a modern look web view for android application.

Step: 3

You can create a menu folder to insert menu files such that if you do not know how to create then you must WATCH OUR YouTube VIDEO. The link is given here.

This is Our YouTube Video Link: Click Here Now

Step: 4

After inserted vector asset icons then you can create a menu file. So right-click menu folder and go to New and select Menu Resource File and named : sub_menu. After created a sub_menu.xml file then you can create a one item title called Refresh. Else you can copy below code and paste in your sub_menu file.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menu_refresh"
android:icon="@drawable/refresh"
android:title="Refresh"
app:showAsAction="always" />
</menu>

Step: 5

Now, we can create an activity_main.xml file code. In this activity_main.xml you can create a ToolBar and WebView Layout. If you do not how to create then you must watch our YouTube Videos Otherwise you can copy below code and paste in your .xml files.

IF YOU COPY BELOW CODE THEN YOU MUST CHANGE YOUR ACTIVITY NAME. THEN YOUR PROJECT WILL WORKING.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity">

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimaryDark"
android:gravity="center_vertical"
android:isScrollContainer="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="1">

<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:padding="4dp"
app:cardBackgroundColor="@android:color/white"
app:cardCornerRadius="6dp">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:id="@+id/secure"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:contentDescription="@string/app_name"
android:paddingStart="8dp"
android:paddingLeft="8dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:src="http://www.click2code.in/android-studio/how-to-create-a-modern-web-view-for-android-webview-design-with-firebase-in-android-studio/@drawable/lock" />

<TextView
android:id="@+id/webURL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="start"
android:layout_marginTop="5dp"
android:layout_toEndOf="@id/secure"
android:layout_toRightOf="@id/secure"
android:maxLength="30"
android:text="website url"
android:textAppearance="@style/TextAppearance.AppCompat.Small"
android:textColor="#808080" />

</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.appcompat.widget.Toolbar>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<ProgressBar
android:id="@+id/progressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.1" />
</LinearLayout>

<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

Step: 6

Now, you can create and work under a MainActivity.java file. Here first we create multiple numbers of variables named WebView, TextView, FirebaseDatabase, DatabaseRefernce, PreogressBar, and String. All variables are given below if you do not want to create then simply copy below codes and paste in your project.

private WebView webView;
private TextView msgURL;
private FirebaseDatabase firebaseDatabase = FirebaseDatabase.getInstance();
private DatabaseReference reference = firebaseDatabase.getReference();
private DatabaseReference childReference = reference.child("url0");
private ProgressBar progressBar;
String currentURL;

After that, you can create a ToolBar and implement all variable code what we created above in our project. We will give you the codes below. Also, we can provide all web view code below. Simply you can copy all codes and paste under the onCreate method.

Toolbar toolbar = findViewById(R.id.toolBar);
setSupportActionBar(toolbar);

progressBar = findViewById(R.id.progressBar);
progressBar.getProgressDrawable().setColorFilter(
Color.RED, PorterDuff.Mode.SRC_IN);
progressBar.setMax(100);

msgURL = findViewById(R.id.webURL);
webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(false);

webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setScrollbarFadingEnabled(false);

webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
progressBar.setVisibility(View.VISIBLE);
 super.onPageStarted(view, url, favicon);
 }

@Override
public void onPageFinished(WebView view, String url) {
progressBar.setVisibility(View.GONE);
 super.onPageFinished(view, url);
 currentURL = url;
 }
});
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
 progressBar.setProgress(newProgress);
 }
});

After pasted and created all codes under the onCreate method then you can create an onStart method for FirebaseDatebase then you can copy below code and paste in your project but this code pastes out of onCreate method.

Do not paste these codes under the onCreate method.

@Override
protected void onStart() {
super.onStart();
 childReference.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
String message = dataSnapshot.getValue(String.class);
 msgURL.setText(message);
 webView.loadUrl(message);
 }
@Override
public void onCancelled(@NonNull DatabaseError databaseError) {
}
});
}

Now, we can create onBackPressed method codes means when the web view is open then when we pressed back button on our mobile navigation button then web view move back page. So you can copy below code and paste below onStart method.

// on WebView Back Pressed Function
@Override
public void onBackPressed() {
if (webView.canGoBack()) {
webView.goBack();
 } else {
super.onBackPressed();
 }
}

Now, we can create an onCreateOptionMenu method. Here we can attach the menu folder of this web view page. Below codes, you can paste below the onBackPressed method.

// Action Bar Menu
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater menuInflater = getMenuInflater();
 menuInflater.inflate(R.menu.sub_menu, menu);
 return super.onCreateOptionsMenu(menu);
}

Now, we can create an onOptionItemSelected method. Here you can add refresh ActionBar and ToolBar button. This process works like when we press the refresh icon then our web view page will be refresh. The code is given below.

@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
if (item.getItemId() == R.id.menu_refresh) {
webView.reload();
 }
return super.onOptionsItemSelected(item);
}

Step: 7

Last thing you can add INTERNET PERMISSION and if you use web view URL (http://) then you must add CleartextTraffic= true. The code and image are given below.

android:usesCleartextTraffic="true">

Now, Finished All project code is implemented in your project. You can RUN your project into a real device.




share this

Leave a Reply

Your email address will not be published. Required fields are marked *