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?

Syllabism

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>

Syllabism

Hi there , simon, in my case i have to set Wrap content to cardView to show it on bottom but when snack bar shows cardview goes up but it gets cut because of wrap content but setting it to match parent puts it on the top of all view. kindly suggest.! RL -> Cordinator -> CardView(with fab property) -> Relativelayout(with two images) – Mcgregor

Answer 2

What about that:

    Button button = (Button)findViewById(R.id.next);
button.setLayoutParams(new RelativeLayout.LayoutParams(
    RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams,
    myNewX, myNewY));

I don't know which x and y coordinates to use, you will have to try...

Superlative

This will not animate the button. This will just resize it. – Syllabism