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

Snackbar in Android

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:

1. Add the Dependency:

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.

2. Use Snackbar:

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.

3. Add an Action to Snackbar:

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()

4. Customize Snackbar:

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()

5. Behavior with FloatingActionButton:

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.

Notes:

  • 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.

  1. Implementing Snackbar example code in Android:

    • Description: Snackbar is a UI component that displays a brief message at the bottom of the screen. It's typically used to show messages to the user.
    • Code:
      val rootView = findViewById<View>(android.R.id.content)
      Snackbar.make(rootView, "This is a Snackbar", Snackbar.LENGTH_SHORT).show()
      
  2. Customizing Snackbar appearance and duration:

    • Description: Customize the appearance and duration of the Snackbar, including background color, text color, and duration.
    • Code:
      Snackbar.make(rootView, "Custom Snackbar", Snackbar.LENGTH_LONG)
          .setBackgroundTint(ContextCompat.getColor(this, R.color.customColor))
          .setTextColor(ContextCompat.getColor(this, R.color.textColor))
          .show()
      
  3. Handling actions and click events in Snackbar:

    • Description: Add actions to the Snackbar, allowing users to perform additional tasks. Handle click events on the action button.
    • Code:
      Snackbar.make(rootView, "Snackbar with Action", Snackbar.LENGTH_LONG)
          .setAction("Action") {
              // Handle action click
          }
          .show()
      
  4. Snackbar with action button in Android:

    • Description: Enhance the Snackbar by adding an action button that allows users to perform a specific action when clicked.
    • Code:
      Snackbar.make(rootView, "Snackbar with Action", Snackbar.LENGTH_LONG)
          .setAction("Action") {
              // Handle action click
          }
          .show()
      
  5. Using CoordinatorLayout with Snackbar in Android:

    • Description: Snackbar is often used with CoordinatorLayout to take advantage of its features, such as automatically moving other UI components when the Snackbar appears.
    • Code:
      <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>
      
  6. Adding icons and images to Snackbar in Android:

    • Description: Customize the appearance of the Snackbar by adding icons or images. This can be done by creating a custom layout for the Snackbar.
    • Code:
      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()
      
  7. Dismissing Snackbar programmatically in Android:

    • Description: Dismiss the Snackbar programmatically before its duration expires. This is useful when you want to hide the Snackbar based on a certain condition.
    • Code:
      val snackbar = Snackbar.make(rootView, "Dismissible Snackbar", Snackbar.LENGTH_INDEFINITE)
      snackbar.setAction("Dismiss") {
          snackbar.dismiss()
      }
      snackbar.show()