Você está na página 1de 6

Snackbar

Definação:
Snackbars fornecem feedback leve sobre uma operação. Eles mostram uma breve mensagem
na parte inferior da tela em dispositivos móveis e no canto inferior esquerdo em dispositivos
maiores. Snackbars aparecem acima de todos os outros elementos na tela e apenas um pode ser
exibido por vez.

Eles desaparecem automaticamente após um tempo limite ou após a interação do usuário em


outro lugar na tela, especialmente após interações que invocam uma nova superfície ou
atividade. Snackbars podem ser retirados da tela.

Passo a passo de como criar um Snackbar:


Etapa 1: Criar um projeto de atividade vazio
 Crie um projeto de atividade do Android Studio vazio. E selecione o JAVA
como linguagem de programação.
 Consulte Android | Como criar / iniciar um novo projeto no Android
Studio? para saber como criar uma atividade vazia do projeto do Android
Studio.
Etapa 2: Trabalhar com o arquivo activity_main.xml

 O layout principal aqui inclui apenas um botão que, quando clicado, a


SnackBar personalizada deve ser exibida.
 Chame o seguinte código, no arquivo activity_main.xml .

XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="HardcodedText">

<Button
android:id="@+id/showSnackbarButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:backgroundTint="@color/colorPrimary"
android:text="SHOW SNACKBAR"
android:textColor="@android:color/white" />

</RelativeLayout>

IU de saída: executar no emulador

Etapa 3: Criação de um layout personalizado para Snackbar


 Na pasta de layout, crie um layout para o SnackBar que precisa ser
aumentado ao construir o SnackBar no arquivo MainActivity.java .

XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="HardcodedText">

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:elevation="4dp"
app:cardBackgroundColor="@color/colorPrimaryDark"
app:cardCornerRadius="4dp"

2
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="true">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp">

<ImageView
android:id="@+id/imageView"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentStart="true"
android:src="@drawable/image_logo" />

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_toEndOf="@id/imageView"
android:text="GeeksforGeeks"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="18sp"
android:textStyle="bold" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/textView1"
android:layout_marginStart="4dp"
android:layout_toEndOf="@id/imageView"
android:text="Computer Science Portal"
android:textColor="@android:color/white"
android:textSize="14sp" />

<!--this view separates between button and the message-->


<View
android:layout_width="2dp"
android:layout_height="45dp"
android:layout_toStartOf="@id/gotoWebsiteButton"
android:background="@android:color/white" />

<Button
android:id="@+id/gotoWebsiteButton"

style="@style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="wrap_content"

3
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:text="GOTO WEBSITE"
android:textColor="@android:color/white"
android:textSize="14sp" />

</RelativeLayout>

</androidx.cardview.widget.CardView>
</RelativeLayout>
O que produz a seguinte visão:

Etapa 4: Trabalhar com o arquivo MainActivity.java

Java
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
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 bShowSnackbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// register the button with appropriate ID


bShowSnackbar = findViewById(R.id.showSnackbarButton);

bShowSnackbar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

4
// create an instance of the snackbar
final Snackbar snackbar = Snackbar.make(v, "",
Snackbar.LENGTH_LONG);

// inflate the custom_snackbar_view created previously


View customSnackView =
getLayoutInflater().inflate(R.layout.custom_snackbar_view, null);

// set the background of the default snackbar as


transparent

snackbar.getView().setBackgroundColor(Color.TRANSPARENT);

// now change the layout of the snackbar


Snackbar.SnackbarLayout snackbarLayout =
(Snackbar.SnackbarLayout) snackbar.getView();

// set padding of the all corners as 0


snackbarLayout.setPadding(0, 0, 0, 0);

// register the button from the custom_snackbar_view


layout file
Button bGotoWebsite =
customSnackView.findViewById(R.id.gotoWebsiteButton);

// now handle the same button with onClickListener


bGotoWebsite.setOnClickListener(new
View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(),
"Redirecting to Website", Toast.LENGTH_SHORT).show();
snackbar.dismiss();
}
});

// add the custom snack bar layout to snackbar layout


snackbarLayout.addView(customSnackView, 0);

snackbar.show();
}
});
}
}

Definição site: https://developer.android.com/reference/com/google/android/material/


snackbar/Snackbar?hl=pt-br

5
Passo a passo de como criar um Snackbar:

https://www.geeksforgeeks.org/custom-snackbars-in-android/

Você também pode gostar