Outlined Edit Text from Material Design

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:

1. Make sure that your AppTheme is a child of
   Theme.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>

2. 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