Implementing the Material Design Outlined EditText
Step 6: Working with the activity_main.xml file
- Invoke the following code to implement the filled edit text.
- Only difference is the style attribute in the “com.google.android.material.textfield.TextInputLayout” to be invoked.
- 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 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> |
Following output UI is produced:
Step 7: Same as Step 5
Refer to Step 5
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.
Contact Us