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?

Our team will help you with your specific setup - in German or English, by people who run the platform themselves.

War dieses Tutorial hilfreich?

Your answer is stored anonymously and helps us improve our tutorials.

Kommentare

No comments yet - be the first to ask a question about this tutorial.

Sign in to comment

Comments are open to centron customers. Sign in to your account to ask a question about this tutorial.

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