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 changes but it didn't work. In the layout itself I tried to apply the changes again! How to fix this problem?

NOTE

background of label username in picture that not transparent and it covers some of the TextInputEditText

in build.gradle

implementation 'com.google.android.material:material:1.1.0'

in style

 <!-- Base application theme. -->
    <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>
        <item name="textAppearanceSubtitle1">@style/TextAppearance.App.Subtitle1</item>
        <item name="textAppearanceCaption">@style/TextAppearance.App.Caption</item>
        <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.App.SmallComponent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar"/>

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light"/>


    <style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
        <item name="colorControlActivated">@color/white</item>
        <item name="android:colorControlActivated">@color/white</item>
    </style>

    <style name="TextAppearance.App.Caption" parent="TextAppearance.MaterialComponents.Caption">
        <item name="android:textColorTertiary">@color/white</item>
        <item name="android:textColorTertiaryInverse">@color/white</item>
        <item name="colorControlActivated">@color/white</item>
        <item name="android:colorControlActivated">@color/white</item>
    </style>

    <style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">16dp</item>
        <item name="colorControlActivated">@color/white</item>
        <item name="android:colorControlActivated">@color/white</item>
    </style>

in layout

<?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:background="@color/gray"
  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:layout_marginBottom="16dp"
    android:hint="@string/label_username"
    android:textColorHint="#AEB0C6"
    app:boxBackgroundColor="#33385E"
    app:boxStrokeColor="@color/red"
    app:endIconDrawable="@drawable/ic_clear_white_24dp"
    app:endIconMode="password_toggle"
    app:endIconTint="#AEB0C6"
    app:hintTextColor="#AEB0C6"
    app:startIconDrawable="@drawable/ic_info_outline_white_24dp"
    app:startIconTint="#AEB0C6">

    <com.google.android.material.textfield.TextInputEditText
      android:id="@+id/edtUsername"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:inputType="textPersonName"
      android:textColor="@color/white"
      android:textColorHint="@color/white"
      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:fontFamily="@font/iran_sans_mobile"
    android:text="login"
    android:visibility="visible"
    app:cornerRadius="@dimen/radiusButton" />
</LinearLayout>

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: