Webview causing blackening of background images of various elements on page

Issue

The banner ads were working all good till today. I noticed there is flickering happening everytime the animation happens inside banner ad.

This is affecting the background regions of all elements inside Fragment/Activity wherever AdMob Fragment is imported and loading

class AdBFiller : Fragment() {
    private lateinit var mAdView: AdView
    private val mAppUnitId: String = "ad-code"
    var fragContext: Context? = null

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {

        val adFrag = inflater.inflate(R.layout.banner_filler, container, false)
        fragContext = context

        initializeBannerAd()

        viewAppender(fragContext!!, adFrag)

        loadBannerAd()
        return adFrag
    }

    private fun initializeBannerAd() {
        MobileAds.initialize(fragContext!!)
    }

    private fun loadBannerAd() {
        val adRequest = AdRequest.Builder().build()
        mAdView.loadAd(adRequest)
    }

    fun viewAppender(contxt: Context, adFrag: View) {
        mAdView = AdView(contxt)
        mAdView.setAdSize(AdSize.BANNER)        // also same issue with SMART_BANNER
        mAdView.setAdUnitId(mAppUnitId)

        (adFrag as FrameLayout).addView(mAdView)
    }

    override fun onDestroyView() {
        mAdView.destroy()
        super.onDestroyView()
    }

    override fun onDestroy() {
        mAdView.destroy()
        super.onDestroy()
    }

    override fun onResume() {
        super.onResume()
        mAdView.resume()
    }


    override fun onPause() {
        super.onPause()
        mAdView.pause()
    }

}

Layout (banner_filler) is as follows:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".activities.AdBFiller"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</FrameLayout>

Call in place of usage is

 private fun inflateAds() {
        supportFragmentManager
            .beginTransaction()
            .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)
            .add(R.id.adStub, AdBFiller())
            .commit()
    }

adStub is a FrameLayout

I guess this is automatically happening because of AdMob code, as it was working good for many days. How to insulate app, from the impact of these?

Although effect is minor in the video, my other pages are greatly affected

Flickering video

---

EDIT:

Turns out this is an issue specific to my mobile/manufacturer and because of WebView loading on the page. Since Ads use webview, it appeared as the cause of issue lied within the Ad injected code

Model: Honor Huawei - 9N,
LLD-AL20,
EMUI 9.1.0,
Android Verion 9

Specifics:

The content of webview has to finish loading for this problem to start. Some views are relatively unaffected. For every load of page, those same elements of the page are affected i.e. fixed reproduction means out of 50 elements on page, everytime those fixed 20 are affected.

I guess I have to position & inflate WebView is a manner which doesn't interfere with rest of elements.

Webview or ads are last element just before closing of the Root ConstrainLayout for the Fragment.

Has anyone found fix for issue like this?

Solution

Solved with:

android:layerType="software"

Answered By - Rahul Kahale