The fadeIn animation doesn't work with a webview when the Activity is launched for first time

Question

I am creating an Activity in which information is displayed in a Webview, this Activity is accessed through a menu. I like taking care of the visual aspect, and that interaction with the Activity is fluid, however the information of the webview takes a while to load, is normal, but I do not like to appear abruptly when the rest of the interface is already over. The solution for me was when the information of the webview was ready to appear, show them slowly, it looks elegant, and it is here when I use the FadeIn animation.

The problem is: When I launch the app for the first time, access the menu, and from this to my Activity, the animation does not start, or does not look as it should. If I go back to the menu again and access to my Activity everything works well, looks good. It's like keep cache or something.

This is my code:

public class RazonamientoVerbal extends Fragment {

private PagerSlidingTabStrip tabs;
private ViewPager pager;
private ContactPagerAdapter adapter;
View v;


public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
    v = inflater.inflate(R.layout.rv_menu_layout, container, false);

    ImageView iv_flechaderecha = (ImageView) v.findViewById(R.id.iv_flechaderecha);
    iv_flechaderecha.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            ViewPager vp=(ViewPager) getActivity().findViewById(R.id.pager);
            vp.setCurrentItem(1);
        }
    });

    tabs = (PagerSlidingTabStrip) v.findViewById(R.id.tabs);
    pager = (ViewPager) v.findViewById(R.id.pager);
    adapter = new ContactPagerAdapter();

    pager.setAdapter(adapter);

    tabs.setViewPager(pager);

    return v;
}

private void iniciarLayout(final WebView wv) {
final Animation fadeIn = AnimationUtils.loadAnimation(this.getActivity(), R.anim.fadein);
            wv.setVisibility(View.VISIBLE);
            wv.startAnimation(fadeIn);
}




public class ContactPagerAdapter extends PagerAdapter implements PagerSlidingTabStrip.IconTabProvider {

    private final int[] ICONS = {R.drawable.ic_launcher_gplus, R.drawable.ic_launcher_gmail,
            R.drawable.ic_launcher_gmaps, R.drawable.ic_launcher_chrome, R.drawable.ic_launcher_gplus, R.drawable.ic_launcher_gmail,
            R.drawable.ic_launcher_gmaps, R.drawable.ic_launcher_chrome, R.drawable.ic_launcher_gplus, R.drawable.ic_launcher_gmail,
            R.drawable.ic_launcher_gmaps, R.drawable.ic_launcher_chrome, R.drawable.ic_launcher_gplus, R.drawable.ic_launcher_gmail,
            R.drawable.ic_launcher_gmaps, R.drawable.ic_launcher_chrome};

    public ContactPagerAdapter() {
        super();
    }

    @Override
    public int getCount() {
        return ICONS.length;
    }

    @Override
    public int getPageIconResId(int position) {
        return ICONS[position];
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // looks a little bit messy here
        final int padding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, getResources()
                .getDisplayMetrics());
        final WebView wv = new WebView(getActivity());
        wv.setVisibility(View.INVISIBLE);
        wv.setPadding(padding, padding, padding, padding);
        if (position == 0){
            wv.loadUrl("file:///android_asset/ic_conjuntos.html");
        }else if (position != 0){
            wv.loadUrl("file:///android_asset/lectura_5_preguntas_2.html");}
        wv.setScrollBarStyle(View.GONE);
        wv.setBackgroundColor(0x00000000);
        wv.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(wv, url);
                RazonamientoVerbal rv = new RazonamientoVerbal();
                wv.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        iniciarLayout(wv);
                    }
                },1000);
            }
        });
        container.addView(wv, 0);
        return wv;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object view) {
        container.removeView((View) view);
    }

    @Override
    public boolean isViewFromObject(View v, Object o) {
        return v == ((View) o);
    }

}

Answer 1

Step 1 : Put a view after the WebView with whatever background color you want.

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp" >

        <WebView
            android:id="@+id/WV_PROPERTYRULES"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </RelativeLayout>

<View
    android:id="@+id/ViewFader"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF" />

note: make sure you see that it covers the weview.

Step 2: Call Animate that view whenever you want to cause the fade.

private void FadeinmyWebView() {
    View ViewFader = findViewById(R.id.ViewFader);
    ObjectAnimator alpha_anim = ObjectAnimator.ofFloat(ViewFader, "alpha",
            1f, 0).setDuration(3000);
    alpha_anim.start();
}

Answer 2

In your xml, find where your webview is located at, and what is its parent. For example, lets say webview will be added inside a LinearLayout programmatically.

Now, ,if you add

android:animateLayoutChanges="true"

to your LinearLayout in xml, webview will be added with a fade animation in your screen.

This works for adding a view programmatically, and it should work fine if you just set visibility of your webview by

myWebView.setVisibility(View.VISIBLE);
or
myWebView.setVisibility(View.INVISIBLE);

This way, if fade animation is enough for you, you wont need to think about animating in your code. Android will handle it automatically for you when you are adding/removing views.

And if you use this way in your views in your application, view generation and destroying will feel very smooth with no boilerplate code.