FAB in combination with NestedScrollView

Question

I have a "details" fragment which have a lot of textviews, relativelayouts etc. These are wrapped inside a NestedScrollView:

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?android:attr/windowBackground"
    android:orientation="vertical"
    android:paddingBottom="10dp">

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/movie_details_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        // Here are the textviews, relativelayouts etc...
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/edit_movies_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_edit_white_24dp"
    />
</android.support.design.widget.CoordinatorLayout>

Now i want to to add a FAB at the bottom of the screen (not at the bottom of the nestedscrollview) which also scroll down when i scroll through the nestedscrollview. But with my code the FAB is always at the bottom of the nestedscrollview. So when i scroll all the way down the FAB appears. I want that the FAB is always visible in the right bottom corner...

EDIT

I forgot to mention that i use fading action bar (https://github.com/ManuelPeinado/FadingActionBar) but a bit edited.

Relevant code:

m_FadingActionBarHelper.createView(getContext()); // this will create the view with header content etc.

The createView:

public final View createView(LayoutInflater inflater) {
  //
  // Prepare everything

  mInflater = inflater;
  if (mContentView == null) {
    mContentView = inflater.inflate(mContentLayoutResId, null); // this will load my view which i already posted.
  }
  if (mHeaderView == null) {
    mHeaderView = inflater.inflate(mHeaderLayoutResId, null, false);
  }

  // See if we are in a ListView, WebView or ScrollView scenario

  ListView listView = (ListView) mContentView.findViewById(android.R.id.list);
  View root;
  if (listView != null) {
    root = createListView(listView);
  } else if (mContentView instanceof CDMObservableWebViewWithHeader){
    root = createWebView();
  } else {
    root = createScrollView(); // this will be called in my example
  }

  if (mHeaderOverlayView == null && mHeaderOverlayLayoutResId != 0) {
    mHeaderOverlayView = inflater.inflate(mHeaderOverlayLayoutResId, mMarginView, false);
  }
  if (mHeaderOverlayView != null) {
    mMarginView.addView(mHeaderOverlayView);
  }

  // Use measured height here as an estimate of the header height, later on after the layout is complete
  // we'll use the actual height
  int widthMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.EXACTLY);
  int heightMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.EXACTLY);
  mHeaderView.measure(widthMeasureSpec, heightMeasureSpec);
  updateHeaderHeight(mHeaderView.getMeasuredHeight());

  root.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
      int headerHeight = mHeaderContainer.getHeight();
      if ((!mFirstGlobalLayoutPerformed || (headerHeight != mLastHeaderHeight)) && headerHeight != 0) {
        updateHeaderHeight(headerHeight);
        mFirstGlobalLayoutPerformed = true;
      }
    }
  });
  return root;
}

The createScrollView:

private View createScrollView() {
  ViewGroup scrollViewContainer = (ViewGroup) mInflater.inflate(R.layout.fab__scrollview_container, null);

  CDMObservableScrollView scrollView = (CDMObservableScrollView) scrollViewContainer.findViewById(R.id.fab__scroll_view);
  scrollView.setOnScrollChangedCallback(mOnScrollChangedListener);

  ViewGroup contentContainer = (ViewGroup) scrollViewContainer.findViewById(R.id.fab__container);
  LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
          LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
  mContentView.setLayoutParams(layoutParams);
  contentContainer.addView(mContentView);
  mHeaderContainer = (FrameLayout) scrollViewContainer.findViewById(R.id.fab__header_container);
  initializeGradient(mHeaderContainer);
  mHeaderContainer.addView(mHeaderView, 0);
  mMarginView = (FrameLayout) contentContainer.findViewById(R.id.fab__content_top_margin);

  return scrollViewContainer;
}

The xml which will be loaded:

<denis.de.meperdia.fadingactionbar.CDMRootLayout
    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 layout="@layout/fab__header_container"/>

    <denis.de.meperdia.fadingactionbar.CDMObservableScrollView
        android:id="@+id/fab__scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/fab__container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <FrameLayout
                android:id="@+id/fab__content_top_margin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"/>
        </LinearLayout>
    </denis.de.meperdia.fadingactionbar.CDMObservableScrollView>

</denis.de.meperdia.fadingactionbar.CDMRootLayout>

The class CDMRootLayout:

public class CDMRootLayout extends CoordinatorLayout {

  private View mHeaderContainer;
  private View mListViewBackground;
  private boolean mInitialized = false;

