Android Tutorial
Software Setup and Configuration
Android Studio
File Structure
Components
Core Topics
Layout
View
Button
Intent and Intent Filters
Toast
RecyclerView
Fragments
Adapters
Other UI Component
Image Loading Libraries
Date and Time
Material Design
Bars
Working with Google Maps
Chart
Animation
Database
Advance Android
Jetpack
Architecture
App Publish
App Monetization
A Snackbar
is a lightweight feedback mechanism to show users a brief message at the bottom of the screen on mobile and at the lower left on larger devices. Snackbars are often used in conjunction with user actions, or to notify users of occurrences such as an app process completion or errors.
Here's how you can use and customize a Snackbar
in Android:
Make sure you have the Material Design library in your build.gradle
(Module: app) file, as Snackbar
is part of this library:
implementation 'com.google.android.material:material:1.4.0'
Sync your project after adding the dependency.
In your Kotlin activity or fragment:
import com.google.android.material.snackbar.Snackbar // ... val myLayout: View = findViewById(R.id.my_layout) Snackbar.make(myLayout, "This is a simple Snackbar", Snackbar.LENGTH_LONG).show()
The first parameter is a View
. The snackbar will find the parent layout from this view. Typically, it's the root view of your layout (like a CoordinatorLayout
, FrameLayout
, etc.).
The second parameter is the message text.
The third parameter is the duration. You can use Snackbar.LENGTH_SHORT
, Snackbar.LENGTH_LONG
, or Snackbar.LENGTH_INDEFINITE
.
You can also add an action to your snackbar, like an "UNDO" action:
Snackbar.make(myLayout, "Item deleted", Snackbar.LENGTH_LONG) .setAction("UNDO") { // Your undo action code here } .show()
You can customize the appearance and behavior of the snackbar:
val snackbar = Snackbar.make(myLayout, "Item deleted", Snackbar.LENGTH_LONG) snackbar.setAction("UNDO") { // Your undo action code here } val snackbarView = snackbar.view snackbarView.setBackgroundColor(ContextCompat.getColor(this, R.color.your_color)) val textView = snackbarView.findViewById<TextView>(com.google.android.material.R.id.snackbar_text) textView.setTextColor(ContextCompat.getColor(this, R.color.your_text_color)) snackbar.show()
If you have a FloatingActionButton
and are using a CoordinatorLayout
, the snackbar will automatically push up the FAB when it appears, creating a nice interaction effect. Ensure your FloatingActionButton
is a direct child of the CoordinatorLayout
for this to work automatically.
Always remember that the Snackbar
should be used for brief notifications. If you need to deliver a more critical or multi-option message, consider using an AlertDialog
.
Make sure the parent layout of the view you provide to Snackbar.make()
is appropriate. A CoordinatorLayout
is generally preferred to ensure correct behavior with other UI components, especially the FloatingActionButton
.
Implementing Snackbar example code in Android:
val rootView = findViewById<View>(android.R.id.content) Snackbar.make(rootView, "This is a Snackbar", Snackbar.LENGTH_SHORT).show()
Customizing Snackbar appearance and duration:
Snackbar.make(rootView, "Custom Snackbar", Snackbar.LENGTH_LONG) .setBackgroundTint(ContextCompat.getColor(this, R.color.customColor)) .setTextColor(ContextCompat.getColor(this, R.color.textColor)) .show()
Handling actions and click events in Snackbar:
Snackbar.make(rootView, "Snackbar with Action", Snackbar.LENGTH_LONG) .setAction("Action") { // Handle action click } .show()
Snackbar with action button in Android:
Snackbar.make(rootView, "Snackbar with Action", Snackbar.LENGTH_LONG) .setAction("Action") { // Handle action click } .show()
Using CoordinatorLayout with Snackbar in Android:
CoordinatorLayout
to take advantage of its features, such as automatically moving other UI components when the Snackbar appears.<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Other UI components --> <com.google.android.material.snackbar.Snackbar android:id="@+id/snackbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_anchor="@id/other_view_id" app:layout_anchorGravity="bottom"> <!-- Snackbar content --> </com.google.android.material.snackbar.Snackbar> </androidx.coordinatorlayout.widget.CoordinatorLayout>
Adding icons and images to Snackbar in Android:
val snackbar = Snackbar.make(rootView, "Snackbar with Icon", Snackbar.LENGTH_LONG) val icon = ContextCompat.getDrawable(this, R.drawable.ic_info) snackbar.view.findViewById<TextView>(com.google.android.material.R.id.snackbar_text) .setCompoundDrawablesRelativeWithIntrinsicBounds(icon, null, null, null) snackbar.show()
Dismissing Snackbar programmatically in Android:
val snackbar = Snackbar.make(rootView, "Dismissible Snackbar", Snackbar.LENGTH_INDEFINITE) snackbar.setAction("Dismiss") { snackbar.dismiss() } snackbar.show()