CODEWITHSUNDEEP
androidmaterial-designmaterial-components-androidandroid-snackbarsnackbar
the_dani
the_dani

Reputation: 2524

How to create a Snackbar like in the material documentation?

I've seen this new Snackbar Style in the Outlook for Android app and now looked for it in the Material Documentation:

https://material.io/design/components/snackbars.html

Does anybody know how to create those "offset Snackbars"?

Upvotes: 6

Views: 7519

Answers (5)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364780

You can just use the default Snackbar in the Material Components Library:

enter image description here

If you want to change the margin of the Snackbar you can add in your app theme the snackbarStyle attribute:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="snackbarStyle">@style/MySnackbar</item>
</style>

with:

<style name="MySnackbar" parent="Widget.MaterialComponents.Snackbar">
    <item name="android:layout_margin">32dp</item>
</style>

enter image description here

Upvotes: 0

Roger Alien
Roger Alien

Reputation: 3080

I added those styles from https://material.io/develop/android/components/snackbars/

<style name="Theme.App" parent="Theme.MaterialComponents.*">
    ...
    <item name="snackbarStyle">@style/Widget.App.Snackbar</item>
    <item name="snackbarButtonStyle">@style/Widget.App.SnackbarButton</item>
</style>

<style name="Widget.App.Snackbar" parent="Widget.MaterialComponents.Snackbar">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.Snackbar</item>
    <item name="actionTextColorAlpha">1</item>
  </style>

<style name="Widget.App.SnackbarButton" parent="Widget.MaterialComponents.Button.TextButton.Snackbar">
    <item name="android:textColor">@color/shrine_pink_100</item>
</style>

<style name="ThemeOverlay.App.Snackbar" parent="">
    <item name="colorPrimary">@color/shrine_pink_100</item>
    <item name="colorOnSurface">@color/shrine_pink_900</item>
</style>

and it works! Modifying code/layout/background programmatically didn't work work me

Upvotes: 1

Roberto
Roberto

Reputation: 4879

You need to use the new Material theme. In your build.gradle import
implementation 'com.google.android.material:material:1.2.0-alpha06'

Change all your Snackbar import to:

import com.google.android.material.snackbar.Snackbar

Then in your style.xml file your parent theme needs to be one of the material themes:

Theme.MaterialComponents.Light.DarkActionBar

Theme.MaterialComponents.DayNight.NoActionBar

Upvotes: 1

Ahmad Jawid
Ahmad Jawid

Reputation: 41

There are only three things you need to do to build a rounded SnackBar like Material:

  1. getLayoutParams of SnackBar and set the margins
  2. create a rounded corner shape
  3. set round corner shape as a background for the SnackBar

Here is the complete code: 

Snackbar.make(
            findViewById(R.id.coordinator_layout),
            "Your text here",
            Snackbar.LENGTH_SHORT
        ).apply {
            view.layoutParams = (view.layoutParams as CoordinatorLayout.LayoutParams).apply {
                setMargins(
                    12,
                    12,
                    12,
                    12
                )
            }
            view.background = resources.getDrawable(R.drawable.round_corner, null)
        }.show()

and here is the code for round corner drawable in drawable/round_corner:

  <shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#323232"/>
    <corners android:radius="4dp"/>
</shape>

Upvotes: 2

adityakamble49
adityakamble49

Reputation: 2011

how to create those "offset Snackbars"?

You can get the LayoutParams of SnackBar and add Bottom and Side Margin to it

Try out like code below

public static void showSnackbar(Snackbar snackbar, int sideMargin, int marginBottom) {
    final View snackBarView = snackbar.getView();
    // Depend upon your parent Layout Use `LayoutParams` of that Layout
    final FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) snackBarView.getLayoutParams();

    params.setMargins(params.leftMargin + sideMargin,
                params.topMargin,
                params.rightMargin + sideMargin,
                params.bottomMargin + marginBottom);

    snackBarView.setLayoutParams(params);
    snackbar.show();
}

Upvotes: 3

Related Questions