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