Theming Material Design Snackbars in Android with Example
In the previous article, it’s been discussed Snackbar Material Design Components in Android. In this article, it’s been discussed how we can theme material design Snackbar and increase the User Experience.
Theming Example 1:
- This method is done using the styles.xml file. Where we need to override the default style of the Snackbar.
- Have a look at the following image to get what all the things can be customized on the Snackbar.
- By implementing this method all the Snackbars get affected by these style attributes.
- In this customization, the background tint and the action button text color is changed.
- This makes the user focus on the action and they can do the desired action according to the message shown on the Snackbar.
- This also prevents user the unnecessary clicking on the action button.
XML
< resources > <!-- Base application theme. --> < style name = "AppTheme" parent = "Theme.MaterialComponents.Light.DarkActionBar" > <!-- Customize your theme here. --> < item name = "colorPrimary" >@color/colorPrimary</ item > < item name = "colorPrimaryDark" >@color/colorPrimaryDark</ item > < item name = "colorAccent" >@color/colorAccent</ item > <!--this is makes changes to the entire snackbar--> < item name = "snackbarStyle" >@style/Widget.App.Snackbar</ item > <!--this item is optional as all the snackbar wont contain the action button--> < item name = "snackbarButtonStyle" >@style/Widget.App.SnackbarButton</ item > </ style > < style name = "Widget.App.Snackbar" parent = "Widget.MaterialComponents.Snackbar" > <!--this child makes changes to the background color of the snackbar--> < item name = "materialThemeOverlay" >@style/ThemeOverlay.App.Snackbar</ item > <!--if this is made 0 then the action button text color will be white--> <!--if this is 1 then the custom color can be set to action button text--> < item name = "actionTextColorAlpha" >1</ item > </ style > <!--this is child is needed only when there is action button in snackbar--> <!--otherwise this is not necessary--> <!--in this case the action button color inside the snackbar is set to red--> < style name = "Widget.App.SnackbarButton" parent = "Widget.MaterialComponents.Button.TextButton.Snackbar" > < item name = "android:textColor" >@android:color/holo_red_dark</ item > </ style > <!--this color inside this child is the background color of the snackbar--> < style name = "ThemeOverlay.App.Snackbar" parent = "" > < item name = "colorOnSurface" >@color/colorPrimaryDark</ item > </ style > </ resources > |
Output: Run on Emulator
Theming Example 2:
- This method of implementation makes changes to only the particular Snackbar and not for all the Snackbars.
- The same can be achieved by setting all the things programmatically.
- Now working with MainActivity.java file.
Java
import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.Toast; import com.google.android.material.snackbar.Snackbar; public class MainActivity extends AppCompatActivity { // Button to show the snackbar Button bShowSnackbar; @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); // register the show snackbar button with the // appropriate ID bShowSnackbar = findViewById(R.id.show_snackbar_button); // button click listener to show the snackbar bShowSnackbar.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v) { // pass the mSnackbarLayout as the view // to the make function Snackbar snackbar = Snackbar.make(v, "You have deleted an item" , Snackbar.LENGTH_LONG); snackbar.setAction( "UNDO" , new View.OnClickListener() { @Override public void onClick(View v) { // perform any action when the button on the snackbar is clicked here in this case it // shows a simple toast Toast.makeText(MainActivity. this , "The item has been restored" , Toast.LENGTH_SHORT).show(); } }); // the duration is in terms of milliseconds snackbar.setDuration( 3000 ); // set the background tint color for the snackbar snackbar.setBackgroundTint(getResources().getColor(R.color.colorPrimary)); // set the action button text color of the snackbar however this is optional // as all the snackbar wont have the action button snackbar.setActionTextColor(getResources().getColor(R.color.actionTextColorForSnackbar)); snackbar.show(); } }); } } |
Kotlin
import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.Toast; import com.google.android.material.snackbar.Snackbar; class MainActivity : AppCompatActivity() { // Button to show the snackbar var bShowSnackbar: Button? = null override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) // register the show snackbar button with the // appropriate ID bShowSnackbar = findViewById(R.id.show_snackbar_button) // button click listener to show the snackbar bShowSnackbar.setOnClickListener(object : OnClickListener() { fun onClick(v: View?) { // pass the mSnackbarLayout as the view // to the make function val snackbar = Snackbar.make(v, "You have deleted an item" , Snackbar.LENGTH_LONG) snackbar.setAction( "UNDO" , object : OnClickListener() { fun onClick(v: View?) { // perform any action when the button on the snackbar is clicked here in this case it // shows a simple toast Toast.makeText( this @MainActivity , "The item has been restored" , Toast.LENGTH_SHORT ).show() } }) // the duration is in terms of milliseconds snackbar.duration = 3000 // set the background tint color for the snackbar snackbar.setBackgroundTint(resources.getColor(R.color.colorPrimary)) // set the action button text color of the snackbar however this is optional // as all the snackbar wont have the action button snackbar.setActionTextColor(resources.getColor(R.color.actionTextColorForSnackbar)) snackbar.show() } }) } } //This code is written by Ujjwal Kumar Bhardwaj |
Output: Run on Emulator
Theming Example 3:
- Changing the animation mode of the Snackbar.
- This increases the User Experience too, also by changing the animation of the entering and exit of the Snackbar makes the user focus on the message they got on Snackbar and perform the action according to the message.
- Have a look at the following image to get the difference between the animation modes of the Snackbar.
- The material design offers two types of animation modes for the Snackbar. One is fade animation (which is the default) and the second is the slide animation.
- The following code must be invoked inside the styles.xml file. In this case, the Snackbar animation mode is set as a slide.
XML
< resources > <!-- Base application theme. --> < style name = "AppTheme" parent = "Theme.MaterialComponents.Light.DarkActionBar" > <!-- Customize your theme here. --> < item name = "colorPrimary" >@color/colorPrimary</ item > < item name = "colorPrimaryDark" >@color/colorPrimaryDark</ item > < item name = "colorAccent" >@color/colorAccent</ item > <!--this is makes changes to the entire snackbar--> < item name = "snackbarStyle" >@style/Widget.App.Snackbar</ item > <!--this item is optional as all the snackbar wont contain the action button--> < item name = "snackbarButtonStyle" >@style/Widget.App.SnackbarButton</ item > </ style > < style name = "Widget.App.Snackbar" parent = "Widget.MaterialComponents.Snackbar" > <!--this child makes changes to the background color of the snackbar--> < item name = "materialThemeOverlay" >@style/ThemeOverlay.App.Snackbar</ item > <!--if this is made 0 then the action button text color will be white--> <!--if this is 1 then the custom color can be set to action button text--> < item name = "actionTextColorAlpha" >1</ item > <!--this attribute makes slide animation for the snackbar--> < item name = "animationMode" >slide</ item > </ style > <!--this is child is needed only when there is action button in snackbar--> <!--otherwise this is not necessary--> <!--in this case the action button color inside the snackbar is set to red--> < style name = "Widget.App.SnackbarButton" parent = "Widget.MaterialComponents.Button.TextButton.Snackbar" > < item name = "android:textColor" >@android:color/holo_red_dark</ item > < item name = "actionButtonStyle" >?attr/buttonStyle</ item > </ style > <!--this color inside this child is the background color of the snackbar--> < style name = "ThemeOverlay.App.Snackbar" parent = "" > < item name = "colorOnSurface" >@android:color/black</ item > </ style > </ resources > |
Output: Run on Emulator