Tutorials  /  Android

MaterialAlertDialog: Verbessere Android UX

Ccentron Redaktion · Juni 2024 ·5 Min. Lesezeit ·Android, Tutorial
Vijona Tutorial JavaScript Anleitung Dialoge neu gestalten: MaterialAlertDialog für Android

Mit der Einführung von Material Design 2.0 haben Android-Entwickler spannende neue Möglichkeiten, Dialoge zu gestalten, die die Aufmerksamkeit der Benutzer fesseln und die Interaktivität der App verbessern. In diesem Leitfaden werden wir erkunden, wie Sie Dialoge in Ihren Android-Anwendungen mithilfe des Material-Themas implementieren und anpassen können.

Verstehen von Materialkomponenten: Dialoge

Dialoge spielen eine entscheidende Rolle in Anwendungen, indem sie wesentliche Informationen hervorheben oder Benutzerentscheidungen erfordern. Dank der Fortschritte in Material Design 2.0 sind Dialoge jetzt dynamischer und vielseitiger. Um loszulegen, fügen Sie die Materialkomponenten-Bibliothek zu Ihrem Projekt hinzu, indem Sie die folgende Abhängigkeit hinzufügen:

Copy Code Copied Use a different Browser

implementation 'com.google.android.material:material:1.1.0-alpha09'

Stellen Sie außerdem sicher, dass Ihre Aktivität von einem MaterialComponent-Theme oder einem seiner Nachkommen erbt, um das gesamte Funktionsspektrum zu nutzen.

Erstellen eines einfachen MaterialAlertDialog

Beginnen wir mit der Erstellung eines einfachen MaterialAlertDialog mithilfe des Builder-Musters:

Copy<br /> Code Copied Use a different Browser

new MaterialAlertDialogBuilder(MainActivity.this)
    .setTitle("Title")
    .setMessage("Your message goes here. Keep it short but clear.")
    .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialogInterface, int i) {
            // Positive button action
        }
    })
    .setNegativeButton("CANCEL", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialogInterface, int i) {
            // Negative button action
        }
    })
    .show();

Dieser Dialog bietet eine einfache Schnittstelle für Benutzer, um eine Aktion zu bestätigen oder abzubrechen.

Anpassen der Schaltflächenstile

Die Schaltflächen in einem MaterialAlertDialog können so gestaltet werden, dass sie dem Design-Thema Ihrer Anwendung entsprechen. Hier ist ein Beispiel, wie Sie Schaltflächenstile anpassen können:

Copy<br /> Code Copied Use a different Browser

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

Wenden Sie diese Stile im Dialog-Builder an:

Copy<br /> Code Copied Use a different Browser

new MaterialAlertDialogBuilder(MainActivity.this, R.style.AlertDialogTheme)
    .setTitle("Title")
    .setMessage("Your message goes here. Keep it short but clear.")
    .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialogInterface, int i) {
            // Positive button action
        }
    })
    .setNeutralButton("LATER", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialogInterface, int i) {
            // Neutral button action
        }
    })
    .show();

Erkundung von Dialogformen

Material Design ermöglicht es, Dialoge mit verschiedenen Formen wie geschnittenen oder abgerundeten Ecken zu gestalten, um die visuelle Attraktivität zu erhöhen.

Dialog mit geschnittener Form

Copy<br /> Code Copied Use a different Browser

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

Wenden Sie den Stil für geschnittene Formen an:

Copy<br /> Code Copied Use a different Browser

new MaterialAlertDialogBuilder(MainActivity.this, R.style.CutShapeTheme)
    .setTitle("Title")
    .setMessage("Your message goes here. Keep it short but clear.")
    .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialogInterface, int i) {
            // Positive button action
        }
    })
    .setNeutralButton("LATER", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialogInterface, int i) {
            // Neutral button action
        }
    })
    .show();

Dialog mit abgerundeter Form

Copy<br /> Code Copied Use a different Browser

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

Integrieren Sie die abgerundete Form im Builder:

Copy<br /> Code Copied Use a different Browser

new MaterialAlertDialogBuilder(MainActivity.this, R.style.RoundShapeTheme)
    .setTitle("Title")
    .setMessage("Your message goes here. Keep it short but clear.")
    .setPositiveButton("GOT IT", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialogInterface, int i) {
            // Positive button action
        }
    })
    .setNeutralButton("LATER", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialogInterface, int i) {
            // Neutral button action
        }
    })
    .show();

Hinzufügen von benutzerdefinierter Typografie

Benutzerdefinierte Schriftarten können das Erscheinungsbild Ihres Dialogs weiter personalisieren:

Copy<br /> Code Copied Use a different Browser

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

Nutzen Sie den benutzerdefinierten Schriftstil, um Ihrem Dialog eine einzigartige Note zu verleihen.

Indem Sie diesen Schritten folgen, können Sie ansprechende, moderne Dialoge erstellen, die den Material-Design-Prinzipien entsprechen und die Benutzererfahrung in Ihren Android-Anwendungen verbessern. Experimentieren Sie mit verschiedenen Stilen und Formen, um die beste Passform für das Thema Ihrer App zu finden!

Jetzt 200 € Guthaben sichern

Testen Sie Ihr Setup auf ccloud³

Registrieren Sie sich in der ccloud³ und erhalten Sie 200 € Startguthaben für Ihr Projekt – z. B. für eine PostgreSQL-VM mit automatischen Backups.

centron Redaktion Technische Redaktion

Das Redaktionsteam von centron schreibt Anleitungen aus dem Betriebsalltag: getestet auf unserer eigenen Plattform, betrieben im Rechenzentrum in Hallstadt bei Bamberg.

Kategorie Android
Teilen
Noch offene Fragen?

Unser Team hilft Ihnen bei Ihrem konkreten Setup weiter – von Menschen, die die Plattform selbst betreiben.

War dieses Tutorial hilfreich?

Ihre Antwort wird anonym gespeichert und hilft uns, die Tutorials zu verbessern.

Kommentare

Noch keine Kommentare – stellen Sie die erste Frage zu diesem Tutorial.

Zum Kommentieren anmelden

Kommentare stehen centron-Kunden offen. Melden Sie sich in Ihrem Konto an, um eine Frage zu diesem Tutorial zu stellen.

Weiterlesen

Das könnte Sie auch interessieren

Jetzt kostenlos anfangen

Melden Sie sich an und erhalten Sie in den ersten 60 Tagen ein Guthaben von 200 € bei centron.

Dieses Werbeangebot gilt nur für neue Konten. Angebot ausschließlich für Gewerbetreibende.

Jetzt loslegen Sales kontaktieren