Android Floating Action Button

Floating Action Button adalah jenis button yang baru muncul ketika ada material design, baru mucul ketika ada versi OS Lollipop.

Kali ini saya akan membuat beberapa tipe FloatingActionButton :

  1. FloatingActionButton Normal
    screenshot_2016-09-12-15-13-23_id-co-passionit-androidbottomsheet
  2. FloatingActionButton Menu
    screenshot_2016-09-12-15-21-35_id-co-passionit-androidbottomsheet
  3. FloatingActionButton Progress
    screenshot_2016-09-12-15-19-05_id-co-passionit-androidbottomsheet

 

Untuk membuat FAB seperti gambar yang diatas, pertama-tama kita harus install librarinya dulu

compile 'com.android.support:design:23.4.0'
compile 'com.github.clans:fab:1.6.4'

Buat layout untuk FAB Normal

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="12dp"
        android:layout_marginRight="16dp"
        android:src="@drawable/ic_menu"
        app:fab_elevationCompat="4dp" />

</FrameLayout>

Terus buat layout untuk FAB Menu

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="102dp"
        android:text="@string/lorem_ipsum"
        android:maxLines="3"
        android:ellipsize="end"
        android:textColor="@android:color/white"
        android:textSize="22sp"
        android:paddingTop="8dp"
        android:paddingRight="8dp"
        android:paddingLeft="60dp"
        android:fontFamily="sans-serif-light"
        android:background="@color/app_primary"
        android:elevation="4dp"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/header"
        android:padding="16dp"
        android:textSize="18sp"
        android:text="@string/lorem_ipsum_large"/>

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu_yellow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="80dp"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        fab:menu_labels_style="@style/MenuLabelsStyle"
        fab:menu_labels_showAnimation="@anim/jump_from_down"
        fab:menu_labels_hideAnimation="@anim/jump_to_down"
        fab:menu_animationDelayPerItem="0"
        fab:menu_shadowColor="#444"
        fab:menu_colorNormal="#FFB805"
        fab:menu_colorPressed="#F2AB00"
        fab:menu_colorRipple="#D99200">

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_label="Menu item 1"
            style="@style/MenuButtonsStyle" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab22"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_label="Menu item 2"
            style="@style/MenuButtonsStyle" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab32"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_label="@string/lorem_ipsum"
            style="@style/MenuButtonsStyle" />

    </com.github.clans.fab.FloatingActionMenu>

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu_green"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="150dp"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        fab:menu_icon="@drawable/ic_star"
        fab:menu_animationDelayPerItem="0"
        fab:menu_colorNormal="#43A047"
        fab:menu_colorPressed="#2E7D32"
        fab:menu_colorRipple="#1B5E20"
        fab:menu_labels_maxLines="2"
        fab:menu_labels_ellipsize="end">

        <com.github.clans.fab.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_label="Menu item 1"
            style="@style/MenuButtonsSmall.Green" />

        <com.github.clans.fab.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_label="Menu item 2"
            style="@style/MenuButtonsSmall.Green" />

        <com.github.clans.fab.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_label="@string/lorem_ipsum"
            style="@style/MenuButtonsSmall.Green" />

    </com.github.clans.fab.FloatingActionMenu>

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu_blue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="220dp"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        fab:menu_fab_size="mini"
        fab:menu_colorNormal="#1565C0"
        fab:menu_colorPressed="#2272CD"
        fab:menu_colorRipple="#62B2FF">

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab14"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_star"
            style="@style/MenuButtonsSmall" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab24"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_star"
            style="@style/MenuButtonsSmall" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab34"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_star"
            style="@style/MenuButtonsSmall" />

    </com.github.clans.fab.FloatingActionMenu>

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fab_edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="75dp"
        android:layout_marginLeft="10dp"
        android:src="@drawable/ic_edit"
        fab:fab_size="mini"
        fab:fab_colorNormal="#F50057"
        fab:fab_colorPressed="#E8004A"
        fab:fab_colorRipple="#C20024"
        fab:fab_shadowColor="#000"
        fab:fab_elevationCompat="6dp"
        android:visibility="invisible"
        tools:visibility="visible"/>

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu_down"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="65dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        android:elevation="6dp"
        fab:menu_labels_ellipsize="end"
        fab:menu_labels_singleLine="true"
        fab:menu_fab_size="mini"
        fab:menu_openDirection="down">

        <com.github.clans.fab.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_size="mini"
            fab:fab_label="Menu item 1" />

        <com.github.clans.fab.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_size="mini"
            fab:fab_label="Menu item 2" />

        <com.github.clans.fab.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_size="mini"
            fab:fab_label="@string/lorem_ipsum" />

    </com.github.clans.fab.FloatingActionMenu>

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu_red"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:paddingRight="10dp"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        fab:menu_labels_ellipsize="end"
        fab:menu_labels_singleLine="true"
        fab:menu_backgroundColor="#ccffffff"
        fab:menu_fab_label="Menu label">

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_size="mini"
            fab:fab_label="Disabled" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_size="mini"
            fab:fab_label="Remove button" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_size="mini"
            fab:fab_label="Restore Button" />

    </com.github.clans.fab.FloatingActionMenu>

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu_labels_right"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:paddingRight="10dp"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        fab:menu_labels_ellipsize="end"
        fab:menu_labels_singleLine="true"
        fab:menu_backgroundColor="#ccffffff"
        fab:menu_labels_position="right">

        <com.github.clans.fab.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_size="mini"
            fab:fab_label="Menu item 1" />

        <com.github.clans.fab.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_size="mini"
            fab:fab_label="Menu item 2" />

        <com.github.clans.fab.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_edit"
            fab:fab_size="mini"
            fab:fab_label="@string/lorem_ipsum" />

    </com.github.clans.fab.FloatingActionMenu>

</RelativeLayout>

Kemudian buat layout untuk FAB Progress

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:src="@drawable/ic_progress"
        fab:fab_showAnimation="@anim/show_from_bottom"
        fab:fab_hideAnimation="@anim/hide_to_bottom"/>

</FrameLayout>

Pada FAB Normal ketika ListView di scroll maka FAB akan sembunyi/hidden

mListView.setOnScrollListener(new AbsListView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        if (firstVisibleItem > mPreviousVisibleItem) {
            mFab.hide(true);
        } else if (firstVisibleItem < mPreviousVisibleItem) {
            mFab.show(true);
        }
        mPreviousVisibleItem = firstVisibleItem;
    }
});

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s