\n In Android app development, the user interface (UI) is a very important element.
\n To enhance user experience, it is necessary to provide an intuitive and efficient UI.
\n In this article, we will take a look at the ‘Floating Action Button (FAB)’.
\n In particular, we will explain the extended floating action button in detail and guide you step by step on how to implement it.\n <\/p>\n
\n A floating action button is a circular button that floats in a specific area of the screen, usually representing the most important action.
\n For example, in a note app, it is a button for ‘Create New Note’, and in a chat app, it is a button for ‘Compose Message’.
\n FAB is very intuitive and helps users easily access important actions.\n <\/p>\n
\n While a basic FAB is optimized for a single action, there is a need for an extended version when it is necessary to show several related actions to the user.
\n An extended FAB shows multiple additional buttons or options when the user presses the button.
\n This allows users to perform a variety of tasks through more options.\n <\/p>\n
\n The design of the extended FAB can be broadly divided into two parts:
\n 1. Basic FAB
\n 2. Additional icons to show in the expanded state.
\n By combining these two elements well, an intuitive UI can be provided to the user.\n <\/p>\n
\n First, open Android Studio and create a new project.
\n Select ‘Java’ as the language and choose ‘Empty Activity’ to provide the basic template.\n <\/p>\n
\n \n \/\/ build.gradle (Module: app)\n dependencies {\n implementation 'com.android.support:design:28.0.0'\n }\n <\/code>\n <\/pre>\n\n By adding dependencies like the above, support for Material Components is added.
\n To use the latest version of libraries, set it up to use Google’s Maven repository.\n <\/p>\n
Designing the Layout File<\/h2>\n
\n Open the ‘res\/layout\/activity_main.xml’ file and set up the basic layout.
\n Below is the XML code that includes the floating action button and additional buttons.\n <\/p>\n
\n \n <RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n tools:context=\".MainActivity\">\n\n <com.getkeepsafe.taptargetview.TapTargetView\n android:id=\"@+id\/tap_target_view\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n app:tapTarget=\"Create a new note here!\"\n app:outerCircleColor=\"#f44336\"\n app:targetCircleColor=\"#ffffff\"\n app:textColor=\"#000000\">\n <\/com.getkeepsafe.taptargetview.TapTargetView>\n\n <android.support.design.widget.FloatingActionButton\n android:id=\"@+id\/fab\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:layout_alignParentEnd=\"true\"\n android:layout_alignParentBottom=\"true\"\n app:srcCompat=\"@drawable\/ic_add\">\n <\/android.support.design.widget.FloatingActionButton>\n\n <LinearLayout\n android:id=\"@+id\/expanded_menu\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:orientation=\"vertical\"\n android:layout_alignParentEnd=\"true\"\n android:layout_above=\"@id\/fab\"\n android:visibility=\"gone\">\n\n <android.support.design.widget.FloatingActionButton\n android:id=\"@+id\/fab_item_1\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n app:srcCompat=\"@drawable\/ic_item1\">\n <\/android.support.design.widget.FloatingActionButton>\n\n <android.support.design.widget.FloatingActionButton\n android:id=\"@+id\/fab_item_2\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n app:srcCompat=\"@drawable\/ic_item2\">\n <\/android.support.design.widget.FloatingActionButton>\n\n <android.support.design.widget.FloatingActionButton\n android:id=\"@+id\/fab_item_3\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n app:srcCompat=\"@drawable\/ic_item3\">\n <\/android.support.design.widget.FloatingActionButton>\n\n <\/LinearLayout>\n\n <\/RelativeLayout>\n <\/code>\n <\/pre>\nImplementation of MainActivity.java File<\/h2>\n
\n Open the ‘MainActivity.java’ file and add code to handle button click events.
\n Implement logic to expand or collapse the additional buttons when the FAB is clicked.\n <\/p>\n
\n \n package com.example.fabexample;\n\n import android.os.Bundle;\n import android.support.design.widget.FloatingActionButton;\n import android.support.v7.app.AppCompatActivity;\n import android.view.View;\n import android.widget.LinearLayout;\n\n public class MainActivity extends AppCompatActivity {\n private FloatingActionButton fab;\n private LinearLayout expandedMenu;\n\n @Override\n protected void onCreate(Bundle savedInstanceState) {\n super.onCreate(savedInstanceState);\n setContentView(R.layout.activity_main);\n\n fab = findViewById(R.id.fab);\n expandedMenu = findViewById(R.id.expanded_menu);\n\n fab.setOnClickListener(new View.OnClickListener() {\n @Override\n public void onClick(View view) {\n if (expandedMenu.getVisibility() == View.GONE) {\n expandedMenu.setVisibility(View.VISIBLE);\n } else {\n expandedMenu.setVisibility(View.GONE);\n }\n }\n });\n\n findViewById(R.id.fab_item_1).setOnClickListener(new View.OnClickListener() {\n @Override\n public void onClick(View v) {\n \/\/ Add action for item 1\n }\n });\n\n findViewById(R.id.fab_item_2).setOnClickListener(new View.OnClickListener() {\n @Override\n public void onClick(View v) {\n \/\/ Add action for item 2\n }\n });\n\n findViewById(R.id.fab_item_3).setOnClickListener(new View.OnClickListener() {\n @Override\n public void onClick(View v) {\n \/\/ Add action for item 3\n }\n });\n }\n }\n <\/code>\n <\/pre>\nAdding Icons and Design Elements<\/h2>\n
\n Add the icons to be used in the ‘res\/drawable’ folder of the project.
\n These icons provide clear indications for each action, helping users to easily recognize them.
\n Additionally, adjust the button’s color and size considering user feedback.\n <\/p>\n
Adding Animation<\/h2>\n
\n To improve the transition effects of the extended FAB, you can add animations.
\n Smooth animations when the button expands or collapses can enhance the user experience.\n <\/p>\n
\n \n fab.setOnClickListener(new View.OnClickListener() {\n @Override\n public void onClick(View view) {\n if (expandedMenu.getVisibility() == View.GONE) {\n expandedMenu.setVisibility(View.VISIBLE);\n expandedMenu.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_down));\n } else {\n expandedMenu.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up));\n expandedMenu.setVisibility(View.GONE);\n }\n }\n });\n <\/code>\n <\/pre>\nCreating Animation XML<\/h2>\n
\n Create slide animation XML files in the ‘res\/anim’ folder.\n <\/p>\n
\n \n \/\/ slide_down.xml\n <translate xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:fromYDelta=-100% \n android:toYDelta=0\n android:duration=300 \/>\n\n \/\/ slide_up.xml\n <translate xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n android:fromYDelta=0 \n android:toYDelta=-100%\n android:duration=300 \/>\n <\/code>\n <\/pre>\nTesting and Debugging<\/h2>\n
\n After writing the code and ensuring that all elements work perfectly,
\n test the app on various devices to check if the UI displays correctly.
\n You can test using either an emulator or a real device.\n <\/p>\n
Conclusion<\/h2>\n
\n In this tutorial, we learned how to improve user experience in Android apps using the extended floating action button.
\n The FAB is a simple button, but if implemented correctly, it can provide significant convenience to users.
\n Based on what you learned in this tutorial, try adding various features to your app.\n <\/p>\n
Additional Resources<\/h2>\n
\n – Official Documentation for FloatingActionButton<\/a>
\n – Material Design Guidelines<\/a>\n<\/p>\n<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"