Share
Explore

Working with the Floating Action Button and Snackbar in Android Kotlin Application Development

Learning Outcomes:
Working with the Floating Action Button and Snackbar in Android KOTLIN Application Development
In this lab workbook, you will learn how to implement the Floating Action Button (FAB) and Snackbar components in an Android Kotlin application.
These components are part of the Material Design guidelines introduced by Google to enhance user experience [1].
By following the steps provided in this workbook, you will gain practical knowledge on how to create a visually appealing and functional application.
Prerequisites:
Basic understanding of Android app development using Kotlin
Familiarity with Android Studio

Developing Android Apps:

Android Studio is the official Integrated Development Environment (IDE) for developing Android apps using Kotlin or Java programming languages
1
⁠
⁠
2
⁠
⁠
3
⁠
⁠
4
⁠
.

Android Studio is based on the IntelliJ IDEA software from JetBrains and provides first-class support for Kotlin
2
⁠
.
It has built-in tools to help developers convert Java-based code to Kotlin and see the equivalent Java-based code as they learn Kotlin
2
⁠
.
Kotlin is a modern statically typed programming language that runs on the Java Virtual Machine (JVM) and is completely interoperable with the Java programming language
1
⁠
⁠
2
⁠
⁠
5
⁠
.
Kotlin is an officially supported language for developing Android apps, along with Java
1
⁠
.
Kotlin helps development teams improve app quality, boost productivity, and increase developer satisfaction
5
⁠
.
It allows developers to be more expressive and focus on shipping features instead of writing boilerplate, ultimately leading to less code to write
5
⁠
.
To develop Android apps with Kotlin, developers can use Android Studio and the Android SDK
1
⁠
⁠
2
⁠
⁠
3
⁠
⁠
4
⁠
.
Android Studio provides full support for Kotlin, enabling developers to add Kotlin files to their existing project and convert Java language code to Kotlin
4
⁠
.
Developers can then use all of Android Studio's existing tools with their Kotlin code, including autocomplete, lint checking, refactoring, debugging, and more
4
⁠
.
To get started with developing Android apps using Kotlin, developers can follow the official Android Developer documentation, which provides a step-by-step guide on how to build and run their first Android app in Kotlin
1
⁠
⁠
3
⁠
⁠
6
⁠
.
There are also various codelabs and training courses available for developers to learn the basics of creating apps with Kotlin and Android Studio
1
⁠
⁠
3
⁠
⁠
6
⁠
.

Step 1: Setting Up the Project

Open Android Studio and create a new project.
Choose the "Empty Activity" template and click "Next."
Specify the project name, package name, and location.
Select "Kotlin" as the programming language and set the minimum API level to 21 (Android 5.0).
Click "Finish" to create the project.

Step 2: Adding Dependencies

Open the app-level build.gradle file.
Add the following dependencies for the Material Design components:
implementation 'com.google.android.material:material:1.5.0'
Sync the project by clicking "Sync Now" in the top-right corner.

Step 3: Implementing the Floating Action Button

Open the activity_main.xml file.
Add the following code to create a FAB with an icon:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
app:srcCompat="@android:drawable/ic_dialog_email" />
Define the fab_margin dimension in the file res/values/dimens.xml:
<dimen name="fab_margin">16dp</dimen>

Step 4: Implementing the Snackbar

Open the MainActivity.kt file.
Add an import statement for the Snackbar component:
import com.google.android.material.snackbar.Snackbar
Inside the onCreate method, add an onClick listener for the FAB:
val fab: FloatingActionButton = findViewById(R.id.fab)
fab.setOnClickListener { view ->
displaySnackbar(view)
}
Create a new function called displaySnackbar:
private fun displaySnackbar(view: View) {
Snackbar.make(view, "Email sent", Snackbar.LENGTH_LONG)
.setAction("Undo") {
// Implement action for undoing the email send operation
}
.setActionTextColor(Color.RED)
.show()
}
Step 5: Testing the Application
Run the application on an emulator or an Android device.
Click on the FAB to display the Snackbar with the "Email sent" message and "Undo" action.
Conclusion:
In this lab workbook, you learned how to implement the Floating Action Button and Snackbar components in an Android Kotlin application following the Material Design guidelines [1].
By mastering these components, you will be able to create more interactive and user-friendly applications. Remember to explore other Material Design components and features to further enhance your app development skills.
References:
[1]
Kotlin - Working with the Floating Action Button and Snackbar
⁠
⁠
[2]
Snackbar Android Tutorial with Floating Action Button
⁠
⁠
[3]
Mobile Development Mastery Class : Android App ...
⁠
⁠
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.