MaterialComponents.TextInputLayout.OutlinedBox it doesn't work properly boxBackgroundColor

Question

I use material. I\'m going to use a color for TextInputLayout for the backdrop, but something like the one below! hint background not change.i used style and wanted to make

Answer 1

If you don't like to use custom edit text, you can modify your code this way:

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="32dp">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/linUsername"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="username"
        android:textColorHint="#ED0A0A"
        app:boxBackgroundColor="#1A33385E"
        app:endIconMode="password_toggle"
        app:endIconTint="#AEB0C6">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/edtUsername"
            android:background="@drawable/boarder"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:textColor="#fff"
            android:text="User"
            android:textColorHint="#fff"
            app:hintTextColor="#AEB0C6" />

    </com.google.android.material.textfield.TextInputLayout>


    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnSelectText"
        android:layout_width="168dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="login"
        android:visibility="visible"
        app:cornerRadius="10dp" />
</LinearLayout>

And in boarder.xml

   <?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#8033385E"/>
    <corners android:radius="12dp" />
</shape>

Output will be:

Answer 2

You may use custom edit text with border, so you can easily set your desired background. For example try this code: activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="32dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="60dp">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="15dp"
            android:background="@drawable/boarder"
            android:paddingLeft="5dp"
            android:text="input"
            app:endIconMode="password_toggle"
            app:endIconTint="#EF0707" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="7dp"
            android:background="#fff"
            android:text="Label" />
    </RelativeLayout>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnSelectText"
        android:layout_width="168dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="login"
        android:visibility="visible"
        app:cornerRadius="10dp" />
</LinearLayout>

boarder.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke
        android:width="2dp"
        android:color="#03A6F0" />

    <corners android:radius="12dp" />
</shape>

Also see here: Custom edit text with borders