Move cardview on Snackbar - Co-ordinator layout

Question

I have a custom textview in a cardview at the bottom of the screen and using snackbar to display error messages on logging in. Now when the snackbar shows, the sign up textview should move up. I have tried using co-ordinator layout but it does not work. This is the image

Answer 1

This is what I did in-case someone is looking out.

activity_login.xml

<android.support.design.widget.CoordinatorLayout 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">

<include
    android:id="@+id/toolbar"
    layout="@layout/toolbar" />

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="com.mypackage.CoordinatorBehavior"/>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/signUpCardView"
        android:gravity="center">

        <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            card_view:cardBackgroundColor="@color/light_gray"
            card_view:cardCornerRadius="2dp"
            card_view:cardElevation="6dp">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <android.support.design.widget.TextInputLayout
                    android:id="@+id/userNameEditText_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <EditText
                        android:id="@+id/userNameEditText"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="@string/username_hint"
                        android:inputType="textEmailAddress" />
                </android.support.design.widget.TextInputLayout>

                <android.support.design.widget.TextInputLayout
                    android:id="@+id/passwordEditText_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/userNameEditText_layout">

                    <EditText
                        android:id="@+id/passwordEditText"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/userNameEditText"
                        android:hint="@string/password_hint"
                        android:inputType="textPassword" />
                </android.support.design.widget.TextInputLayout>

                <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/passwordEditText_layout"
                    android:layout_gravity="center"
                    android:layout_marginBottom="10dp"
                    android:layout_marginEnd="10dp"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_marginStart="10dp"
                    android:layout_marginTop="5dp"
                    card_view:cardBackgroundColor="@color/blue_normal"
                    card_view:cardCornerRadius="2dp"
                    card_view:cardElevation="2dp">

                    <com.myview                       android:id="@+id/loginButton"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="?attr/selectableItemBackground"
                        android:gravity="center"
                        android:paddingBottom="10dp"
                        android:paddingTop="10dp"
                        android:text="@string/title_activity_login"
                        android:textColor="@color/title_white"
                        android:textSize="@dimen/large_text_size"
                        android:textStyle="bold" />
                </android.support.v7.widget.CardView>
            </RelativeLayout>
        </android.support.v7.widget.CardView>
    </RelativeLayout>


    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/signUpCardView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="5dp"
        android:layout_marginEnd="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="5dp"
        card_view:cardBackgroundColor="@color/refresh_red"
        card_view:cardCornerRadius="2dp"
        card_view:cardElevation="2dp">

        <com.myview.TSCustomFontTextView
            android:id="@+id/signUpButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/selectableItemBackground"
            android:gravity="center"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:text="@string/title_activity_sign_up"
            android:textColor="@color/title_white"
            android:textSize="@dimen/large_text_size"
            android:textStyle="bold" />
    </android.support.v7.widget.CardView>
</RelativeLayout>

CoordinatorBehavior.java

public class CoordinatorBehavior extends CoordinatorLayout.Behavior<View> {
public CoordinatorBehavior(Context context, AttributeSet attrs) {
}


public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
    return dependency instanceof Snackbar.SnackbarLayout;
}


public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
    float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
    child.setTranslationY(translationY);
    return true;
}

}

Answer 2

You need to implement a layout behavior for your View and reference it from your layout xml file.

It is simple to implement your own layout behavior. In your case, you only need to set the translation y of your view when the snackbar appears.

public class YourCustomBehavior extends CoordinatorLayout.Behavior<View> {

    public YourCustomBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
        child.setTranslationY(translationY);
        return true;
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        // we only want to trigger the change 
        // only when the changes is from a snackbar
        return dependency instanceof Snackbar.SnackbarLayout;
    }
}

And add it to your layout xml like this

<android.support.v7.widget.CardView
        android:id="@+id/your_sign_up_card_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ...
        app:layout_behavior="com.your.app.YourCustomBehavior"/>

The value for the app:layout_behavior attribute should be the full qualified name of the behavior class.

You can also refer to this article which explains everything nicely.