How to make Material design EditText in android

Google update android design comes material design.

A material design is a UI widget. You can apply material design in apps and make advance looking.

Material design is standard styling UI design. Using material components we’ll make our app a beautiful UI design.

What feature of material design?

You can style new modern design themes on your apps easily. Using the materials widget, you can apply the floating action button. Show and hide app navigation drawer. You can make material design collapsing toolbars, tabs, a button nav bar, EditText, hamburger and more.

Also, you can apply beautiful animation using material design.

What is included in this tutorial?

In this tutorial, we’ll use material design edit text and floating action button. We’ll make a simple material design app.

Simply will use two material design edit text and a floating action button.

Which library support material design?

Since the new android update, you don’t need to add dependency as already added.

Download the latest android studio.

How to download android studio.

Or update android studio

Help – > Check for update…

You can add As follows dependencies.

Implementaion’com.google.android.materail:material:<version>’

Also, you can change the theme using material design

The below image uses the following component.

Material design EditText and FloatingActionButton
<style name="Theme.MaterialDesign"parent="Theme.MaterialComponents.DayNight.DarkActionBar">

No action bar theme in material design

<style name="Theme.MaterialDesign" parent="Theme.MaterialComponents.NoActionBar">
material design android change theme

A light theme in material design

<style name="Theme.MaterialDesign" parent="Theme.MaterialComponents.Light">
Material design android

For hide action bar use

    <style name="Theme.MaterialDesign" parent="Theme.MaterialComponents.Light.NoActionBar">

And more theme design provides by material design.

How to make a material design layout in the xml file?

Now, we’ll make the material design layout in the XML file.

In the XML file we’ll make two material design edit text with floating action buttons.

Below material design edit text design.

 <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_margin="10dp"
        android:hint="Full Name"
        app:endIconMode="clear_text">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="text" />
    </com.google.android.material.textfield.TextInputLayout>

In the above example, we have use the “full name” material design edit text box.

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

this is used when we click on the button hint text to go outline box.

app:endIconMode="clear_text"

when type text in edit text, you can directly clear text by clicking on the cross sign.

Material design EditText

Let’s see the second edit text box.

<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_margin="10dp"
        android:hint="password"
        app:endIconMode="password_toggle">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="text" />
    </com.google.android.material.textfield.TextInputLayout>

app:endIconMode="password_toggle">

The toggle icon is used to hide and show password.

Material design second EditText

In the last, use the material design floating action button.

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_baseline_check_24"
        app:backgroundTint="@color/white" />

android:src="@drawable/ic_baseline_check_24"

for use drawable icon.

Now let’s run a program

See the output as shown below the image.

Materials design in android

Watch on YouTube.

Leave a Reply