How do you create a webview in fragment layout in Android Studio?

In this blog, we have to create a webview in fragment layout for showing all types of webview applications and also we have to make a multiple fragment layout with the help of a single layout UI. So, first, we create a custom_webview.xml layout which is the main webview layout, and based on this layout, we connect all fragments with this layout.

For better understanding, you must watch a YouTube video.

First, design a custom_webview.xml layout:

we create 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:fitsSystemWindows="true">
    
</androidx.constraintlayout.widget.ConstraintLayout>

Now, import the webview layout under Constraint Layout.

<WebView
    android:id="@+id/web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@+id/progress_bar"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Before proceeding further process, we have to download a webview progress bar.

Now, Lottie Animation View layout

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/progress_bar"
    android:layout_width="match_parent"
    android:layout_height="148dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:lottie_autoPlay="true"
    app:lottie_fileName="progress_bar_for_web_view.json"
    app:lottie_loop="true" />

Now, we have to create an action bar menu that shows the webview refresh button.

Create an action menu file named action_menu.xml given below.

<?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/refresh"
        android:icon="@drawable/ic_baseline_refresh"
        android:title="@string/refresh"
        app:showAsAction="always" />

</menu>

:::::: JAVA Code Implemented Below ::::::

Now, we are going to connect with Java code followed by step by step.

Fragment created with “extends Fragment”

View view;
WebView webView;

view = inflater.inflate(R.layout.custom_webview, container, false);
 return view;

Implement Lottie Animation connect with XML layout.

// Lottie Animation ID Implemented Below
LottieAnimationView lottieAnimationView = view.findViewById(R.id.progress_bar);

Implement the Webview code below.

// WebView Code Implemented Below
webView = view.findViewById(R.id.web_view);
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) {
        super.onPageStarted(view, url, favicon);
        lottieAnimationView.setVisibility(View.VISIBLE);
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        lottieAnimationView.setVisibility(View.GONE);
    }
});
webView.loadUrl(getString(R.string.one_link));
webView.setOnKeyListener((view, i, keyEvent) -> {
    if (keyEvent.getAction() == KeyEvent.ACTION_DOWN) {
        if (i == KeyEvent.KEYCODE_BACK) {
            if (webView.canGoBack()) {
                webView.goBack();
            } else {
                Fragment01.this.requireActivity().onBackPressed();
            }
        }
    }
    return true;
});

Now, we have to create an action bar menu to implement the refresh button.

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    setHasOptionsMenu(true);
    super.onCreate(savedInstanceState);
}

@Override
public void onCreateOptionsMenu(@NonNull Menu menu, @NonNull MenuInflater inflater) {
    inflater.inflate(R.menu.action_menu, menu);
    super.onCreateOptionsMenu(menu, inflater);
}

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

< :::::::::: Thank You :::::::::: >