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.
1. What is a Floating Action Button?
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.
1.1 Example of a Standard Floating Action Button
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.
class MainActivity : AppCompatActivity() {
private lateinit var floatingActionButton: FloatingActionButton
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
floatingActionButton = findViewById(R.id.fab)
floatingActionButton.setOnClickListener {
// Action on click
Toast.makeText(this, "Create a new note", Toast.LENGTH_SHORT).show()
}
}
}2. Extended Floating Action Button
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.
2.1 Components
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.
3. Implementation
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.
3.1 Layout Configuration
First, let’s configure the XML layout file. Below is the content of the activity_main.xml file.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Note List"
android:textSize="20sp"
android:layout_centerInParent="true"/>
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="@+id/extended_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_margin="16dp"
android:text="Add"
app:icon="@drawable/ic_add"/>
</RelativeLayout>3.2 Activity Structure
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.
class MainActivity : AppCompatActivity() {
private lateinit var extendedFAB: ExtendedFloatingActionButton
private lateinit var fabMenu: MutableList
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
extendedFAB = findViewById(R.id.extended_fab)
// Initialize the list of extended menu buttons
fabMenu = mutableListOf()
// Add action buttons
createFABs()
extendedFAB.setOnClickListener {
toggleMenu()
}
}
private fun createFABs() {
// Create FABs
val actionButtons = listOf("Add Note", "Settings", "Help")
for (action in actionButtons) {
val fab = FloatingActionButton(this)
fab.text = action
fab.setOnClickListener { handleActionButtonClick(action) }
fabMenu.add(fab)
(findViewById(R.id.main_layout)).addView(fab)
}
}
private fun toggleMenu() {
for (fab in fabMenu) {
fab.visibility = if (fab.visibility == View.VISIBLE) View.GONE else View.VISIBLE
}
}
private fun handleActionButtonClick(action: String) {
Toast.makeText(this, "$action clicked!", Toast.LENGTH_SHORT).show()
toggleMenu() // Close the menu
}
} 3.3 Screen Transition Animation
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.
private fun toggleMenu() {
for (fab in fabMenu) {
if (fab.visibility == View.VISIBLE) {
fab.animate().translationY(0f).alpha(0f).setDuration(300).withEndAction {
fab.visibility = View.GONE
}
} else {
fab.visibility = View.VISIBLE
fab.alpha = 0f
fab.animate().translationY(-100f).alpha(1f).setDuration(300)
}
}
}4. User Experience and Interface
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.
5. Conclusion
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.
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.
Thank you!