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
- Create XML Layout activity_main.xml , this will be set as content view for launcher Activity (MainActivity.kt) .
- Add WebView to xml layout .
- Add two Buttons .
<?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
file : build.gradle
DarkMode ON :
DarkMode OFF :
file : MainActivity.kt
implementation 'androidx.webkit:webkit:1.3.0'
WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON)
DarkMode OFF :
WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_OFF)
Activity
- Create a koltin class MainActivity.kt and extend it to AppCompatActivity class .
- Override onCreate function and set the content of this MainActivity with above defined xml layout (activity_main.xml).
- Using webView reference apply webview settings and load url .
- Apply DarkMode Mode onClick of button
- WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON)
- WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_OFF)
- WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON)
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() } } }
No comments:
Post a Comment