Search⌘ K
AI Features
Home
Courses
Mastering MVVM Architecture in Android Development using Kotlin

Article Fragment

Explore how to implement WebView within an Android MVVM architecture using Kotlin to display news articles directly in your app. Learn to handle navigation safely with type-safe arguments and save favorite articles to a local database. This lesson helps you build interactive and maintainable news app components.

We'll cover the following...

WebView implementation

In the previous lesson, we introduced ourselves to WebView. Now, we’ll implement WebView to enable reading articles within our application for a more interactive user experience. Let’s look at the code.

Kotlin
class ArticleFragment : Fragment(R.layout.fragment_article) {
    lateinit var viewModel: NewsViewModel
    val args: ArticleFragmentArgs by navArgs()
    private var fragmentArticleBinding: FragmentArticleBinding? = null
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val binding = FragmentArticleBinding.bind(view)
        fragmentArticleBinding = binding
        val newsRepository = NewsRepository(ArticleDatabase(requireContext() as NewsActivity))
        val viewModelProviderFactory =
            NewsViewModelProvider(activity?.application!!, newsRepository)
        viewModel = ViewModelProvider(this, viewModelProviderFactory).get(NewsViewModel::class.java)
        val article = args.article
        binding.webView.apply {
            webViewClient = WebViewClient()
            loadUrl(article.url)
            webViewClient = object : WebViewClient() {
                override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
                    super.onPageStarted(view, url, favicon)
                    binding.progressBar.visibility = View.VISIBLE
                }
                override fun onPageFinished(view: WebView?, url: String?) {
                    super.onPageFinished(view, url)
                    binding.progressBar.visibility = View.GONE
                }
            }
        }
        binding.fab.setOnClickListener {
            val favouriteArticles = FavouriteArticles(
                article.id,
                article.author,
                article.content,
                article.description,
                article.publishedAt,
                article.source,
                article.title,
                article.isBookmarked,
                article.url,
                article.urlToImage
            )
            viewModel.saveArticle(favouriteArticles)
            Snackbar.make(view, "Article successfully saved", Snackbar.LENGTH_SHORT).show()
        }
    }
}

We create a NewsViewModel object, which calls the saveArticle() method to save favorite articles, and the ArticleFragmentArgs object, which is used by the navigation component to pass data ...