Material Design EditText en Android con ejemplo

EditText es uno de los elementos importantes de la interfaz de usuario. Edittext se refiere al widget que muestra un campo de texto vacío en el que un usuario puede ingresar el texto requerido y este texto se usa más dentro de la aplicación. En este artículo se ha discutido la implementación del tipo especial de campos de texto, llamados Material Design EditText . Eche un vistazo al texto de edición normal en Android y los campos de texto de diseño de materiales en Android. El diseño y la implementación fácil de usar los hace diferentes de los campos EditText normales.

Implementación paso a paso

En este ejemplo, vamos a demostrar dos tipos importantes de EditText de Material Design:

1. Texto de edición relleno
2. Texto de edición contorneado

Paso 1: Crear un nuevo proyecto

• Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio .
• Seleccione Java o Kotlin como lenguaje de programación.

Paso 2: Invoque la dependencia al archivo gradle de nivel de aplicación

• Invoque la dependencia de Material Design al archivo gradle de nivel de aplicación como:

implementación ‘com.google.android.material:material:1.3.0-alpha03’ 

• Obtenga el archivo gradle de nivel de aplicación yendo a aplicación > archivo build.gradle. Y haga clic en el botón » Sincronizar ahora «. Y asegúrese de que el sistema debe estar conectado a la red.
• Consulte la siguiente imagen para ubicar e invocar el archivo Gradle de nivel en la aplicación de dependencia (en la vista de jerarquía del proyecto).

Paso 3: cambia el tema base de la aplicación

• Necesitamos cambiar el tema base de la aplicación porque estamos usando los componentes de diseño de materiales. De lo contrario, la aplicación falla inmediatamente después de iniciarse.
• Para cambiar el tema base de la aplicación, abra aplicación > src > principal > res > valores > estilos.xml. 

<resources>
 
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
 
</resources>

• Consulte la siguiente imagen para ubicar el archivo styles.xml  y cambiar el tema base de la aplicación.

Implementando el EditText relleno de Material Design

Paso 4: trabajar con el archivo activity_main.xml

• Invoque el siguiente código para implementar el EditText relleno.
• A continuación se muestra el código para el  archivo activity_main.xml .
• Se agregan comentarios dentro del código para comprender el código con más detalle.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
 
    <!--this is the filled layout box for the edit text-->
    <!--this layout must be used to reposition or change
        the height and width of the edit text-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/filledTextField"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="64dp"
        android:layout_marginEnd="32dp"
        android:hint="Enter something">
 
        <!--this is the actual edit text which takes the input-->
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/edit_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
 
    </com.google.android.material.textfield.TextInputLayout>
 
    <!--sample button to submit entered data
        inside from edit text-->
    <Button
        android:id="@+id/submit_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="32dp"
        android:text="Submit" />
 
    <!--text view which previews the entered data by user-->
    <TextView
        android:id="@+id/text_preview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:text="You Entered : "
        android:textSize="18sp" />
 
</LinearLayout>

• En el código anterior, » com.google.android.material.textfield.TextInputLayout»  hace que el cuadro lleno para el campo EditText.
• Y » com.google.android.material.textfield.TextInputEditText» , que es el texto de edición real que toma la entrada del usuario y debe usarse para manejar todas las entradas en el archivo MainActivity .

La interfaz de usuario de salida se produce como: 

Paso 5: Trabajar con el archivo MainActivity 

• Ahora invoque el siguiente código java para manejar el diseño de material EditText.
• A continuación se muestra el código para el  archivo MainActivity .
• Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity {
 
    // UI widgets to handle
    Button bSubmit;
    EditText mEditText;
    TextView tvTextPreview;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // Register the UI widgets
          // with their appropriate IDs.
        bSubmit = findViewById(R.id.submit_button);
        mEditText = findViewById(R.id.edit_text);
        tvTextPreview = findViewById(R.id.text_preview);
 
        // handle submit button to preview the entered data
        bSubmit.setOnClickListener(new View.OnClickListener() {
            @SuppressLint("SetTextI18n")
            @Override
            public void onClick(View v) {
                // set the entered data to text preview
                tvTextPreview.setText("You Entered : " + mEditText.getText().toString());
            }
        });
    }
}

import android.annotation.SuppressLint
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
 
class MainActivity : AppCompatActivity() {
 
    @SuppressLint("SetTextI18n")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // Register the UI widgets with their appropriate IDs.
        val bSubmit = findViewById<Button>(R.id.submit_button)
        val mEditText = findViewById<EditText>(R.id.edit_text)
        val tvTextPreview = findViewById<TextView>(R.id.text_preview)
 
        // handle submit button to
          // preview the entered data
        bSubmit.setOnClickListener {
            tvTextPreview.text = "You Entered : " + mEditText.text.toString()
        }
    }
}

Salida: ejecutar en el emulador

Implementación del diseño de material delineado EditText

Paso 6: trabajar con el archivo activity_main.xml

• Invoque el código siguiente para implementar el texto de edición rellenado.
• La única diferencia es el atributo de estilo en «com.google.android.material.textfield.TextInputLayout» que se invocará.
• Se agregan comentarios dentro del código para comprender el código con más detalle.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
 
    <!--this is the outlined layout box for the edit text-->
    <!--this layout must be used to reposition or change the
        height and width of the edit text-->
    <!--to get the outlined edit text the style attribute as
        following must be invoked-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/filledTextField"
 
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="64dp"
        android:layout_marginEnd="32dp"
        android:hint="Enter something">
 
        <!--this is the actual edit text which takes the input-->
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/edit_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
 
    </com.google.android.material.textfield.TextInputLayout>
 
    <!--sample button to submit entered data inside from edit text-->
    <Button
        android:id="@+id/submit_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="32dp"
        android:text="Submit" />
 
    <!--text view which previews the entered data by user-->
    <TextView
        android:id="@+id/text_preview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:text="You Entered : "
        android:textSize="18sp" />
 
</LinearLayout>

Se produce la siguiente interfaz de usuario de salida:

Paso 7: Igual que el Paso 5

Consulte el Paso 5

Salida: ejecutar en el emulador