Outlined Edit Text from Material Design
Read Outline Box
.
Outline text fields have a stroked border and are less emphasized. Touse an outline text field, apply the following style to yourTextInputLayout:
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>
FYI
Legacy support ended in Android 28 . Now onward use
implementation 'com.google.android.material:material:1.3.0'
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
With the migration to androidx libraries you have to use the new Material Components for android library.
Use the TextInputLayout
component:
<com.google.android.material.textfield.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/hint_text"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content"/></com.google.android.material.textfield.TextInputLayout>
And apply this style:
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Requirements:
you have to add this dependencies in your
build.gradle
fileimplementation 'com.google.android.material:material:<version>'
apply a Material Components theme
<style name="Theme.MyApp" parent="Theme.MaterialComponents">