In diesem Tutorial werden wir verschiedene Formen des Android Snackbar-Widgets diskutieren und in unserer Anwendung implementieren.
Android Snackbar
Snackbar in Android ist ein neues Widget, das mit der Material Design-Bibliothek eingeführt wurde und Toasts ersetzt. Der Android Snackbar ist ein leichtgewichtiges Widget und wird verwendet, um Nachrichten am unteren Rand der Anwendung anzuzeigen, wobei das Wischen aktiviert ist. Die Snackbar in Android kann optional eine Aktions-Schaltfläche enthalten.
Unterschied zwischen Toast und Snackbar
- A Toast messages can be customised and printed anywhere on the screen, but a Snackbar can be only showed in the bottom of the screen
- A Toast message don’t have action button, but Snackbar may have action button optionally. Though, A Snackbar shouldn’t have more than one action button
- Eine Toast-Nachricht kann nicht ausgeschaltet werden, bis die Zeit abgelaufen ist, Snackbar kann jedoch vor Ablauf der Zeit abgewischt werden.
Hinweis: Toast-Nachricht und Snackbar haben die Eigenschaft der Anzeigedauer gemeinsam. Ein Code-Schnipsel zur Anzeige einer grundlegenden Android Snackbar wird unten gezeigt.
Snackbar snackbar = Snackbar
.make(coordinatorLayout, "www.journaldev.com", Snackbar.LENGTH_LONG);
snackbar.show();
In dem obigen Ausschnitt akzeptiert die Methode make()
drei Parameter:
- coordinatorLayout: Dies ist das Wurzellaayout der Aktivität
- www.journaldev.com: Dies ist die Nachricht, die in der Snackbar angezeigt werden soll, und wir können sie mit unserer eigenen Nachricht anpassen.
- Snackbar.LENGH_LONG: Dies ist der letzte Parameter, der angibt, wie lange der Snackbar angezeigt werden soll.
Die Methode show()
wird verwendet, um den Snackbar auf dem Bildschirm anzuzeigen.
Beispiel für die Projektstruktur von Android Snackbar
Beispielcode für Android Snackbar
Es gibt keine Änderungen im activity_main.xml
-Code, der das CoordinatorLayout enthält. Das content_main.xml
besteht aus drei Schaltflächen. Eine für jeden Typ von Snackbar, über den wir sprechen werden.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.journaldev.snackbar.MainActivity"
tools:showIn="@layout/activity_main">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DEFAULT SNACKBAR"
android:id="@+id/button"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ACTION CALL SNACKBAR"
android:id="@+id/button2"
android:layout_below="@+id/button"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CUSTOM VIEW SNACKBAR"
android:id="@+id/button3"
android:layout_below="@+id/button2"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Der Codeausschnitt für die Snackbar-Schaltfläche Action Call ist unten angegeben:
two.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar snackbar = Snackbar
.make(coordinatorLayout, "Message is deleted", Snackbar.LENGTH_LONG)
.setAction("UNDO", new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar snackbar1 = Snackbar.make(coordinatorLayout, "Message is restored!", Snackbar.LENGTH_SHORT);
snackbar1.show();
}
});
snackbar.show();
}
});
In dem obigen Code wird eine neue onClickListener-Methode aufgerufen, wenn die Aktions-Schaltfläche angeklickt wird, wobei der entsprechende Snackbar darin angezeigt wird. Der Codeausschnitt für den benutzerdefinierten Snackbar, der bei der zweiten Schaltfläche aufgerufen wird, ist unten angegeben:
three.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar snackbar = Snackbar
.make(coordinatorLayout, "Try again!", Snackbar.LENGTH_LONG)
.setAction("RETRY", new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
snackbar.setActionTextColor(Color.RED);
View sbView = snackbar.getView();
TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.YELLOW);
snackbar.show();
}
});
Der MainActivity.java
ist unten angegeben.
package com.journaldev.snackbar;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
CoordinatorLayout coordinatorLayout;
private Button one, two, three;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "FloatingActionButton is clicked", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);
View layout= findViewById(R.id.layout);
one=(Button)layout.findViewById(R.id.button);
two=(Button)layout.findViewById(R.id.button2);
three=(Button)layout.findViewById(R.id.button3);
one.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar snackbar = Snackbar
.make(coordinatorLayout, "www.journaldev.com", Snackbar.LENGTH_LONG);
snackbar.show();
}
});
two.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar snackbar = Snackbar
.make(coordinatorLayout, "Message is deleted", Snackbar.LENGTH_LONG)
.setAction("UNDO", new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar snackbar1 = Snackbar.make(coordinatorLayout, "Message is restored!", Snackbar.LENGTH_SHORT);
snackbar1.show();
}
});
snackbar.show();
}
});
three.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar snackbar = Snackbar
.make(coordinatorLayout, "Try again!", Snackbar.LENGTH_LONG)
.setAction("RETRY", new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
snackbar.setActionTextColor(Color.RED);
View sbView = snackbar.getView();
TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.YELLOW);
snackbar.show();
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Fügen Sie das Menü auf; dies fügt Elemente zur Aktionsleiste hinzu, wenn sie vorhanden ist.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Behandeln Sie Klicks auf Elemente der Aktionsleiste hier. Die Aktionsleiste wird
// automatisch Klicks auf die Home/Schaltfläche "Nach oben" behandeln, solange
// Sie eine übergeordnete Aktivität in der AndroidManifest.xml angeben.
int id = item.getItemId();
//noinspection VereinfachbareIfAnweisung
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Das activity_main.xml
ist unverändert. Die Ausgabe der Snackbar-Android-App in Aktion wird unten angezeigt. Damit endet dieses Tutorial. Sie können das endgültige Android Snackbar-Projekt über den untenstehenden Link herunterladen.
Android Snackbar Beispielprojekt herunterladen
Referenz: Android-Entwicklerdokumentation
Source:
https://www.digitalocean.com/community/tutorials/android-snackbar-example-tutorial