Los otros componentes de Material design necesitan atributos especiales para implementarse. Pero en este artículo, se implementa Material Design Snackbar y no necesita los atributos especiales para implementarse en la aplicación. Eche un vistazo a la siguiente imagen para diferenciar entre el snack bar normal y el Snackbar de Material design en Android. Lo que hace a Material design Snackbar es su diseño y fácil implementación y personalización. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java .
Pasos para implementar el Snackbar de Material Design
Paso 1: Cree un proyecto de Android Studio de actividad vacío
- Cree un proyecto de Android Studio de actividad vacío. Consulte Android | Cómo crear/iniciar un nuevo proyecto en Android Studio para crear un proyecto de Android Studio.
Paso 2: Agrega la dependencia requerida
- Agregue la biblioteca de dependencias de Material Design al archivo gradle de nivel de aplicación.
- Para obtener el archivo gradle de nivel de aplicación, vaya a Project > app > build.gradle .
- E invoque la siguiente dependencia.
implementación ‘com.google.android.material:material:1.3.0-alpha03’
- Consulte la siguiente imagen si no puede obtener el archivo Gradle de nivel de aplicación e invocar la dependencia. Después de invocar la dependencia, haga clic en el botón » Sincronizar ahora » en la parte superior derecha. Y asegúrese de que el sistema esté conectado a la red para que pueda descargar los archivos necesarios.
Paso 3: cambie el tema base de la aplicación al tema Componentes materiales en el archivo styles.xml
- Para cambiar el tema base de la aplicación, vaya a app > src > res > styles.xml e invoque el siguiente código.
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> </style> </resources>
- Consulte la siguiente imagen si no puede ubicar e invocar el tema Componentes materiales.
Paso 4: ahora trabajando con el archivo activity_main.xml
- Invoque el siguiente código XML dentro de activity_main.xml o puede diseñarlo por su cuenta.
XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:context=".MainActivity" tools:ignore="HardcodedText"> <!--a sample button to show or popup a MDC snackbar--> <Button android:id="@+id/show_snackbar_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="128dp" android:layout_marginEnd="32dp" android:text="SHOW SNACKBAR" /> </LinearLayout>
Interfaz de usuario de salida: Ejecutar en el emulador
Paso 5: ahora trabajando con MainActivity.java
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) {
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();
}
});
snackbar.show();
}
});
}
}
Se produce la siguiente salida:
Más Funcionalidades de la Snackbar Material design
Funcionalidad 1: Establecer la duración del Snackbar manualmente
- Invoque el siguiente código dentro de MainActivity.java .
- En este caso, la duración de cierre de Snackbar se establece en 3 segundos.
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) {
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 in this case its 3 seconds
snackbar.setDuration(3000);
snackbar.show();
}
});
}
}
Se produce la siguiente salida:
Funcionalidad 2: Prevención de la superposición de Snackbar, sobre el FAB (botón de acción flotante)
- Para evitar la superposición simple de Snackbar, consulte ¿Cómo evitar el botón de acción flotante superpuesto de Snackbar en Android? . Este método muestra la configuración de acnhorPoint en el botón de acción flotante.
- Invoque el siguiente código dentro de activity_main.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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:context=".MainActivity" tools:ignore="HardcodedText"> <!--a sample button to show or popup a MDC snackbar--> <Button android:id="@+id/show_snackbar_button" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="128dp" android:layout_marginEnd="32dp" android:text="SHOW SNACKBAR" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <!--a simple floating action button with icon--> <com.google.android.material.floatingactionbutton.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:layout_marginBottom="16dp" android:backgroundTint="@color/colorPrimary" android:src="@drawable/ic_add_black_24dp" app:layout_constraintBottom_toTopOf="@+id/snackbar_layout" app:layout_constraintEnd_toEndOf="parent" /> <!--this layout makes the floating action button to raise up whenever the snackbar pops up from bottom--> <androidx.coordinatorlayout.widget.CoordinatorLayout android:id="@+id/snackbar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_alignParentBottom="true" app:layout_constraintBottom_toBottomOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
- Ahora trabajando con el archivo MainActivity.java para manejar la superposición de Snackbar.
Java
import androidx.appcompat.app.AppCompatActivity;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
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;
// coordinator layout for snackbar
CoordinatorLayout mSnackbarLayout;
@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);
// register the coordinator layout with the appropriate ID
mSnackbarLayout = findViewById(R.id.snackbar_layout);
// 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(mSnackbarLayout, "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);
snackbar.show();
}
});
}
}
Salida: ejecutar en el emulador
Funcionalidad 3: función de deslizamiento para que Snackbar lo descarte
- Invoque el siguiente código dentro de activity_main.xml
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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:context=".MainActivity" tools:ignore="HardcodedText"> <!--a sample button to show or popup a MDC snackbar--> <Button android:id="@+id/show_snackbar_button" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="128dp" android:layout_marginEnd="32dp" android:text="SHOW SNACKBAR" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <!--this layout makes the floating action button to raise up whenever the snackbar pops up from bottom--> <androidx.coordinatorlayout.widget.CoordinatorLayout android:id="@+id/snackbar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_alignParentBottom="true" app:layout_constraintBottom_toBottomOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
- Ahora trabajando con el archivo MainActivity.java y mientras construyes el Snackbar, asegúrate de pasar el diseño del coordinador para la función » hacer «.
Java
import androidx.appcompat.app.AppCompatActivity;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
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;
// coordinator layout for snackbar
CoordinatorLayout mSnackbarLayout;
@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);
// register the coordinator layout with the
// appropriate ID
mSnackbarLayout = findViewById(R.id.snackbar_layout);
// 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(mSnackbarLayout, "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);
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