Make a Web Browser App in Android Studio and Kotlin

In this article, I will show you how to use WebView and make a web browser app using kotlin.

App layout

first of all, we need to create the application layout, we have to do some change in the color and style file before

color.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <color name="colorPrimary">#9c27b0</color>

    <color name="colorPrimaryDark">#6a0080</color>

    <color name="colorAccent">#d05ce3</color>

    <color name="colorWhite">#fff</color>

</resources>

style.xml

<resources>

    <!-- Base application theme. -->

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <!-- Customize your theme here. -->

        <item name="colorPrimary">@color/colorPrimary</item>

        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

        <item name="colorAccent">@color/colorAccent</item>

    </style>

</resources>

now let's design our app layout

activity_main.xml

<?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">

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:padding="8dp"

            android:orientation="horizontal"

            android:background="@color/colorPrimary"

            android:weightSum="12"

            android:gravity="center"

            >

            <ImageButton

                android:id="@+id/return_btn"

                android:layout_width="32dp"

                android:layout_height="32dp"

                android:background="@android:color/transparent"

                android:src="@drawable/ic_arrow_back_black_24dp"

                android:layout_marginRight="8dp"

                />

        <EditText

            android:id="@+id/url"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:hint="search something"

            android:background="@drawable/edit_bg"

            android:paddingVertical="10dp"

            android:paddingHorizontal="16dp"

            android:inputType="textWebEditText"

            android:lines="1"

            android:layout_weight="12"

            />

           <ImageButton

               android:id="@+id/search_btn"

               android:layout_width="32dp"

               android:layout_height="32dp"

               android:src="@drawable/ic_search_black_24dp"

               android:background="@android:color/transparent"

                android:layout_marginLeft="8dp"

               />

        </LinearLayout>

    <WebView

        android:id="@+id/webview"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        />

</LinearLayout>

now that we made the app design it's time for us to begin to code

Add user permission

to be able to use WebView in Android we have to add the internet user permission inside the manifest file

go to manifest.xml and just before the application tag add this line

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

MainActivity.kt

now let's code our app

package tn.doctorcode.webbrowsertutorial

import android.app.Activity

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

import android.webkit.WebResourceRequest

import android.webkit.WebView

import android.webkit.WebViewClient

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        // to be able of using webview in android we should add Internet permission first

        // go to manifest and add permission

        //we will add google as a defaut web page when our activity load

        web_browser.loadUrl("http://www.google.com")

        web_browser.settings.javaScriptEnabled = true // we need to enable javascript

        web_browser.canGoBack()

        web_browser.webViewClient = WebClient(this)

        // Now we need to load an url everytime we search something

        search_btn.setOnClickListener {

            val URL = url_txt.text.toString()

            web_browser.loadUrl(URL)

        }

        //now we will add the script to return back

        back_btn.setOnClickListener {

            web_browser.goBack()

        }

        //before we test our app we need to create a webclient class

    }

    class WebClient internal constructor(private val activity: Activity):WebViewClient(){

        override fun shouldOverrideUrlLoading(

            view: WebView?,

            request: WebResourceRequest?

        ): Boolean {

            view?.loadUrl(request?.url.toString())

            return true

        }

    }

}