Floating Action Button and CardView

Question

How to add Floating Action Button from the support library for CardView so that when you scroll through the ScrollView , the button has gone up along with the card?

My app

before scrolling

after scrolling

The button should go along with the card

I want to fix this

Layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    >


    <ScrollView
        android:id="@+id/nested_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white_vk_background_color">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/spacing_8"
            android:orientation="vertical"
            android:padding="@dimen/spacing_16">

            <android.support.v7.widget.CardView

                android:id="@+id/behavior_card_view"
                style="@style/RateCardView"

                app:cardBackgroundColor="@color/white"
                app:cardCornerRadius="@dimen/spacing_2"
                app:cardElevation="@dimen/spacing_8">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="@dimen/spacing_16"
                    android:orientation="vertical"
                    >

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:paddingBottom="@dimen/spacing_8">

                        <TextView
                            android:id="@+id/description_rate_usd_text_view"
                            style="@style/AppTextView.RateTextView"
                            android:text="@string/description_currency_text_view_usd"/>

                        <TextView
                            android:id="@+id/rate_usd_text_view"
                            style="@style/AppTextView.RateTextView"
                            android:layout_centerHorizontal="true"
                            android:layout_toRightOf="@id/description_rate_usd_text_view"
                            tools:text="63.99"
                            />


                        <TextView
                            android:id="@+id/rate_difference_usd_text_view"
                            style="@style/AppTextView.DifferenceTextView"

                            android:layout_toRightOf="@id/rate_usd_text_view"
                            tools:text="+0.44"/>

                    </RelativeLayout>


                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:paddingBottom="@dimen/spacing_8">

                        <TextView
                            android:id="@+id/description_rate_eur_text_view"
                            style="@style/AppTextView.RateTextView"
                            android:text="@string/description_currency_text_view_eur"/>

                        <TextView
                            android:id="@+id/rate_eur_text_view"
                            style="@style/AppTextView.RateTextView"
                            android:layout_centerHorizontal="true"
                            android:layout_toRightOf="@id/description_rate_eur_text_view"
                            tools:text="71.99"
                            />

                        <TextView
                            android:id="@+id/rate_difference_eur_text_view"
                            style="@style/AppTextView.DifferenceTextView"
                            android:layout_toRightOf="@id/rate_eur_text_view"
                            tools:text="+0.15"/>

                    </RelativeLayout>

                    <TextView

                        android:id="@+id/rate_update_time_text_view"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|start"
                        android:layout_marginBottom="@dimen/spacing_8"
                        android:layout_marginLeft="@dimen/spacing_16"
                        android:layout_marginTop="@dimen/spacing_16"
                        android:gravity="center"
                        android:textSize="@dimen/density_font_size_text_date"


                        tools:text="Date: 15.07.2016"

                        />

                </LinearLayout>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:id="@+id/converter_card_view"
                style="@style/RateCardView"
                app:cardBackgroundColor="@color/white"
                app:cardCornerRadius="@dimen/spacing_2"
                app:cardElevation="@dimen/spacing_8">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="@dimen/spacing_16">

                    <com.rengwuxian.materialedittext.MaterialEditText

                        android:id="@+id/converter_ruble_edit_text"
                        style="@style/RateEditText"
                        android:hint="@string/description_currency_ruble"

                        app:met_baseColor="@android:color/black"
                        app:met_bottomTextSize="@dimen/density_font_size_text_converter"
                        app:met_errorColor="@color/red_light"
                        app:met_floatingLabel="normal"
                        app:met_floatingLabelAlwaysShown="true"
                        app:met_floatingLabelTextSize="@dimen/density_font_size_text_converter"
                        app:met_helperText=""
                        app:met_primaryColor="@color/red_light"
                        app:met_textColorHint="@android:color/transparent"/>

                    <com.rengwuxian.materialedittext.MaterialEditText

                        android:id="@+id/converter_dollar_edit_text"
                        style="@style/RateEditText"
                        android:hint="@string/description_currency_dollar"

                        app:met_baseColor="@android:color/black"
                        app:met_bottomTextSize="@dimen/density_font_size_text_converter"
                        app:met_errorColor="@color/red_light"
                        app:met_floatingLabel="normal"
                        app:met_floatingLabelAlwaysShown="true"
                        app:met_floatingLabelTextSize="@dimen/density_font_size_text_converter"
                        app:met_helperText=""
                        app:met_primaryColor="@color/red_light"
                        app:met_textColorHint="@android:color/transparent"/>


                    <com.rengwuxian.materialedittext.MaterialEditText

                        android:id="@+id/converter_euro_edit_text"
                        style="@style/RateEditText"
                        android:hint="@string/description_currency_euro"

                        app:met_baseColor="@android:color/black"
                        app:met_bottomTextSize="@dimen/density_font_size_text_converter"
                        app:met_errorColor="@color/red_light"
                        app:met_floatingLabel="normal"
                        app:met_floatingLabelAlwaysShown="true"
                        app:met_floatingLabelTextSize="@dimen/density_font_size_text_converter"
                        app:met_helperText=""

                        app:met_primaryColor="@color/red_light"

                        app:met_textColorHint="@android:color/transparent"/>
                </LinearLayout>
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </ScrollView>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/update_floating_action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/density_spacing_size_floating_action_button"
        android:layout_marginRight="@dimen/float_action_button_spacing_8"
        android:src="@drawable/ic_cached_white_24dp"
        app:fabSize="mini"
        app:layout_anchor="@id/behavior_card_view"
        app:pressedTranslationZ="6dp"
        app:layout_anchorGravity="end|right|center"
        />


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

Answer 1

Instead of anchoring to behavior_card_view, try anchoring it to something inside behavior_card_view. Ideally, anchor to the bottom of the USD textview. This should prevent the FAB from sliding down.

I would actually create a invisible layout which I can use to anchor but it doesn't affect the UI otherwise.

I can't replicate the issue you are having but the following works as you want:

    <RelativeLayout 
        android:id="@+id/rl1" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:orientation="vertical" 
        android:paddingTop="10dp" 
        android:paddingRight="10dp">

        <TextView 
            android:id="@+id/tv1" 
            android:layout_width="match_parent" 
            android:layout_height="100dp" 
            android:paddingLeft="12dp" 
            android:text="Setting" 
            android:focusable="true" 
            android:focusableInTouchMode="true" />

        <android.support.design.widget.FloatingActionButton 
            android:id="@+id/fab" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_marginLeft="8dp" 
            android:layout_marginRight="8dp" 
            android:src="@drawable/ic_add" 
            app:fabSize="mini" 
            app:pressedTranslationZ="6dp" 
            app:layout_anchorGravity="end|right|center" 
            app:layout_anchor="@id/tv1" />
... a lot of elements here ...
    </RelativeLayout>

This RelativeLayout is the only element inside my ScrollView element.