Pratik Butani Pratik Butani - 1 year ago 78
Android Question

Floating Action Button - displaying TOP-LEFT first time

I am showing FAB Button on creating of Fragment which is opened on click of Navigation Item

fragment_order_list.xml



<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">

<android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/order_list_parent_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.kevalam.koops.fragments.OrderListFragment">

<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/order_list_swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<android.support.v7.widget.RecyclerView
android:id="@+id/order_list_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:listitem="@layout/row_order_list_layout" />

</android.support.v4.widget.SwipeRefreshLayout>

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

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

<LinearLayout
android:id="@+id/order_list_progress_bar_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:background="@color/color_transparent"
android:padding="@dimen/padding_normal"
android:visibility="gone">

<ProgressBar
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/spacing_micro"
android:indeterminate="true" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/spacing_micro"
android:text="@string/string_loading"
android:textColor="@color/color_white" />
</LinearLayout>


<android.support.design.widget.FloatingActionButton
android:id="@+id/order_list_add_new_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
app:fabSize="normal"
app:layout_anchor="@+id/order_list_recycler_view"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="com.kevalam.koops.design.ScrollAwareFABBehavior"
app:srcCompat="@drawable/ic_menu_add_product" />

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


First Time Showing like:

enter image description here

After Clicking on Screen, Its Showing like:

enter image description here

Is there any solution to make it perfect. I am displaying this fragment in NavigationView.

Answer Source

Why did you give it anchor? remove anchor and anchor gravity and this should work great

       <android.support.design.widget.FloatingActionButton
        android:id="@+id/order_list_add_new_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:fabSize="normal"
        app:layout_behavior="pl.michalz.hideonscrollexample.ScrollingFABBehavior"/>

behavior for FAB

public class ScrollingFABBehavior extends CoordinatorLayout.Behavior<FloatingActionButton> {
private int toolbarHeight;

public ScrollingFABBehavior(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.toolbarHeight = Utils.getToolbarHeight(context);
}

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton fab, View dependency) {
    return dependency instanceof AppBarLayout;
}

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton fab, View dependency) {
    if (dependency instanceof AppBarLayout) {
            CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
            int fabBottomMargin = lp.bottomMargin;
            int distanceToScroll = fab.getHeight() + fabBottomMargin;
            float ratio = (float)dependency.getY()/(float)toolbarHeight;
            fab.setTranslationY(-distanceToScroll * ratio);
    }
    return true;
}

}

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download