Outlined Edit Text from Material Design
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
FYI
Legacy support ended in Android 28 . Now onward use
implementation 'com.google.android.material:material:1.3.0'
Outlined Text Field for TextInputLayout
You need to check a couple of things:
- Make sure that your
AppTheme
is a child ofTheme.MaterialComponents
(or a descendant).
So, your style.xml should be something like
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents">
<!-- rest of your style items-->
</style>
</resources>
- You add the material components library in module gradle file
implementation 'com.google.android.material:material:1.2.0'
Outlined Edit Text stroke color
You can define a style:
<style name="AppTheme.TextInputLayout.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">@color/text_input_layout_outlined_box_stroke</item>
<item name="hintTextColor">@color/text_input_layout_outlined_box_stroke</item>
</style>
and apply it to a view with:
<com.google.android.material.textfield.TextInputLayout
style="@style/AppTheme.TextInputLayout.OutlinedBox"
..>
At the same time you can define:
<style name="textInputPrimaryColor" parent="">
<item name="colorPrimary">@color/.....</item>
</style>
and then use it with the android:theme
attribute:
<com.google.android.material.textfield.TextInputLayout
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:theme="@style/textInputPrimaryColor"
..>
In this way you can modify the theme attributes for that view and any child views, which is useful for overriding theme color palettes in a specific portion of your interface.
More info here.
In this way you are overriding the colorPrimary
attribute in the style Widget.MaterialComponents.TextInputLayout.OutlinedBox
.
For example it is the default selector used by the boxStrokeColor
.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_focused="true"/>
<item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>
Using the android:theme="@style/textInputPrimaryColor"
you can are changing the colorPrimary
for this view without extending the style.
You can achieve the same behavior using the materialThemeOverlay
attribute in your style:
<style name="My.OutlinedBox" parent="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="materialThemeOverlay">@style/ThemeOverlay.My.OutlinedBox</item>
</style>
with:
<style name="ThemeOverlay.My.OutlinedBox" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="colorPrimary">@color/......</item>
</style>
and then apply it to your view:
<com.google.android.material.textfield.TextInputLayout
style="@style/My.OutlinedBox"
..>
I want all my items with style OutlinedBox to have the box green colored"? I'd like to avoid repeating theme and style for every view...I mean a "global" style that inherit from AppTheme, which is already applied to the whole application in the manifest
Currently there isn't an attribute to define a style only for the TextInputLayout
with an OutlinedBox style.
You can only assign a global style for all TextInputLayout
views in your app using the textInputStyle
attribute in your app theme:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
...
<item name="textInputStyle">@style/My.OutlinedBox</item>
</style>
Note: it requires the version 1.1.0
of the Material Components Library.
How to add a proper Outlined Edit Text in my application?
Just change the parent of AppTheme as below.
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
How to turn off default features of material design EditText in android?
Remove:
android:background="@drawable/edit_text_background"
Update:
android:drawableStart="@drawable/ic_baseline_security_24"
app:passwordToggleEnabled="true"
to:
app:startIconDrawable="@drawable/ic_baseline_security_24"
app:endIconMode="password_toggle"
and use the standard features of the TextInputLayout to achieve the same layout:
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/editTextTextPersonName2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerCircle"
app:boxStrokeColor="@color/...."
app:startIconDrawable="@drawable/..."
app:endIconMode="password_toggle"
app:placeholderText="Parol"
>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="20sp"
android:inputType="textPassword"
/>
</com.google.android.material.textfield.TextInputLayout>
with:
<style name="ShapeAppearanceOverlay.App.CornerCircle" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
Change the TextInputLayout outline color
Use this style to apply border color and border width like this :
<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#fff</item>
<item name="boxStrokeWidth">2dp</item>
</style>
get Additional details about styling from this link
Add below line in your colors.xml
file that overrides default color for TextInputLayout
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color>
Related Topics
Android Edittext Delete(Backspace) Key Event
How to Set Navigation Drawer to Be Opened from Right to Left
Check Android Application Is in Foreground or Not
Open Application After Clicking on Notification
How to Sign an Android APK File
Android - Listview Get Item View by Position
What Does "Program Type Already Present" Mean
Lollipop:Draw Behind Statusbar with Its Color Set to Transparent
Updating Google Play Services in Emulator
Failed to Resolve: Com.Google.Firebase:Firebase-Core:11.2.0
Android Fragments and Animation
Android - Camera Preview Is Sideways
How to Add New Contacts in Android
Android: Storing Username and Password
How to Make Ellipsize="Marquee" Always Scroll
Android Get Free Size of Internal/External Memory
Eclipse Giving Error, Missing R.Java File After Recent Update
Android: Java.Lang.Securityexception: Permission Denial: Start Intent