Skip to content Skip to sidebar Skip to footer
Home / Android / Android Layout / Android Textinputlayout / Material Components Android / Material Design

Textinputlayout Box Color

Post a Comment
Using the following xml element I can properly color the TextInputLayout box white but that's only after clicking it. The initial color is still default.

Solution 1:

create Selector inside res/color/text_input_box_stroke.xml put something like the following:

<selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:color="#fcc"android:state_focused="true"/><itemandroid:color="#cfc"android:state_hovered="true"/><itemandroid:color="#ccf"/></selector>

Then in your styles.xml put:

<stylename="TextInputLayoutStyle"parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"><itemname="boxStrokeColor">@color/text_input_box_stroke</item><itemname="boxStrokeWidth">2dp</item></style>

Finally, use that style in your TextInputLayout

<com.google.android.material.textfield.TextInputLayout
    style="@style/TextInputLayoutStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextColor="@color/colorWhite"
    app:boxStrokeColor="@color/colorWhite"
    app:boxBackgroundColor="@color/colorPrimaryLight">
    ........
</com.google.android.material.textfield.TextInputLayout>

Add text_input_box_color in your color.xml

<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color>

for more detail check here

Solution 2:

To change the color in the TextInputLayout just use something like:

<stylename="OutlinedBoxColor"parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox"><!-- border color in OutlinedBox
    <item name="boxStrokeColor">@color/text_input_layout_stroke_color</item>

    <!-- The color of the label when it is collapsed and the text field is active --><itemname="hintTextColor">@color/singleColor</item><!-- The color of the label in all other text field states (such as resting and disabled) --><itemname="android:textColorHint">@color/.....</item></style>

The result when the TextInputLayout is focused and not focused enter image description hereenter image description here

You should use a color selector for these colors:

For boxStrokeColor

<selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:color="?attr/colorPrimary"android:state_focused="true"/><itemandroid:alpha="0.87"android:color="?attr/colorOnSurface"android:state_hovered="true"/><itemandroid:alpha="0.12"android:color="?attr/colorOnSurface"android:state_enabled="false"/><itemandroid:alpha="0.38"android:color="?attr/colorOnSurface"/></selector>

For the android:textColorHint

<selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:alpha="0.38"android:color="?attr/colorOnSurface"android:state_enabled="false"/><itemandroid:alpha="0.6"android:color="?attr/colorOnSurface"/></selector>

You may like these posts

Post a Comment for "Textinputlayout Box Color"