Mastering Material Design Textfelder in Android-Apps
Entdecken Sie die Welt der Android-Material-Textfelder in unserem neuesten Blogbeitrag! Tauchen Sie ein in die Vielfalt der Designoptionen für Textfelder in Ihren Apps und lernen Sie, wie Sie mit der Material Design Components-Bibliothek ein beeindruckendes Benutzererlebnis schaffen können. Von Standard- und dichten Textfeldern bis hin zu geformten und konturierten Varianten – optimieren Sie Ihre Benutzeroberfläche mit unseren Expertentipps!
Material Textfelder und TextInputLayout
Die TextInputLayout-Klasse bietet eine Implementierung für Material-Textfelder. Dafür verwenden wir einfach das TextInputEditText. Zuerst müssen wir die neue Abhängigkeit der Materialkomponenten importieren und das MaterialComponent-Theme in unserer Aktivität festlegen.
implementation 'com.google.android.material:material:1.1.0-alpha09'
Ein Eingabetextfeld hat standardmäßig einen gefüllten Hintergrund, um die Aufmerksamkeit des Benutzers zu erregen. Ein einfaches Textfeld kann wie folgt erstellt werden:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:hint="Gefülltes Feld (Standard)">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Standard- und dichte Textfelder
Textfelder können zwei Höhenvarianten haben: Standard und dicht. Das dichte Textfeld ist etwas kürzer in der Höhe.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:hint="Gefülltes Feld (Standard)">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:hint="Gefülltes Feld (Dicht)"
app:boxBackgroundColor="#20D81B60">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Umrandete Textfelder
Um das umrandete Aussehen für Textfelder zu erreichen, wenden Sie den folgenden Stil auf das TextInputLayout an:
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Ähnlich wie bei gefüllten Feldern gibt es hier zwei Höhenvarianten: Standard und dicht.
Ende-Icon-Modi
Ende-Icons sind Symbole, die rechts vom Textfeld platziert werden können. Es gibt drei Arten von eingebauten Icons: password_toggle, clear_text und benutzerdefiniert.
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:hint="Passwort eingeben"
app:endIconMode="password_toggle">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Geformte Textfelder
Mit ShapeAppearance können wir die Form des Textfelds anpassen. Es gibt zwei eingebaute Formen: ‘cut’ und ’round’.
<style name="Cut" parent="ShapeAppearance.MaterialComponents.MediumComponent">
<item name="cornerFamily">cut</item>
<item name="cornerSize">12dp</item>
</style>
<style name="Rounded" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">16dp</item>
</style>
Fazit
Die Material Design Components-Bibliothek bietet eine Vielzahl von Optionen zur Anpassung von Textfeldern in Android-Apps. Von gefüllten und umrandeten Feldern bis hin zu benutzerdefinierten End-Icons und geformten Textfeldern haben Entwickler zahlreiche Möglichkeiten, eine ansprechende Benutzeroberfläche zu gestalten.
