Snackbar like google io 2018 android

1.5k Views Asked by At

How can I implement such a snackbar. To have it with round edges and show above fab and was not stretched across the width of the screenenter image description here

3

There are 3 best solutions below

0
Sandun Isuru Niraj On

Try to adding this dependency.

implementation 'com.github.danimahardhika:cafebar:1.3.1'

Then can add Cafe Bar using this code.

CafeBar.builder(context)
.theme(CafeBarTheme.LIGHT)
.duration(CafeBar.Duration.MEDIUM)
.content(R.string.text)
.neutralText("Action")
//You can parse string color
.neutralColor(Color.parseColor("#EEFF41"))
//Or use color resource
.neutralColor(R.color.neutralText)
.show();

If you need more customization visit the documentation here.

enter image description here

1
SpiritCrusher On

This is part of Recently launched Material Components pack from Google . Probably available on :-

com.google.android.material:material:1.0.0-alpha3

Whereas Its still in alpha . So i am not quite sure whether you can use it in Production or not . I am attaching some links below to go through.

Material Component Snack Bar

See all components list

Samples

2
Gabriele Mariotti On

Use the Snackbar in the Material Components library.
As default it has rounded corners.
Use the setAnchorView method to make a Snackbar appear above a specific view, in your case the fab button.

        Snackbar snackbar = Snackbar.make(view, "...", Snackbar.LENGTH_LONG);
        snackbar.setAnchorView(fab);
        snackbar.show();

Also you can customize the margin using the snackbarStyle attribute in the app theme.

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

In the snackbar style use the android:layout_margin attribute.

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

enter image description here