Android FABRevealLayout

| Page Views: 165

Android Awesome FABRevealLayout Example

This is an android FABRevealLayout tutorial. Basically we have a Floating Action Button that when clicked displays some hidden layout. This occurs with beautiful animations.

Why FABRevealLayout

Currently, there are approximately 2.3 billion devices in use. All these devices have apps installed on them. There are approximately 2.6 million apps for users in Google Play store.

So to make your app store you have to create amazing modern apps that are easy and intuitive to use. This implies that you need innovative ways of rendering your content.

And one such way is using the FAB Reveal Layout technique. You don't render the whole content to user at first. Instead you allow user to see it on demand by clicking the Floating Action Button.

Demo

Here's the gif demo of the project:

Android FABRevealLayout Example

Here's it in the landscape mode:

Android FABRevealLayout Example

Video Tutorial(Recommended)

Here's the video tutorial. I recommend you watch the video tutorial as it contains explantions on step by step process of how to create this. We start from scratch by creating a project and I take you through all the steps and code.

1. Installing FABRevealLayout

The first step is to install FABRevealLayout as it is a third party library.

You can do that using the following implementation statement:

implementation 'com.truizlop.fabreveallayout:library:1.0.0'

Also add the following as dependencies in your app level build.gradle:

    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:support-v4:28.0.0'
    implementation 'com.android.support:design:28.0.0'

I had to add the support-v4 and design only because I was getting conflicts with the support dependency versions that were used in constructing FABRevealLayout.

2. Preparing Styles - styles.xml

In your styles.xml add the following styles. You can see they are basically attributes for the various widgets we will have in our main layout.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="GameCoverStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:scaleType">centerCrop</item>
        <item name="android:adjustViewBounds">true</item>
    </style>

    <style name="GameTitleStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginBottom">16dp</item>
        <item name="android:layout_marginLeft">16dp</item>
        <item name="android:layout_marginRight">16dp</item>
        <item name="android:textSize">20sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@color/white</item>
    </style>

    <style name="GameCreatorStyle">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginLeft">16dp</item>
        <item name="android:layout_marginRight">16dp</item>
        <item name="android:textColor">@color/white</item>
    </style>

</resources>
3. Prepare main Layout

The third step is to modify our layout. This layout will be inflated as the user interface for our main activity.

<LinearLayout 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"
    android:orientation="vertical"
    android:background="@color/background">

    <ImageView
        android:id="@+id/game_cover_image"
        android:src="@drawable/mgs"
        style="@style/GameCoverStyle" />

    <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/fab"
            android:src="@drawable/ic_add_shopping_cart"
            />

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_centerInParent="true">

                <TextView
                    android:id="@+id/game_title_text"
                    android:text="@string/game_title"
                    style="@style/GameTitleStyle" />

                <TextView
                    android:id="@+id/creator_name_text"
                    android:text="@string/creator_name"
                    style="@style/GameCreatorStyle" />
            </LinearLayout>

        </RelativeLayout>

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/add_to_shopping_cart"
                android:textColor="@color/white"
                android:textSize="16sp"
                android:layout_centerInParent="true"
                />
        </RelativeLayout>

    </com.truizlop.fabreveallayout.FABRevealLayout>
</LinearLayout>
4. Our main activity

Here's our main and only activity. We have three methods: onCreate(), configureFABReveal() and prepareBackTransition(). Inside the onCreate() we reference our FABRevealLayout using it's id, then invoke the configureFABReveal() method.

In the configureFABReveal() method we listen to reveal changes using RevealChangeListener, when the seconday view appears we invoke the prepareBackTransition() method.

The prepareBackTransition() uses a Handler to set the number of milliseconds after which the main viewis revealed.

package info.camposha.mfabreveallayout;

import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

import com.truizlop.fabreveallayout.FABRevealLayout;
import com.truizlop.fabreveallayout.OnRevealChangeListener;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FABRevealLayout fabRevealLayout = findViewById(R.id.fab_reveal_layout);
        configureFABReveal(fabRevealLayout);
    }

    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) {
                prepareBackTransition(fabRevealLayout);
            }
        });
    }

    private void prepareBackTransition(final FABRevealLayout fabRevealLayout) {
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                fabRevealLayout.revealMainView();
            }
        }, 2000);
    }

}
//end
Download

You can download the full source code below or watch the video from the link provided.

No. Location Link
1. GitHub Direct Download
2. GitHub Browse
3. YouTube Video Tutorial
4. YouTube ProgrammingWizards TV Channel

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section.

About Me.

After completing his Software Engineering bachelors program, Oclemy(Clement Ochieng) these days is a man of two lives. At day he works for a startup in Nairobi, Kenya. At night he works tirelessly on building ProgrammingWizards TV, a tv channel for student coders and this website to help share the source code. In between he practices Meditation and Self actualization to help him keep balance. He also likes going for long solo walks to connect more with nature.




Recommendations


What do You Think


Previous Post Next Post