How to create a webview with firebase in android studio

In this article, we have to create a webview layout in activity with a firebase URL string. So, we must implement the code below in your project and follow it step by step.

STEP: 01

Add internet permission in the AndroidManifest.xml layout

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

STEP: 02

Now, we have to replace DakActionBar with NoActionBar.

parent="Theme.MaterialComponents.DayNight.NoActionBar"

STEP: 03

Now, we have to add some string sentences into strings.xml.

<string name="custom_app_name">WebView App</string>
<string name="website_url">https://www.demowebsite.com</string>

STEP: 04

Now, we have to add some files to the drawable file named ic_back, ic_refresh, and logo. If you are not able to add then you have to our YouTube video.

STEP: 05

And, we have to create and design into activity_main.xml layout with the help of constraint layout. Here we can implement a click-button system which is an open webview layout.

<?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"
android:background="@color/purple_200"
android:fitsSystemWindows="true"
tools:context=".MainActivity">

<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:contentDescription="@string/app_name"
android:src="@drawable/logo"
app:layout_constraintBottom_toTopOf="@+id/openWebView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<androidx.cardview.widget.CardView
android:id="@+id/openWebView"
android:layout_width="250dp"
android:layout_height="50dp"
app:cardCornerRadius="48dp"
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.7">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Open WebView"
android:textColor="@color/purple_200"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

STEP: 06

And now, we have to create java code on the button-click system in MainActivity.class.

CardView cardViewBtn = findViewById(R.id.openWebView);
cardViewBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(MainActivity.this, HomeActivity.class);
startActivity(intent);
}
});

STEP: 07

And, we have to create and design a webview layout into activity_home.xml layout with the help of a constraint layout.

<?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"
android:background="@color/white"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".HomeActivity">

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="@color/purple_200"
android:paddingStart="8dp"
android:paddingEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<androidx.cardview.widget.CardView
android:id="@+id/backBtn"
android:layout_width="32dp"
android:layout_height="32dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardCornerRadius="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.3">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:layout_width="18dp"
android:layout_height="18dp"
android:contentDescription="@string/app_name"
android:src="@drawable/ic_back"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
android:id="@+id/refreshBtn"
android:layout_width="32dp"
android:layout_height="32dp"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardCornerRadius="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.3">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:contentDescription="@string/app_name"
android:src="@drawable/ic_refresh"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="36dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:cardCornerRadius="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/refreshBtn"
app:layout_constraintStart_toEndOf="@+id/backBtn"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.3">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="12dp"
android:paddingEnd="12dp">

<TextView
android:id="@+id/websiteUrl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLength="36"
android:text="@string/website_url"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/constraintLayout" />


</androidx.constraintlayout.widget.ConstraintLayout>

STEP: 08

And now, we have to create java code on the webview layout with refresh and back system in HomeActivity.class.

Some Variables Codes

private WebView webView;
private TextView websiteUrl;
private final FirebaseDatabase firebaseDatabase = FirebaseDatabase.getInstance();
private final DatabaseReference databaseReference = firebaseDatabase.getReference();
private final DatabaseReference childReference = databaseReference.child("url");

this code is imported under the onCreate method.

websiteUrl = findViewById(R.id.websiteUrl);
webView = findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient());

CardView refreshBtn = findViewById(R.id.refreshBtn);
refreshBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
webView.reload();
}
});

CardView backBtn = findViewById(R.id.backBtn);
backBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
finish();
}
});

Now, remain some methods here to load webview with the help of Firebase.

@Override
public void onBackPressed() {
if (webView.canGoBack()) {
webView.goBack();
} else {
super.onBackPressed();
}
}

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

}

@Override
public void onCancelled(@NonNull DatabaseError databaseError) {

}
});
}

***** THANK YOU *****

Leave a Reply

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

× Chat Now