Hello! In this tutorial, we will delve deeply into the Extended Floating Action Button (EFAB) in Android app development using Kotlin. The Floating Action Button is a useful UI element for showing and highlighting key actions to the user. However, the Extended Floating Action Button expands this functionality to support multiple actions. The Floating Action Button is part of Material Design and is commonly used in modern app design.<\/p>\n
A Floating Action Button (FAB) is a button that floats over the content on the screen. It visually emphasizes the main actions that users can perform. It is typically circular and provides quick accessibility to perform primary tasks. According to the Material Design guidelines in Android, it is positioned at the center of the user interface and fixed at the bottom of the screen.<\/p>\n
A simple example of a standard Floating Action Button could be implementing a simple note-taking app that allows users to add a button for writing a new note. The code below is an example of using a basic Floating Action Button.<\/p>\n
class MainActivity : AppCompatActivity() {\n private lateinit var floatingActionButton: FloatingActionButton\n\n override fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n setContentView(R.layout.activity_main)\n\n floatingActionButton = findViewById(R.id.fab)\n floatingActionButton.setOnClickListener {\n \/\/ Action on click\n Toast.makeText(this, \"Create a new note\", Toast.LENGTH_SHORT).show()\n }\n }\n}<\/code><\/pre>\n2. Extended Floating Action Button<\/h2>\n
The Extended Floating Action Button is a button that helps users explore more options beyond performing a primary action with a simple click. This button typically displays several actions or represents sub-menu items. It provides users with more choices, enhancing the accessibility and usability of the interface.<\/p>\n
2.1 Components<\/h3>\n
The Extended Floating Action Button takes the form of several small buttons grouped together. Each button provides an option for the user to select. To implement this, you should also adjust Visibility and Animation to offer a smooth and intuitive user experience.<\/p>\n
3. Implementation<\/h2>\n
Now, let’s implement the Extended Floating Action Button using Kotlin. This example will be a note-taking app where users can add new notes and display a list of notes.<\/p>\n
3.1 Layout Configuration<\/h3>\n
First, let’s configure the XML layout file. Below is the content of the activity_main.xml file.<\/p>\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 <TextView\n android:id=\"@+id\/text_view\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:text=\"Note List\"\n android:textSize=\"20sp\"\n android:layout_centerInParent=\"true\"\/>\n\n <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton\n android:id=\"@+id\/extended_fab\"\n android:layout_width=\"wrap_content\"\n android:layout_height=\"wrap_content\"\n android:layout_alignParentEnd=\"true\"\n android:layout_alignParentBottom=\"true\"\n android:layout_margin=\"16dp\"\n android:text=\"Add\"\n app:icon=\"@drawable\/ic_add\"\/>\n\n<\/RelativeLayout><\/code><\/pre>\n3.2 Activity Structure<\/h3>\n
Next, let’s write the MainActivity.kt file. Here, we will dynamically add buttons for the sub-actions and define the actions when these buttons are clicked.<\/p>\n
class MainActivity : AppCompatActivity() {\n private lateinit var extendedFAB: ExtendedFloatingActionButton\n private lateinit var fabMenu: MutableList\n\n override fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n setContentView(R.layout.activity_main)\n\n extendedFAB = findViewById(R.id.extended_fab)\n\n \/\/ Initialize the list of extended menu buttons\n fabMenu = mutableListOf()\n\n \/\/ Add action buttons\n createFABs()\n\n extendedFAB.setOnClickListener {\n toggleMenu()\n }\n }\n\n private fun createFABs() {\n \/\/ Create FABs\n val actionButtons = listOf(\"Add Note\", \"Settings\", \"Help\")\n\n for (action in actionButtons) {\n val fab = FloatingActionButton(this)\n fab.text = action\n fab.setOnClickListener { handleActionButtonClick(action) }\n fabMenu.add(fab)\n (findViewById(R.id.main_layout)).addView(fab)\n }\n }\n\n private fun toggleMenu() {\n for (fab in fabMenu) {\n fab.visibility = if (fab.visibility == View.VISIBLE) View.GONE else View.VISIBLE\n }\n }\n\n private fun handleActionButtonClick(action: String) {\n Toast.makeText(this, \"$action clicked!\", Toast.LENGTH_SHORT).show()\n toggleMenu() \/\/ Close the menu\n }\n}<\/relativelayout><\/floatingactionbutton><\/code><\/pre>\n3.3 Screen Transition Animation<\/h3>\n
When using the Extended Floating Action Button, you can enhance user experience by adding animation effects. You can add animations for when the buttons appear and disappear. Below is an example with a simple animation added.<\/p>\n
private fun toggleMenu() {\n for (fab in fabMenu) {\n if (fab.visibility == View.VISIBLE) {\n fab.animate().translationY(0f).alpha(0f).setDuration(300).withEndAction {\n fab.visibility = View.GONE\n }\n } else {\n fab.visibility = View.VISIBLE\n fab.alpha = 0f\n fab.animate().translationY(-100f).alpha(1f).setDuration(300)\n }\n }\n}<\/code><\/pre>\n4. User Experience and Interface<\/h2>\n
From a UI\/UX perspective, the Extended Floating Action Button provides a very easy-to-use and intuitive interface. Since users can click the button to select various actions, it can be effectively utilized in apps that offer multiple features. If implemented considering both efficiency and aesthetics, users can have a simpler and more effective experience.<\/p>\n
5. Conclusion<\/h2>\n
In this tutorial, we discussed how to implement the Extended Floating Action Button using Kotlin. Compared to the standard Floating Action Button, the Extended Floating Action Button provides users with a variety of options. Such UI components offer a better user experience and support performing intended tasks more efficiently.<\/p>\n
The most important aspect of Android app development is user experience. It is the developer’s role to provide the best experience to users by appropriately utilizing various UI components to ensure responsive and open design. Continue to learn and apply Kotlin to create great apps.<\/p>\n
Thank you!<\/p>\n","protected":false},"excerpt":{"rendered":"