플로팅 액션 버튼 (Floating Action Button)

In previous post, I had talked about some popular designs of Floating Action Button (FAB) - a component of Design Support Library. Beside that, there is a design from Inbox application (developed by Google) which containing some FABs are combined into a group and they will be shown after the "representative button" clicked. This design called Floating Action Menu:

    Up to now, there is no official component from Google which allows us making this design so we must use third-party library to building a Floating Action Menu (FAM). Fortunately, libraries to resolve this problem is not unpopular!
    In this post, I will use a third-party developed by Dmytro Tarianyk Clans. It's very simple to implement and solving this problem quickly!
    DEMO VIDEO:

 

 

Import the library

    Adding this dependency to your application level build.gradle:
dependencies { compile 'com.github.clans:fab:1.6.4' }     Now, we have two objects called FloatingActionMenu and FloatingActionButton to build this layout.

Some important features

   FloatingActionMenu has some attributes in xml that we have to pay attention:

• fab:menu_fab_label: Label for Menu button
• fab_colorNormal, fab_colorPressed, fab_colorRipple: Change button color based on it's status.
• fab_showAnimation, fab_hideAnimation: Animation when menu expand/collapse.
• menu_labels_position: Position of buttons label (left/right).
• menu_openDirection: Open menu up or down.

Usages in activity

Declaring a layout for our activity like this:

activity_main.xml

 

<com.github.clans.fab.FloatingActionMenu         android:id="@+id/fab_menu"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_alignParentBottom="true"         android:layout_alignParentRight="true"         android:paddingBottom="@dimen/activity_horizontal_margin"         android:paddingRight="@dimen/activity_horizontal_margin"         fab:menu_backgroundColor="#ccffffff"         fab:menu_fab_label="Choose an action"         fab:fab_colorNormal="#DA4336"         fab:fab_colorPressed="#E75043"         fab:fab_colorRipple="#99FFFFFF"         fab:fab_showShadow="true"         fab:menu_labels_colorNormal="#333333"         fab:menu_labels_colorPressed="#444444"         fab:menu_labels_colorRipple="#66FFFFFF"         fab:menu_labels_showShadow="true"         fab:menu_labels_maxLines="-1"         fab:menu_labels_position="left"         fab:menu_openDirection="up"         fab:fab_shadowColor="#66000000"         fab:menu_labels_ellipsize="end"         fab:menu_labels_singleLine="true">         <com.github.clans.fab.FloatingActionButton             android:id="@+id/fab1"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:src="@android:drawable/ic_menu_edit"             fab:fab_label="Edit an item"             fab:fab_size="mini" />         <com.github.clans.fab.FloatingActionButton             android:id="@+id/fab2"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:src="@android:drawable/ic_menu_add"             fab:fab_label="Menu item 2"             fab:fab_size="mini" />         <com.github.clans.fab.FloatingActionButton             android:id="@+id/fab3"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:src="@android:drawable/ic_menu_delete"             fab:fab_label="@string/lorem_ipsum"             fab:fab_size="mini" />     </com.github.clans.fab.FloatingActionMenu>

 

MainActivity.java

 

package info.devexchanges.floatingactionmenu; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Toast; import com.github.clans.fab.FloatingActionButton; import com.github.clans.fab.FloatingActionMenu; public class MainActivity extends AppCompatActivity {     private FloatingActionMenu fam;     private FloatingActionButton fabEdit, fabDelete, fabAdd;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         fabAdd = (FloatingActionButton) findViewById(R.id.fab2);         fabDelete = (FloatingActionButton) findViewById(R.id.fab3);         fabEdit = (FloatingActionButton) findViewById(R.id.fab1);         fam = (FloatingActionMenu) findViewById(R.id.fab_menu);         //handling menu status (open or close)         fam.setOnMenuToggleListener(new FloatingActionMenu.OnMenuToggleListener() {             @Override             public void onMenuToggle(boolean opened) {                 if (opened) {                     showToast("Menu is opened");                 } else {                     showToast("Menu is closed");                 }             }         });         //handling each floating action button clicked         fabDelete.setOnClickListener(onButtonClick());         fabEdit.setOnClickListener(onButtonClick());         fabAdd.setOnClickListener(onButtonClick());         fam.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View view) {                 if (fam.isOpened()) {                     fam.close(true);                 }             }         });     }     private View.OnClickListener onButtonClick() {         return new View.OnClickListener() {             @Override             public void onClick(View view) {                 if (view == fabAdd) {                     showToast("Button Add clicked");                 } else if (view == fabDelete) {                     showToast("Button Delete clicked");                 } else {                     showToast("Button Edit clicked");                 }                 fam.close(true);             }         };     }     private void showToast(String msg) {         Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();     } }

 

 

    Running application, we'll have this output:

    Click the "representative button" to open Menu:

    After click the "delete button" in Menu:

    Animation for expanding/collapsing process:

 

Conclusions

    As you can see, with a small third-party library, we can build a FAM easily. By searching on Internet, you can find out another similar libraries:

• https://github.com/futuresimple/android-floating-action-button
• https://github.com/wangjiegulu/RapidFloatingActionButton
• https://github.com/makovkastar/FloatingActionButton

    You should try to use them and choose the best one!
    Reference to the libary Github page: https://github.com/Clans/FloatingActionButton

 View project on Github

 

 

[출처] http://www.devexchanges.info/2016/07/floating-action-menu-in-android.html