Implementing the Material Design Filled EditText

Implementing the Material Design Outlined EditText

Step 4: Working with the activity_main.xml file

Invoke the following code to implement the filled EditText.
Below is the code for the activity_main.xml file.
Comments are added inside the code to understand the code in more detail.

XML

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

In the above code the “com.google.android.material.textfield.TextInputLayout” makes the filled box for the EditText field.
And “com.google.android.material.textfield.TextInputEditText” which is the actual edit text which takes input from the user and this must be used to handle all the inputs in the MainActivity file.

Output UI is produced as:

Step 5: Working with the MainActivity file

Now invoke the following java code to handle the material design EditText.
Below is the code for the MainActivity file.
Comments are added inside the code to understand the code in more detail.

Java

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());
            }
        });
    }
}

Kotlin

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()
        }
    }
}

Output: Run on Emulator

Material Design EditText in Android with Example

EditText is one of the important UI elements. Edittext refers to the widget that displays an empty text field in which a user can enter the required text and this text is further used inside the application. In this article its been discussed to implement the special type of text fields, those are called Material Design EditText. Have a look at the normal edit text in android and Material design Text fields in android. The design and the easy to use implementation makes them different from normal EditText fields.

Tags:

#Android #Java #Java

Step by Step Implementation