In android we use several views to show content to the user Additionally, to show the web content or load the web URL on the application we can use the intent to redirect the links to the browser but in some cases, we may need more control over the UI. In this case, a WebView is used for displaying content.
To load the WebView content in the app we must have access to the Internet. To get internet access, we need to add the request INTERNET permission in the manifest file.
|
1 2 3 4 |
<manifest ... > <uses-permission android:name="android.permission.INTERNET" /> ... </manifest> |
In this blog, we will learn how to use the WebView inside the Bottom Sheet fragment.
How to add WebView
To add a WebView to your app, you can include the <WebView> element in your activity/Fragment layout.
|
1 2 3 4 5 |
<WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" /> |
To load a web page in the WebView, use can loadUrl().
|
1 |
webview.loadUrl("https://www.webkul.com") |
For loading a basic WebView that displays a web page the above-given detail is enough. If you want more modification required then you can use the following:
Enabling fullscreen support with WebChromeClient. This class is also called when a WebView needs permission to alter the host app’s UI, such as creating or closing windows and sending JavaScript dialogs to the user.
Handling events that impact content rendering, such as progress or redirection with the help of WebViewClient. You can intercept URL loading with WebViewClient.
Change WebSettings to enable JavaScript. You can use JavaScript to access Android framework objects that you have injected into a WebView.
Bottom Sheet Dialog Fragment implementation
To load the WebView on the bottom sheet dialog fragment we have to extend the BottomSheetDialogFragment().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
class BlogWebViewBSFragment : BottomSheetDialogFragment() { companion object { fun newInstance(url: String): BlogWebViewBSFragment { val sizeChartBottomSheetFragment = BlogWebViewBSFragment() val args = Bundle() args.putString(BUNDLE_BLOG_URL, url) sizeChartBottomSheetFragment.arguments = args return sizeChartBottomSheetFragment } } lateinit var mContentViewBinding: FragmentBlogWebViewBsBinding override fun onCreateDialog(savedInstanceState: Bundle?): Dialog { return super.onCreateDialog(savedInstanceState).apply { setOnKeyListener(object : DialogInterface.OnKeyListener { override fun onKey(dialog: DialogInterface?, keyCode: Int, event: KeyEvent): Boolean { if (keyCode == KeyEvent.KEYCODE_BACK) { // Back key is pressed if (event.action != KeyEvent.ACTION_DOWN) return true else { when { mContentViewBinding.blogInfoWebView.canGoBack() -> { mContentViewBinding.blogInfoWebView.goBack() } else -> { dialog?.dismiss() // Optional return true } } } } return false } }) } } override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { super.onCreateView(inflater, container, savedInstanceState) mContentViewBinding = DataBindingUtil.inflate( inflater, R.layout.fragment_blog_web_view_bs, container, false ) return mContentViewBinding.root } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) startInitialization() } private fun startInitialization() { if(isAdded) { val url = requireArguments().getString(BUNDLE_BLOG_URL) ?: "" if(!url.isNullOrEmpty()) { mContentViewBinding.loading=true mContentViewBinding.blogInfoWebView.settings.javaScriptEnabled = true mContentViewBinding.blogInfoWebView.settings.javaScriptCanOpenWindowsAutomatically = true mContentViewBinding.blogInfoWebView.webChromeClient = WebChromeClient() mContentViewBinding.blogInfoWebView.isHorizontalScrollBarEnabled = false mContentViewBinding.blogInfoWebView.webViewClient = object : WebViewClient() { override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean { view.loadUrl(url.toString()) mContentViewBinding.loading=true // CustomTabsHelper.openWebView(requireContext(), url) return true } @TargetApi(Build.VERSION_CODES.N) override fun shouldOverrideUrlLoading( view: WebView, request: WebResourceRequest ): Boolean { view.loadUrl(request.url.toString()) return true } override fun onPageFinished(view: WebView?, url: String?) { super.onPageFinished(view, url) mContentViewBinding.loading=false } } mContentViewBinding.blogInfoWebView.webChromeClient = WebChromeClient() mContentViewBinding.blogInfoWebView.loadUrl(url) } } } } |
On Our Bottom sheet fragment, we have to override the onCreateDialog method to handle the back button press. After that, we can work on the WebView initialization on the on-view created method.
The layout will be like the one below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <data> <import type="android.view.View" /> <variable name="loading" type="Boolean" /> </data> <RelativeLayout android:id="@+id/wishlist_comment_bottom_sheet" android:layout_width="match_parent" android:layout_height="match_parent" app:behavior_hideable="true" app:layout_behavior="@string/bottom_sheet_behavior"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="@dimen/bottom_sheet_bottom_margin"> <androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <WebView android:id="@+id/blog_info_web_view" android:layout_width="match_parent" android:layout_height="match_parent" android:nestedScrollingEnabled="false" /> </RelativeLayout> </androidx.core.widget.NestedScrollView> </RelativeLayout> <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_centerHorizontal="true" android:background="@drawable/progress_bar_bg" android:indeterminate="true" android:visibility="@{safeUnbox(loading) ? View.VISIBLE : View.GONE}" /> </RelativeLayout> </layout> |
The Result will be like this:
You can also check out the official documentation provided by Google click here and to learn more about the bottom sheet dialog you check the official documentation click here.
. . . . . . . . .
That’s it from my side for today, thanks for reading it until now. You can check our other android blogs Click Here.