Tutorials  /  JavaScript

Chips und ChipGroups: Die neuen Helden der Android-Benutzeroberfläche

Ccentron Redaktion · September 2024 ·3 Min. Lesezeit ·JavaScript, Tutorial

Entdecken Sie in unserem neuesten Blogbeitrag die aufregenden Möglichkeiten der Integration von Chips und ChipGroups in Ihre Android-Apps! Von modernem Design bis hin zur verbesserten Benutzerinteraktion - erfahren Sie, wie diese neuen Material Design-Komponenten Ihre Anwendungen auf das nächste Level bringen können.

Android Chips

Chips sind im Grunde Texte, die in einem abgerundeten Hintergrund angezeigt werden. Sie sind anwählbar und können auch Symbole enthalten. Chips sind eine neuere und stilisierte Form von RadioButtons. Um Chips in Ihrer Android-Anwendung zu verwenden, müssen Sie das neueste Android SDK 28 verwenden. Folgende Abhängigkeiten müssen in der build.gradle hinzugefügt werden:

Code
implementation 'androidx.appcompat:appcompat:1.0.0-alpha1'
implementation 'com.google.android.material:material:1.0.0-alpha1'
VM

Passende Infrastruktur bei centron

Node-Anwendungen wollen deployt werden: ccloud³ VMs mit vollem Root-Zugriff ab 3,12 € im Monat – oder gleich als Managed Server, wenn der Betrieb nicht bei Ihnen liegen soll. Cloud Server mieten →

Verwendung von Android Chips

Ein Chip wird im XML-Layout definiert als:

Code
<com.google.android.material.chip.Chip
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:chipText="Default" />

app:chipText zeigt den Textteil im Chip an. So sieht der Chip auf dem Bildschirm aus:

Arten von Chips

Chips können gestylt werden als:

  • Default: Dieser macht nichts, es sei denn, ein anderes XML-Attribut ist vorhanden.
  • Entry: Wir müssen den Stil @style/Widget.MaterialComponents.Chip.Entry hinzufügen. Dies macht den Chip anwählbar und enthält standardmäßig ein Häkchen- und ein Schließen-Symbol.
  • Choice: Diese Art von Chip wird im Allgemeinen verwendet, um Chips für Auswahlmarkierungen an- oder abzuwählen. Stil @style/Widget.MaterialComponents.Chip.Choice wird im Allgemeinen in Chip-Gruppen verwendet.
  • Actions: Dieser Chip ist anwählbar und wird verwendet, um Aktionen auszulösen, wenn sie angeklickt werden. Stil @style/Widget.MaterialComponents.Chip.Action
  • Filter: Dieser Chip ist anwählbar und zeigt ein Häkchen an, wenn er ausgewählt ist. Stil @style/Widget.MaterialComponents.Chip.Filter

XML-Attribute

  • app:chipText
  • app:chipBackgroundColor
  • app:rippleColor - Zeigt einen benutzerdefinierten Ripple-Effekt an, wenn der Chip gedrückt wird.
  • app:checkable - Wird verwendet, um festzulegen, ob der Umschalter aktiviert ist oder nicht.
  • app:chipIcon - Wird verwendet, um ein benutzerdefiniertes Symbol im Chip festzulegen.
  • app:closeIcon - Normalerweise in Chips vom Typ Entry vorhanden. Wir können unser Symbol damit festlegen. Das Schließen-Symbol befindet sich standardmäßig rechts vom Text.
  • app:closeIconTint
  • app:checkedIcon - Wird verwendet, um das Häkchen-Symbol zu ändern, das in Eintrags- und Filtertypen von Chips vorhanden ist.
  • app:chipStartPadding/app:chipEndPadding
  • app:iconStartPadding/app:iconEndPadding

Android ChipGroup

Ähnlich wie RadioGroups werden ChipGroups verwendet, um Chips zu halten.

Code
<com.google.android.material.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp">

    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="Dies" />

    <!-- Weitere Chips hier einfügen -->

</com.google.android.material.chip.ChipGroup>

Fazit

Chips und ChipGroups bieten eine moderne Möglichkeit, Benutzeroberflächen in Android-Anwendungen zu gestalten. Durch die Verwendung von XML-Attributen und Stilen können Chips an verschiedene Anforderungen angepasst werden. Die ChipGroups bieten eine bequeme Möglichkeit, mehrere Chips zu gruppieren und sie gemeinsam zu verwalten. Mit diesem Wissen sind Sie bereit, diese neuen Komponenten in Ihre eigenen Android-Anwendungen zu integrieren.

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 JavaScript
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