Android WebView DarkMode

Android WebView allow you to display web content as part of your activity layout, WebView class is an extension of Android's View class , you can used it to Create web based application or just show/embed a web page in your app .

In the previous tutorial we have seen basics of Android WebView 

In this tutorials we will see dark mode feature for webview

Android Manifest

 Add Internet Permission to manifest file .

file : AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.tutorialsbuzz.androidwebview">

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

    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

XML Layout 

1. Create XML Layout activity_main.xml , this will be set as content view for launcher Activity (MainActivity.kt) .
2. Add WebView to xml layout .
3. Add two Buttons .

file : activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:orientation="vertical">
    
    <include layout="@layout/action_layout"/>

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

</LinearLayout>

Load Page Into WebView

webView.loadUrl("https://www.tutorialsbuzz.com/");

DarkMode Feature

Add below dependency to app level build.gradle 

file : build.gradle  

implementation 'androidx.webkit:webkit:1.3.0'

DarkMode ON :

WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON)

DarkMode OFF :

WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_OFF)

Activity

1. Create a koltin class MainActivity.kt and extend it to AppCompatActivity class .
2. Override onCreate function and set the content of this MainActivity with above defined xml layout (activity_main.xml).
3. Using webView reference apply webview settings and load url .
4. Apply DarkMode Mode onClick of button
   
   
   • WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON)
     
     
   • WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_OFF)

file : MainActivity.kt

package com.tutorialsbuzz.webviewdarkmode

import android.os.Bundle
import android.webkit.WebResourceRequest
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity
import androidx.webkit.WebSettingsCompat
import androidx.webkit.WebViewFeature
import kotlinx.android.synthetic.main.action_layout.*
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    val TAG: String = MainActivity::class.java.simpleName
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        webView.loadUrl("https://www.tutorialsbuzz.com/");

        webView.settings.javaScriptEnabled = true

        webView.webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(
                view: WebView?,
                request: WebResourceRequest?
            ): Boolean {
                return false
            }
        }

        normal.setOnClickListener({
            if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
                WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_OFF)
            }
        })

        dark.setOnClickListener({
            if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
                WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON)
            }
        })
    }

    override fun onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack()
        } else {
            super.onBackPressed()
        }
    }
}

DOWNLOAD CODE