Outlined Edit Text from Material Design

Question

How to implement an Outlined text fields presented in Material Design page

Link

Answer 1

Read Outline Box .

Outline text fields have a stroked border and are less emphasized. To use an outline text field, apply the following style to your TextInputLayout:

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

dependencies

implementation 'com.android.support:design:28.0.0-alpha1' 

XML

   <android.support.design.widget.TextInputLayout
   android:id="@+id/name_text_input"
   style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   >

   <android.support.design.widget.TextInputEditText
       android:id="@+id/name_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:hint="@string/label_name" />
</android.support.design.widget.TextInputLayout>

DEMO

Answer 2

UPDATE

Also working fine with

implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'

Using implementation 'com.android.support:design:28.0.0-alpha1' I'm getting below error

Cannot resolve symbol '@style/Widget.MaterialComponents.TextInputLayout.OutlineBox'

Solution

Make below changes in your Build.Gradle

Use compileSdkVersion 28

Use targetSdkVersion 28

Use Below dependencies

implementation 'com.android.support:appcompat-v7:28.0.0-alpha3'
implementation 'com.android.support:design:28.0.0-alpha3'

Sample code

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.dangarmahesh.demoapp.MainActivity">

    <ImageView
        android:layout_width="250dp"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher"
        android:layout_height="250dp" />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/userIDTextInputLayout"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"

        android:layout_margin="10dp"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/userIDTextInputEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="User ID" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/passwordTextInputLayout"
        android:layout_margin="10dp"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/passwordTextInputEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password" />

    </android.support.design.widget.TextInputLayout>


    <Button
        android:layout_width="match_parent"
        android:layout_margin="10dp"
        android:text="LOGIN"
        android:textStyle="bold"
        android:background="@color/colorPrimary"
        android:textColor="@android:color/white"
        android:layout_height="wrap_content" />
</LinearLayout>

OUTOUT

Answer 3

You need to add this dependency to your "module level" build.gradle com.google.android.material to use latest material UI components.

Use this style in your com.google.android.material.textfield.TextInputLayout then,

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

Checkout from here

---

If you're using com.android.support:design library then you should change your app style to Theme.MaterialComponents...Bridge (I.e. like change style from Theme.AppCompat.Light to Theme.MaterialComponents.Light.Bridge)

first,

Next, you should have to use this style in your android.support.design.widget.TextInputLayout:

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