CODEWITHSUNDEEP
androidandroid-xmlandroid-textinputlayoutmaterial-components-androidmaterial-components
Afdal
Afdal

Reputation: 655

how to change border and color in TextInputLayout unfocus?

How to change border and color in TextInputLayout unfocus?

<com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_height="wrap_content"
        app:boxStrokeWidth="4dp"
        app:boxStrokeColor="@color/colorPrimary"
        app:layout_constraintTop_toBottomOf="@id/a">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:hint="@string/app_name"
            android:textColorHint="@color/colorPrimary"
            android:layout_height="wrap_content"/>
    </com.google.android.material.textfield.TextInputLayout>

I try :

app:boxStrokeWidth="4dp"
app:boxStrokeColor="@color/colorPrimary"

but, not work in unfocus

Upvotes: 5

Views: 9506

Answers (2)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364005

If you want to have different stroke width in focused/unfocused mode you can use the boxStrokeWidth and the boxStrokeWidthFocused attributes.

<!-- The value to use for the box's stroke when in outline box mode, 
     or for the underline stroke in filled mode. -->
<attr format="dimension" name="boxStrokeWidth"/>
<!-- The value to use for the focused box's stroke when in outline box mode,
     or for the focused underline stroke in filled mode.. -->
<attr format="dimension" name="boxStrokeWidthFocused"/>

Something like:

    <com.google.android.material.textfield.TextInputLayout
        app:boxStrokeWidthFocused="4dp"
        app:boxStrokeWidth="1dp"
        app:boxStrokeColor="@color/text_input_layout_stroke_color"
        ..>

For the stroke color you can define a selector like:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="@color/..." android:state_focused="true"/>
  <item android:alpha="0.87" android:color="@color/..." android:state_hovered="true"/>
  <item android:color="@color/.." android:state_enabled="false"/>
  <item android:color="@color/..."/> <!--unfocused-->
</selector>

enter image description hereenter image description here

Note: the boxStrokeWidthFocused requires at least the version 1.2.0-alpha04.

Upvotes: 14

Janith Malshan
Janith Malshan

Reputation: 214

Changing the border; Use drawable selector for TextInputLayout 's background

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorRipple">
    <item
        android:state_enabled="true"
        android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <stroke android:color="#aA0000" android:width="1dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#dddddd" />
            <stroke android:color="#ff00ff" android:width="1dp"/>
        </shape>
    </item>
</selector>

Changing the text color; Use drawable selector for TextInputEditText 's textcolor

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#333333" android:state_selected="true" />
    <item android:color="#333333" android:state_focused="true" />
    <item android:color="#009900" /> <!-- default case -->
</selector>

Upvotes: 1

Related Questions