title: Implementing two way data-binding WebView using MVVM in Kotlin
body: <p>I am trying to implement MVVM in all my app and I am very new to this, so I want to load a webview through my ViewModel, but I don't know the best way how to do this, if also has a progress bar that shows up when my web view is loading.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>    class NewWebViewFragment : Fragment() {
  
      private lateinit var viewModel: NewWebViewViewModel
  
      override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
  
          val binding: FragmentWebViewBinding = DataBindingUtil.inflate(inflater, R.layout.fragment_web_view, container, false)
  
          val webViewModelo = ViewModelProviders.of(this).get(NewWebViewViewModel::class.java)
  
          binding.webViewModel = webViewModelo
          binding.lifecycleOwner = this
  
  
          return binding.root
      }
  
  }
  </code></pre>
  
  <p>Now my ViewModel:</p>
  
  <pre><code>class NewWebViewViewModel : ViewModel() {
  
  //Implement in MVVM
  
  private fun showWebView(webView: WebView, progressBar: ProgressBar) {
  
          webView.webViewClient = WebViewClient()
          webView.webChromeClient = WebChromeClient()
  
          val webSettings = webView.settings
          webSettings.javaScriptEnabled = true
  
          webView.loadUrl("https://brand.randombrand.com/en/")
  
          webView.webViewClient = object : WebViewClient() {
              override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
                  progressBar.visibility = View.VISIBLE
                  super.onPageStarted(view, url, favicon)
              }
  
              override fun onPageFinished(view: WebView?, url: String?) {
                  progressBar.visibility = View.GONE
                  super.onPageFinished(view, url)
              }
          }
      }
  }
  </code></pre>
  
  <p>and my XML:</p>
  
  
  
  <pre><code>&lt;layout
      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"&gt;
  
  
      &lt;data&gt;
          &lt;variable
              name="webViewModel"
              type="com.example.navigations.viewmodel.webview.NewWebViewViewModel" /&gt;
      &lt;/data&gt;
  
      &lt;FrameLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      tools:context=".fragments.WebViewFragment"&gt;
  
  
      &lt;!-- TODO: Update blank fragment layout --&gt;
          &lt;WebView
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:id="@+id/webView"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toTopOf="parent"&gt;
  
  
      &lt;/WebView&gt;
  
      &lt;ProgressBar
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:id="@+id/progressBar"
          android:layout_gravity="center"/&gt;
  
  
      &lt;/FrameLayout&gt;
  &lt;/layout&gt;
  </code></pre>
  
  <p>The Error I get is a <code>nullpointerexception</code> cause the webview i'm passing is null.
  Any thoughts of the best way to implement this? </p>