How to avoid FAB to overlap with BottomNavigationView?

I Have a fab and BottomNavigationView in my activity, I am using fab to hide and show BottomNavigationView. My following code works fine with Android 7.0 (on 1080 x 1920) but on 4.4 (on 768 x 1280) both the FAB and BottomNavigationView is not visible, In logcat it says

Could not find class 'android.graphics.drawable.RippleDrawable', referenced from method android.support.v7.widget.AppCompatImageHelper.hasOverlappingRendering

I also get a warning on FAB saying

@id/fab can overlap @id/navigation if @id/fab grows due to localize text expansion. If relative layout has text or button items aligned to left and right sides they can overlap each other due to localized text expansion unless they have mutual constraints like toEndOf/toStartOf.

This is my layout

<RelativeLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom|end"
    android:clickable="true"
    app:fabSize="mini"
    app:rippleColor="@color/colorPrimary"
    android:layout_margin="16dp"
    app:srcCompat="@drawable/ic_show" />

    <FrameLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/container"
        xmlns:android="http://schemas.android.com/apk/res/android">

        <!-- FrameLayout contents -->

    </FrameLayout>

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:background="@android:color/transparent"
        android:elevation="3dp">

        <!-- FrameLayout contents -->

    </FrameLayout>


        <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_alignParentBottom="true"
            android:background="@color/colorPrimary"
            android:iconifiedByDefault="false"
            app:itemIconTint="#fff"
            app:itemTextColor="#fff"
            app:menu="@menu/bottom_bar"/>

</RelativeLayout>

This is how i am hiding/showing the bottom

fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            if(bottomNavigationView.getVisibility() == View.VISIBLE){

                bottomNavigationView.setVisibility(GONE);

                fab.setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.ic_show));

                final ObjectAnimator moveFab
                        = ObjectAnimator.ofFloat(fab, View.TRANSLATION_Y, fab.getY(), 0);
                moveFab.setDuration(300);
                moveFab.setInterpolator(new DecelerateInterpolator());
                moveFab.start();

            }else if(bottomNavigationView.getVisibility() == View.GONE){

                bottomNavigationView.setVisibility(View.VISIBLE);

                fab.setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.ic_hide));

                final ObjectAnimator moveFab
                        = ObjectAnimator.ofFloat(fab, View.TRANSLATION_Y, fab.getY(), -150);
                moveFab.setDuration(300);
                moveFab.setInterpolator(new DecelerateInterpolator());
                moveFab.start();

            }

        }
    });