Share this post on:

WebView in Android is a extension of Android View, which allow to display the webpages in an Activity. Below is an Example by which you can implement WebView in your Application.

Step 1: Design the Xml Layout

<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"
    tools:context=".MainActivity"
    android:background="@color/lightgrey">
<androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:background="@color/skyblue">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:orientation="horizontal">
                <ImageView
                    android:layout_width="35dp"
                    android:layout_height="25dp"
                    android:layout_gravity="center"
                    android:src="@drawable/home_vector"
                    app:tint="@color/white">
                </ImageView>
                <com.mancj.materialsearchbar.MaterialSearchBar
                    style="@style/MaterialSearchBarLight"
                    app:mt_speechMode="true"
                    app:mt_hint="Custom hint"
                    app:mt_maxSuggestionsCount="10"
                    android:layout_width="300dp"
                    android:layout_height="wrap_content"
                    android:id="@+id/url"
                    android:visibility="gone"/>
                <SearchView
                    android:layout_width="330dp"
                    android:layout_height="wrap_content"
                    android:queryHint="Search Here.."
                    android:background="@drawable/input_button"
                    android:id="@+id/websearchurl">
                </SearchView>
                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="25dp"
                    android:layout_gravity="center"
                    android:src="@drawable/option_vector"
                    app:tint="@color/white">
                </ImageView>
            </LinearLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginTop="8dp"
                android:background="@color/white">
            </View>
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_marginTop="5dp">
                    <ImageView
                        android:layout_width="30dp"
                        android:layout_height="25dp"
                        android:layout_gravity="center"
                        android:src="@drawable/fire_vector"
                        app:tint="#C82121">
                    </ImageView>
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Hot Sites"
                        android:textSize="14sp"
                        android:textColor="@color/black"
                        android:padding="5dp"
                        android:layout_marginTop="5dp"
                        android:id="@+id/notamember">
                    </TextView>
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:gravity="center"
                    android:layout_marginTop="10dp">
                    <LinearLayout
                        android:layout_width="100dp"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:gravity="center">
                        <androidx.cardview.widget.CardView
                            android:layout_width="50dp"
                            android:layout_height="50dp"
                            app:cardCornerRadius="500dp"
                            app:cardElevation="3dp"
                            android:layout_marginRight="10dp">
                            <ImageView
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:src="@drawable/facebook"
                                android:id="@+id/facebook"
                                android:scaleType="fitXY">
                            </ImageView>
                        </androidx.cardview.widget.CardView>
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="Facebook"
                            android:gravity="center"
                            android:textSize="14sp"
                            android:textColor="@color/black"
                            android:padding="5dp"
                            android:layout_marginTop="5dp">
                        </TextView>
                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="100dp"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:gravity="center"
                        android:visibility="gone">
                        <androidx.cardview.widget.CardView
                            android:layout_width="50dp"
                            android:layout_height="50dp"
                            app:cardCornerRadius="500dp"
                            app:cardElevation="3dp"
                            android:layout_marginRight="10dp">
                            <ImageView
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:src="@drawable/whatsapp"
                                android:id="@+id/whatsapp"
                                android:scaleType="fitXY">
                            </ImageView>
                        </androidx.cardview.widget.CardView>
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="Whatsapp"
                            android:gravity="center"
                            android:textSize="14sp"
                            android:textColor="@color/black"
                            android:padding="5dp"
                            android:layout_marginTop="5dp">
                        </TextView>
                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="100dp"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:gravity="center">
                        <androidx.cardview.widget.CardView
                            android:layout_width="50dp"
                            android:layout_height="50dp"
                            app:cardCornerRadius="500dp"
                            app:cardElevation="3dp"
                            android:layout_marginRight="10dp">
                            <ImageView
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:src="@drawable/twitter"
                                android:id="@+id/twitter"
                                android:scaleType="fitXY">
                            </ImageView>
                        </androidx.cardview.widget.CardView>
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="Twitter"
                            android:gravity="center"
                            android:textSize="14sp"
                            android:textColor="@color/black"
                            android:padding="5dp"
                            android:layout_marginTop="5dp">
                        </TextView>
                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="100dp"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:gravity="center">
                        <androidx.cardview.widget.CardView
                            android:layout_width="50dp"
                            android:layout_height="50dp"
                            app:cardCornerRadius="500dp"
                            app:cardElevation="3dp"
                            android:layout_marginRight="10dp">
                            <ImageView
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:src="@drawable/instagram"
                                android:id="@+id/instagram"
                                android:scaleType="fitXY">
                            </ImageView>
                        </androidx.cardview.widget.CardView>
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="Facebook"
                            android:gravity="center"
                            android:textSize="14sp"
                            android:textColor="@color/black"
                            android:padding="5dp"
                            android:layout_marginTop="5dp">
                        </TextView>
                    </LinearLayout>

                </LinearLayout>
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginTop="5dp">
                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="25dp"
                    android:layout_gravity="center"
                    android:src="@drawable/fire_vector"
                    app:tint="#C82121">
                </ImageView>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Other Sites"
                    android:textSize="14sp"
                    android:textColor="@color/black"
                    android:padding="5dp"
                    android:layout_marginTop="5dp"
                   >
                </TextView>
            </LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="5dp">
         <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:padding="10dp"
                android:layout_marginLeft="15dp"
                android:layout_weight="1"
                app:cardElevation="10dp">
                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:src="@drawable/youtube"
                            android:id="@+id/youtube"
                            android:scaleType="fitXY">
                        </ImageView>
            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:padding="10dp"
                android:layout_weight="1"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="2dp"
                app:cardElevation="10dp">

                <ImageView
                    android:id="@+id/google"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="fitXY"
                    android:src="@drawable/google"></ImageView>
            </androidx.cardview.widget.CardView>
</LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="120dp"
                    android:padding="10dp"
                    android:layout_marginLeft="15dp"
                    android:layout_weight="1"
                    app:cardElevation="10dp">
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:src="@drawable/soundcloud"
                        android:id="@+id/souncloud"
                        android:scaleType="fitXY">
                    </ImageView>
                </androidx.cardview.widget.CardView>

                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="120dp"
                    android:padding="10dp"
                    android:layout_weight="1"
                    android:layout_marginRight="15dp"
                    android:layout_marginBottom="2dp"
                    app:cardElevation="10dp">
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:src="@drawable/dailymotion"
                        android:id="@+id/dailymotion"
                        android:scaleType="fitXY">
                    </ImageView>
                </androidx.cardview.widget.CardView>
            </LinearLayout>
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:padding="10dp"
                android:layout_weight="1"
                android:layout_marginTop="2dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="2dp"
                app:cardElevation="10dp">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:src="@drawable/vevo"
                    android:id="@+id/vevo"
                    android:scaleType="fitXY">
                </ImageView>
            </androidx.cardview.widget.CardView>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="120dp"
                    android:padding="10dp"
                    android:layout_marginLeft="15dp"
                    android:layout_marginBottom="10dp"
                    android:layout_weight="1"
                    app:cardElevation="10dp">

                    <ImageView
                        android:id="@+id/vuclip"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:scaleType="fitXY"
                        android:src="@drawable/vuclip"></ImageView>
                </androidx.cardview.widget.CardView>

                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="120dp"
                    android:padding="10dp"
                    android:layout_weight="1"
                    android:layout_marginRight="15dp"
                    android:layout_marginBottom="10dp"
                    app:cardElevation="10dp">
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:src="@drawable/vine"
                        android:id="@+id/vine"
                        android:scaleType="fitXY">
                    </ImageView>
                </androidx.cardview.widget.CardView>
            </LinearLayout>



        </LinearLayout>
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>



</LinearLayout>

Step 2: Initialize it in Java File

