FABRevealLayout

A layout to transition between two views using a Floating Action Button as shown in many Material Design concepts

fabrl_qotsa

A-layout-to-transition

Usage

FABRevealLayout is very simple to use. You only need to include a FloatingActionButton from the Android Design Support Library and two views (namely main and secondary) within the layout. FABRevealLayout will position your views accordingly and provide the transition between them automatically.

<com.truizlop.fabreveallayout.FABRevealLayout
    android:id="@+id/fab_reveal_layout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/fab_reveal_height"
    >

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:backgroundTint="@color/some_color"
        android:src="@drawable/some_drawable"
        />

    <RelativeLayout
        android:id="@+id/main_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

		...
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/secondary_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

		...
    </RelativeLayout>

</com.truizlop.fabreveallayout.FABRevealLayout>

Please note that the secondary view should have a transparent background so that the color animation works correctly.

Further animation

If you want to animate the items inside the views of a FABRevealLayout or perform any other action when the transition is completed, you can register a listener.

private void configureFABReveal(FABRevealLayout fabRevealLayout) {
    fabRevealLayout.setOnRevealChangeListener(new OnRevealChangeListener() {
        @Override
        public void onMainViewAppeared(FABRevealLayout fabRevealLayout, View mainView) {}

        @Override
        public void onSecondaryViewAppeared(final FABRevealLayout fabRevealLayout, View secondaryView) {}
    });
}

Also, to trigger the reveal and hide animations programmatically, you can use the following methods:

fabRevealLayout.revealMainView();
fabRevealLayout.revealSecondaryView();

GitHub