  public CDMRootLayout(Context context) {
    super(context);
  }

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

  public CDMRootLayout(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }

  protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    //at first find headerViewContainer and listViewBackground
    if(mHeaderContainer == null)
      mHeaderContainer = findViewById(R.id.fab__header_container);
    if(mListViewBackground == null)
      mListViewBackground = findViewById(R.id.fab__listview_background);

    //if there's no headerViewContainer then fallback to standard FrameLayout
    if(mHeaderContainer == null) {
      super.onLayout(changed, left, top, right, bottom);
      return;
    }

    if(!mInitialized) {
      super.onLayout(changed, left, top, right, bottom);
      //if mListViewBackground not exists or mListViewBackground exists
      //and its top is at headercontainer height then view is initialized
      if(mListViewBackground == null || mListViewBackground.getTop() == mHeaderContainer.getHeight())
        mInitialized = true;
      return;
    }

    //get last header and listViewBackground position
    int headerTopPrevious = mHeaderContainer.getTop();
    int listViewBackgroundTopPrevious = mListViewBackground != null ? mListViewBackground.getTop() : 0;

    //relayout
    super.onLayout(changed, left, top, right, bottom);

    //revert header top position
    int headerTopCurrent = mHeaderContainer.getTop();
    if(headerTopCurrent != headerTopPrevious) {
      mHeaderContainer.offsetTopAndBottom(headerTopPrevious - headerTopCurrent);
    }
    //revert listViewBackground top position
    int listViewBackgroundTopCurrent = mListViewBackground != null ? mListViewBackground.getTop() : 0;
    if(listViewBackgroundTopCurrent != listViewBackgroundTopPrevious) {
      mListViewBackground.offsetTopAndBottom(listViewBackgroundTopPrevious - listViewBackgroundTopCurrent);
    }
  }
}

And the class CDMObservableScrollView:

public class CDMObservableScrollView extends ScrollView implements CDMObservableScrollable {
    // Edge-effects don't mix well with the translucent action bar in Android 2.X
    private boolean mDisableEdgeEffects = true;

    private CDMOnScrollChangedCallback mOnScrollChangedListener;

    public CDMObservableScrollView(Context context) {
      super(context);
    }

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

    public CDMObservableScrollView(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
      super.onScrollChanged(l, t, oldl, oldt);
      if (mOnScrollChangedListener != null) {
        mOnScrollChangedListener.onScroll(l, t);
      }
    }

    @Override
    protected float getTopFadingEdgeStrength() {
      // http://stackoverflow.com/a/6894270/244576
      if (mDisableEdgeEffects && Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {
        return 0.0f;
      }
      return super.getTopFadingEdgeStrength();
    }

    @Override
    protected float getBottomFadingEdgeStrength() {
      // http://stackoverflow.com/a/6894270/244576
      if (mDisableEdgeEffects && Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {
        return 0.0f;
      }
      return super.getBottomFadingEdgeStrength();
    }

    @Override
    public void setOnScrollChangedCallback(CDMOnScrollChangedCallback callback) {
      mOnScrollChangedListener = callback;
    }
}

EDIT 2

I can delimit the problem now:

If i these lines the FAB works as i want:

    <denis.de.meperdia.fadingactionbar.CDMObservableScrollView
        android:id="@+id/fab__scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

But then the synchonization of my fading action bar is destroyed...

Sorry for that much code but it's really complicated to understand without this.

Answer 1

Finally i solved this problem by moving the FloatingActionButton from the content layout to the outside.

My container layout looks like this:

<?xml version="1.0" encoding="utf-8"?>
<denis.de.meperdia.fadingactionbar.CDMRootLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include layout="@layout/fab__header_container"/>

    <denis.de.meperdia.fadingactionbar.CDMObservableScrollView
        android:id="@+id/fab__scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/fab__container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <FrameLayout
                android:id="@+id/fab__content_top_margin"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"/>
        </LinearLayout>
    </denis.de.meperdia.fadingactionbar.CDMObservableScrollView>

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

</denis.de.meperdia.fadingactionbar.CDMRootLayout>

I added a container for the FloatingActionButton which i fill dynamically by loading it from another file. The moving problem of the FloatingActionButton is solved now. There's a little other problem but i opened a new question for this.

EDIT

Changed my solution. I had the problem that if i want to show a snackbar, the FloatingActionButton didn't scroll correctly. I add the FloatingActionButton now programmatically to the root view. Now it works correctly.