Building Cloud Expertise with centron - Our Tutorials

Whether you are a beginner or an experienced professional, our practical tutorials provide you with the knowledge you need to make the most of our cloud services.

Mit E-Mail anmeldenMit Google anmeldenMit GitHub anmelden
Mit E-Mail anmeldenMit Google anmeldenMit GitHub anmelden

Categories

Apache

Databases

Docker

JavaScript

Kubernetes

Linux Basis

MySQL

Python

React

Security

Ubuntu

Mastering Material Design Text Fields in Android Apps

Explore the world of Android Material Text Fields in our latest blog post! Dive into the variety of design options for text fields in your apps and learn how to create an impressive user experience with the Material Design Components Library. From standard and dense text fields to shaped and contoured variants – optimize your UI with our expert tips!

Material TextFields and TextInputLayout

The TextInputLayout class provides an implementation for Material text fields. For this, we simply use the TextInputEditText. First, we need to import the new Material components dependency and set the MaterialComponent theme in our activity.

Copy<br /> Code 


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

An input text field by default has a filled background to attract the user’s attention. A simple text field can be created as follows:

Copy<br /> Code 


    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="12dp"
        android:hint="Filled Field (Default)">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </com.google.android.material.textfield.TextInputLayout>

Standard and Dense Text Fields

Text fields can have two height variants: standard and dense. The dense text field is slightly shorter in height.

Copy<br /> Code 


    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="12dp"
        android:hint="Filled Field (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="Filled Field (Dense)"
        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>

Outlined Text Fields

To achieve the outlined look for text fields, apply the following style to the TextInputLayout:

Copy<br /> Code 


    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

Similar to filled fields, there are two height variants here: standard and dense.

End Icon Modes

End icons are symbols that can be placed to the right of the text field. Three types of built-in icons are available: password_toggle, clear_text, and custom.

Copy<br /> Code 


    <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="Enter Password"
        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>

Shaped Text Fields

With ShapeAppearance, we can customize the shape of the text field. There are two built-in shapes: ‘cut’ and ’round’.

Copy<br /> Code 


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

Conclusion

The Material Design Components Library offers a variety of options for customizing text fields in Android apps. From filled and outlined fields to custom end icons and shaped text fields, developers have numerous options to design an appealing user interface.

Create a Free Account

Register now and gain exclusive access to advanced resources, personalized support, and a community of experts.

try now

Recent posts

Maximize Network Performance in Android with Retrofit and RxJava

Effective Handling of Permissions in Android: A Practical Guide

Modernizing List Views: A Guide to Android RecyclerView and CardView

Effective Deletion: Implementing Swipe to Delete in Android RecyclerView

Start Your Free Trial Today and Transform Your Android App Development!

Unlock the full potential of Material Design in your Android apps with our cloud-based development platform. Our comprehensive suite of tools and resources makes it easier than ever to integrate advanced text field components, enhance your user interface, and streamline your design process. Start your free trial today and see how our solutions can elevate your app development experience to the next level!

Try for free!

You might be interested in:

https://www.centron.de/en/glossary/server-2/
https://www.centron.de/en/glossary/query-2/