public class MainActivity extends AppCompatActivity {
ImageView google,facebook,youtube,instagram,whatsapp,twitter,dailymotion,soundcloud,vuclip,vine,vevo;
SearchView websearchurl;

MaterialSearchBar searchbar;

String Facebook_url="https://www.facebook.com/";
String Google_url="https://www.google.com/";
String Youtube="https://www.youtube.com/";
String Instagram="https://www.instagram.com/";
String Twitter ="https://twitter.com/?lang=en";
String Dailymotion="https://www.dailymotion.com/";
String Soundcloud="https://soundcloud.com/";
String Vuclip="https://www.vuclip.com/";
String Vine="https://vine.co/";
String Vevo="https://hq.vevo.com/";

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

google=view.findViewById(R.id.google);
facebook=view.findViewById(R.id.facebook);
youtube=view.findViewById(R.id.youtube);
instagram=view.findViewById(R.id.instagram);
whatsapp=view.findViewById(R.id.whatsapp);
twitter=view.findViewById(R.id.twitter);
dailymotion=view.findViewById(R.id.dailymotion);
soundcloud=view.findViewById(R.id.souncloud);
vuclip=view.findViewById(R.id.vuclip);
vine=view.findViewById(R.id.vine);
vevo=view.findViewById(R.id.vevo);
searchbar=view.findViewById(R.id.url);
websearchurl=view.findViewById(R.id.websearchurl);

websearchurl.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
    @Override
    public boolean onQueryTextSubmit(String query) {
        String google_url="https://www.google.com/search?q=";
        Intent intent=new Intent(getContext(),BrowserUI.class);
        intent.putExtra("url",google_url+websearchurl.getQuery());
        startActivity(intent);
        return false;
    }

    @Override
    public boolean onQueryTextChange(String newText) {
        return false;
    }
});

dailymotion.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent=new Intent(getContext(),BrowserUI.class);
        intent.putExtra("url",Dailymotion);
        startActivity(intent);
    }
});

soundcloud.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent=new Intent(getContext(),BrowserUI.class);
        intent.putExtra("url",Soundcloud);
        startActivity(intent);
    }
});

vuclip.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent=new Intent(getContext(),BrowserUI.class);
        intent.putExtra("url",Vuclip);
        startActivity(intent);
    }
});

vine.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent=new Intent(getContext(),BrowserUI.class);
        intent.putExtra("url",Vine);
        startActivity(intent);
    }
});

vevo.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent=new Intent(getContext(),BrowserUI.class);
        intent.putExtra("url",Vevo);
        startActivity(intent);
    }
});

google.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent=new Intent(getContext(),BrowserUI.class);
        intent.putExtra("url",Google_url);
        startActivity(intent);
    }
});

facebook.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent=new Intent(getContext(),BrowserUI.class);
        intent.putExtra("url",Facebook_url);
        startActivity(intent);
    }
});

youtube.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent=new Intent(getContext(),BrowserUI.class);
        intent.putExtra("url",Youtube);
        startActivity(intent);
    }
});

instagram.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent=new Intent(getContext(),BrowserUI.class);
        intent.putExtra("url",Instagram);
        startActivity(intent);
    }
});

twitter.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent=new Intent(getContext(),BrowserUI.class);
        intent.putExtra("url",Twitter);
        startActivity(intent);
    }
});
}

}

Step 3: Now we Create the Xml design of webview

<?xml version="1.0" encoding="utf-8"?>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout 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"
    tools:context=".BrowserUI"
    android:id="@+id/refereshlayout">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <ProgressBar
            android:layout_width="match_parent"
            android:layout_height="9dp"
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_marginTop="-2dp"
            android:progress="20"
            android:visibility="gone">
        </ProgressBar>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_marginTop="3dp">
            <ImageView
                android:layout_width="50dp"
                android:layout_height="25dp"
                android:layout_gravity="center"
                android:id="@+id/home"
                android:src="@drawable/home_vector"
                app:tint="@color/black" />
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:gravity="end">
                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="25dp"
                    android:layout_gravity="center"
                    android:id="@+id/back_button"
                    android:src="@drawable/back_button"
                    app:tint="@color/black" />
                <ImageView
                    android:layout_width="50dp"
                    android:layout_height="25dp"
                    android:layout_gravity="center"
                    android:id="@+id/forward_button"
                    android:src="@drawable/forward_button"
                    app:tint="@color/black" />
            </LinearLayout>
        </LinearLayout></LinearLayout>

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

          
        </RelativeLayout>
    </LinearLayout>

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Step 4 : Finally We initiaize the webview in Java class

