Android Tutorial

Software Setup and Configuration

Android Studio

File Structure

Components

Core Topics

Layout

View

Button

Intent and Intent Filters

Toast

RecyclerView

Fragments

Adapters

Other UI Component

Image Loading Libraries

Date and Time

Material Design

Bars

Working with Google Maps

Chart

Animation

Database

Advance Android

Jetpack

Architecture

App Publish

App Monetization

Key Properties of Material Design EditText in Android

EditText in Android allows users to enter and modify text. When it comes to Material Design, which is a design language introduced by Google, there are several properties and attributes that you can utilize to make your EditText look and behave according to Material guidelines. Here's a rundown of the key properties you can apply to EditText for a Material Design look and feel:

1. Material Components:

First, to utilize Material Design properties fully, you should be using TextInputEditText inside a TextInputLayout. This is provided by the Material Components library.

To include Material Components in your project, add this dependency in build.gradle:

implementation 'com.google.android.material:material:1.4.0' // Check for the latest version

2. Outlined Box and Filled Box:

Material Design EditText offers two primary styles:

  • OutlinedBox: This style provides an outline to the EditText.

    <com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    ...>
    <com.google.android.material.textfield.TextInputEditText
        ...
    />
</com.google.android.material.textfield.TextInputLayout>

  • FilledBox: This style provides a filled background.

    <com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
    ...>
    <com.google.android.material.textfield.TextInputEditText
        ...
    />
</com.google.android.material.textfield.TextInputLayout>

3. Hint & Label:

In Material Design, the hint serves a dual role: when there's no text, it acts as a hint, and when there's text, it acts as a floating label.

<com.google.android.material.textfield.TextInputLayout
    android:hint="Your Hint Here"
    ...>
    <com.google.android.material.textfield.TextInputEditText
        ...
    />
</com.google.android.material.textfield.TextInputLayout>

4. Helper Text & Error Text:

  • Helper Text: Provides additional hints about the input.

    app:helperText="Helper text appears here"

  • Error Text: Can be set programmatically to show error messages.

    textInputLayout.error = "Error message here"

5. End Icons and Start Icons:

You can have icons inside the EditText for various purposes:

  • Password Toggle: Shows/hides password text.

    app:endIconMode="password_toggle"

  • Clear Text: Clears the entered text.

    app:endIconMode="clear_text"

  • Custom Icons: You can use app:endIconDrawable and app:startIconDrawable to set custom icons.

6. Counter:

You can show a character count and even set a max character limit.

app:counterEnabled="true"
app:counterMaxLength="20"

7. Box Background & Stroke:

Customize the background color, stroke width, and stroke color:

app:boxBackgroundColor="@color/yourColor"
app:boxStrokeWidth="2dp"
app:boxStrokeColor="@color/yourStrokeColor"

8. Custom Typeface & Text Color:

You can set custom fonts and colors just like a regular EditText.

android:fontFamily="@font/your_custom_font"
android:textColor="@color/your_text_color"

Conclusion:

These are some of the key properties you can use to stylize your EditText according to Material Design guidelines. The Material Components library is extensive, and there are many more attributes and properties available.

  1. Customizing Material Design EditText appearance:

    Customize the appearance of Material Design EditText using XML attributes or programmatically. For example, set the background color and text color:

    <com.google.android.material.textfield.TextInputEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:backgroundTint="@color/material_blue"
    android:textColor="@color/white" />

  2. Material Design TextInputLayout attributes and styling:

    TextInputLayout is a container for Material Design EditText. Customize it with attributes like hintEnabled, counterEnabled, and styles:

    <com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">

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

  3. Android Material Design EditText floating label:

    The floating label is a distinctive feature of Material Design EditText. Enable it by using hint in both TextInputLayout and TextInputEditText:

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

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

  4. Working with Material Design styles for EditText:

    Apply Material Design styles to EditText by using predefined styles. For example, use the outlined box style:

    <com.google.android.material.textfield.TextInputEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" />

  5. Material Design EditText box background and elevation:

    Customize the box background and elevation for Material Design EditText:

    <com.google.android.material.textfield.TextInputEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_background"
    android:elevation="2dp" />

    Define custom_background.xml in the res/drawable folder for a custom box background.

  6. Customizing hint and error text in Material Design EditText:

    Customize hint and error text appearance in Material Design EditText:

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

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter text"
        android:textColorHint="@color/hint_color"
        android:errorTextAppearance="@style/ErrorTextAppearance" />
</com.google.android.material.textfield.TextInputLayout>

    Define ErrorTextAppearance in res/values/styles.xml for customizing error text appearance.

  7. Android Material Design EditText focused and unfocused states:

    Customize the appearance of Material Design EditText for focused and unfocused states using styles and XML attributes:

    <com.google.android.material.textfield.TextInputEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:backgroundTint="@color/unfocused_color"
    android:textColorHint="@color/unfocused_hint_color"
    android:hint="Enter text" />

    Adjust backgroundTint and textColorHint to differentiate between focused and unfocused states.

Copyright © devanddep.com | All Rights Reserved