How to push up an existing view when snackbar is displayed?

Question

This is my attempt to push the "NEXT" button upwards when the snackbar is visible:

As you can see, it doesn't work as planned. It appears as if the textview was pushed up and behind the RelativeLayout and then reappears when the snackbar disappears. Instead, what I want is the textview to appear pushed up (so it is above the snackbar) and then come back down when the snackbar disappears. I have also created a small github repo to demonstrate this:

https://github.com/Winghin2517/TestFabMotion

Here is the CoordinatorLayout.Behavior I use for the "NEXT" to hide itself. The Behavior is taken from the FAB behavior when it gets pushed up when the snackbar appears:

public class FloatingActionButtonBehavior extends CoordinatorLayout.Behavior<TextView> {

    public FloatingActionButtonBehavior(Context context, AttributeSet attrs) {
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, TextView child, View dependency) {

        return dependency instanceof Snackbar.SnackbarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, TextView child, View dependency) {

        float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
        child.setTranslationY(translationY);
        return true;
    }
}

I have tried this using this xml:

<?xml version="1.0" encoding="utf-8"?>

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

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0">

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Click Here!"
            android:textAllCaps="true"
            android:textStyle="bold"
            android:background="@color/colorAccent"
            android:id="@+id/click_here"
            android:textSize="22sp"
            android:layout_marginBottom="12dp"
            android:gravity="center_horizontal"
            android:paddingTop="24dp"
            android:paddingLeft="24dp"
            android:paddingRight="24dp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/click_here"
            android:layout_centerHorizontal="true"
            android:src="@mipmap/ic_launcher"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/next"
            android:text="Next"
            android:layout_alignParentBottom="true"
            android:background="@color/colorAccent"
            android:clickable="true"
            android:gravity="center_horizontal"
            android:padding="16dp"
            android:textAllCaps="true"
            android:textStyle="bold"
            app:layout_behavior="fabmotiontest.com.fabtest.FloatingActionButtonBehavior" />

    </RelativeLayout>

    </android.support.design.widget.CoordinatorLayout>

</LinearLayout>

I have also tried using this xml:

<?xml version="1.0" encoding="utf-8"?>

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

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Click Here!"
            android:textAllCaps="true"
            android:textStyle="bold"
            android:background="@color/colorAccent"
            android:id="@+id/click_here"
            android:textSize="22sp"
            android:layout_marginBottom="12dp"
            android:gravity="center_horizontal"
            android:paddingTop="24dp"
            android:paddingLeft="24dp"
            android:paddingRight="24dp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/click_here"
            android:layout_centerHorizontal="true"
            android:src="@mipmap/ic_launcher"/>

    </RelativeLayout>

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorlayout"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/next"
            android:text="Next"
            android:background="@color/colorAccent"
            android:clickable="true"
            android:gravity="center_horizontal"
            android:padding="16dp"
            android:textAllCaps="true"
            android:textStyle="bold"
            app:layout_behavior="fabmotiontest.com.fabtest.FloatingActionButtonBehavior" />

    </android.support.design.widget.CoordinatorLayout>

</LinearLayout>

It just doesn't seem to work. Does anyone know how I can get it working?

Answer 1

After testing several solutions, I came across one xml layout that works.

The main difference between what I had tried before and the below is that the coordinatorlayout height is "match_parent" which means it overlays the views below it but because the coordinatorlayout is transparent, you don't see it and when the snackbar pushes up from the bottom, it will now have enough room to push the textview above the snackbar:

<?xml version="1.0" encoding="utf-8"?>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_weight="1">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Click Here!"
            android:textAllCaps="true"
            android:textStyle="bold"
            android:background="@color/colorAccent"
            android:id="@+id/click_here"
            android:textSize="22sp"
            android:layout_marginBottom="12dp"
            android:gravity="center_horizontal"
            android:paddingTop="24dp"
            android:paddingLeft="24dp"
            android:paddingRight="24dp" />

        <ImageButton
            android:id="@+id/btnComments"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_below="@+id/click_here"
            android:layout_centerHorizontal="true"
            android:background="@drawable/shadow_bg"
            android:src="@mipmap/ic_launcher" />

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal|bottom">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/next"
            android:text="Next"
            android:background="@color/colorAccent"
            android:clickable="true"
            android:gravity="center_horizontal"
            android:padding="16dp"
            android:textAllCaps="true"
            android:textStyle="bold"
            android:layout_gravity="center_horizontal|bottom"
            app:layout_behavior="fabmotiontest.com.fabtest.FloatingActionButtonBehavior" />

    </android.support.design.widget.CoordinatorLayout>

</RelativeLayout>