public class BrowserUI extends AppCompatActivity {
    WebView webView;
    private String webUrl;
    FloatingActionButton login_btn;
    ProgressBar progressBar;
    ProgressDialog progressDialog;
    RelativeLayout relativeLayout;
    Button btnNoInternetConnection;
    SwipeRefreshLayout swiperefereshlayout;
    ImageView home,back_btn,forward_btn;
    EditText download_url;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_browser_u_i);
        progressBar = findViewById(R.id.progressBar);
        swiperefereshlayout = findViewById(R.id.refereshlayout);
        home = findViewById(R.id.home);
        back_btn = findViewById(R.id.back_button);
        forward_btn = findViewById(R.id.forward_button);
        


        String data = getIntent().getExtras().getString("url");
        webUrl = new String(data);


        swiperefereshlayout.setColorSchemeColors(Color.BLUE, Color.YELLOW, Color.GREEN);

        
        home.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(BrowserUI.this, MainActivity.class);
                startActivity(intent);
                finish();
            }
        });
        forward_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onForwardPressed();
            }
        });
        back_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
        swiperefereshlayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                webView.reload();
            }
        });
        progressDialog = new ProgressDialog(this);
        progressDialog.setMessage("Loading Please Wait");

        Window window = getWindow();
        window.addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

        webView = findViewById(R.id.webView);
        webView.loadUrl(webUrl);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);

        checkConnection();

        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                swiperefereshlayout.setRefreshing(false);
                super.onPageFinished(view, url);
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                progressBar.setVisibility(View.VISIBLE);
                progressBar.setProgress(newProgress);
                setTitle("Loading");
                progressDialog.show();

                if (newProgress == 100) {
                    progressBar.setVisibility(View.GONE);
                    setTitle(view.getTitle());
                    progressDialog.dismiss();
                }

                super.onProgressChanged(view, newProgress);
            }
        });
    }

    private void onForwardPressed()
    {
        if (webView.canGoForward())
        {
            webView.goForward();
        }
        else
        {
            Toast.makeText(this, "Can't Go Further!", Toast.LENGTH_SHORT).show();
        }
    }

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

    public void checkConnection()
    {
        ConnectivityManager connectivityManager=(ConnectivityManager)this.getSystemService(Context.CONNECTIVITY_SERVICE);
        NetworkInfo wifi=connectivityManager.getNetworkInfo(ConnectivityManager.TYPE_WIFI);
        NetworkInfo mobilenetwork=connectivityManager.getNetworkInfo(ConnectivityManager.TYPE_MOBILE);
        if (wifi.isConnected())
        {
            webView.loadUrl(webUrl);
            webView.setVisibility(View.VISIBLE);
        }
        else if (mobilenetwork.isConnected())
        {
            webView.loadUrl(webUrl);
            webView.setVisibility(View.VISIBLE);
        }
        else
        {
            webView.setVisibility(View.GONE);
        }
    }


}

Output:

WebView in Android Activity
WebView Display Area

You can get More about Android Studio

Share this post on:
Avatar Raiyan

Author: Raiyan

Hi, I guess you're here because you want to know a bit about me. huh? I am not so good on talking about myself but I'll give a short about me.

My Name is Raiyan. I am a Professional Application Developer and a Blogger.
I started this website to Share my Knowledge. Here I provide all my knowledge whatever I earned till now.

One Comment

Leave a Comment

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