Flickers while layout visible/gone

Question

Is there any way to hide a view without flickering its above view?

I am trying to hide a View below MapView. Once I set its visibility to GONE, MapView flickers. As I have to add more markers dynamically, couldn't able to keep MapView and bottomView in FrameLayout, since the bottomView will hide those markers in small size screens.

Layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true">


    <com.myapp.widgets.MapPlacePicker
        android:id="@+id/lay_fr_map_inc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/options_layout" />

    <LinearLayout
        android:id="@+id/options_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:animateLayoutChanges="true"
        android:background="#FFFFFF"
        android:orientation="vertical"
        android:visibility="visible">

        <com.myapp.widgets.FontTextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="10dp"
            android:text="Please select a location!!"
            android:textAppearance="@android:style/TextAppearance.Small" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <com.aigestudio.wheelpicker.WheelPicker
                android:id="@+id/main_option_view"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:layout_weight="0.5"
                app:wheel_atmospheric="true"
                app:wheel_curved="false"
                app:wheel_item_space="15dp"
                app:wheel_item_text_color="#ffafafaf"
                app:wheel_item_text_size="12dp"
                app:wheel_selected_item_text_color="@color/colorPrimary"
                app:wheel_visible_item_count="3" />

        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

Output:

I have also tried TranslationAnimation, but no luck. Its showing more gray space than before.

        int fromY = (visibility == View.GONE) ? 0 : optionLayout.getHeight();
        int toY = (visibility == View.GONE) ? optionLayout.getHeight() : 0;
        if (visibility == View.VISIBLE) {
            optionLayout.setVisibility(visibility);
        }
        TranslateAnimation animate = new TranslateAnimation(
                0,                 // fromXDelta
                0,                 // toXDelta
                fromY,                 // fromYDelta
                toY); // toYDelta
        animate.setDuration(1000);
        animate.setInterpolator(new AccelerateDecelerateInterpolator());
        //animate.setFillAfter(false);
        animate.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                if (visibility == View.GONE)
                    optionLayout.setVisibility(visibility);
                optionLayout.clearAnimation();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        optionLayout.startAnimation(animate);

Answer 1

I don't see any flickering in that animation; if you want to avoid the vertical resizing behavior of lay_fr_map_inc then you can just remove this attribute:

android:layout_above="@+id/options_layout"

...and maybe make the height match_parent. Then, lay_fr_map_inc will stay full height, but the bottom portion will be hidden by options_layout when it appears (instead of scooting upwards).

Don't forget to change the map padding when you do this, so you don't obscure the Google logo (which is a violation of the rules): setPadding()