SnackBars juega un papel muy importante en la experiencia del usuario. La barra de bocadillos que puede o no contener el botón de acción para hacer muestra el mensaje que sucedió debido a la interacción del usuario de inmediato. Entonces, en este artículo, se discutió cómo se pueden implementar los SnackBars usando diseños personalizados. Eche un vistazo a la siguiente imagen para tener una idea de cómo se pueden diferenciar los SnackBars hechos a medida de los SnackBars regulares (normales).
Pasos para implementar las SnackBars personalizadas en Android
Paso 1: crear un proyecto de actividad vacío
- Cree un proyecto de Android Studio de actividad vacío. Y selecciona JAVA como lenguaje de programación.
- Consulte Android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio? para saber cómo crear un proyecto de estudio de Android de actividad vacía.
Paso 2: trabajar con el archivo activity_main.xml
- El diseño principal aquí incluye solo un botón que, cuando se hace clic, se muestra el SnackBar personalizado.
- Invoque el código siguiente, en el archivo 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>
Interfaz de usuario de salida: Ejecutar en el emulador
Paso 3: Crear un diseño personalizado para Snackbar
- En la carpeta de diseño, cree un diseño para SnackBar que debe inflarse al construir SnackBar en el archivo 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" 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" 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>
Lo que produce la siguiente vista:
Paso 4: trabajar con el archivo 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) { // 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(); } }); } }
Salida: ejecutar en el emulador
Publicación traducida automáticamente
Artículo escrito por adityamshidlyali y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA