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>

Thankful. I am also very happy to meet you @MohammadMoeinGolchin — abolfazl bazghandi, Mar 28 '20 at 09:02
No, they are from my distant relatives,(Miss brother, my cousin :) ) @MohammadMoeinGolchin — abolfazl bazghandi, Mar 28 '20 at 09:08
I don't understand what is your problem here. You can't show "username"? — MMG, Mar 28 '20 at 09:17
Take a look at the picture, if you look at the username background , it has a problem with the color of the back and something must be transparent on the back @MohammadMoeinGolchin — abolfazl bazghandi, Mar 28 '20 at 09:23
This question doesn't help you? https://stackoverflow.com/questions/52401242/ — MMG, Mar 28 '20 at 10:16
Does this answer your question? [Outlined Edit Text from Material Design](https://stackoverflow.com/questions/52401242/outlined-edit-text-from-material-design) — MMG, Mar 28 '20 at 10:16

score 1 · Answer 1 · answered Mar 29 '20 at 03:55

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

Thank you very much but it does make the animation go away if you use MaterialComponents.TextInputLayout.OutlinedBox you will notice its animation (as well as many other things such as its icons). I want to use MaterialComponents.TextInputLayout.OutlinedBox. — abolfazl bazghandi, Mar 29 '20 at 04:42
Hi @abolfazl bazghandi, your welcome, I give another answer with style — MMG, Mar 29 '20 at 05:08

MMG · Answer 2 · 2020-03-30T03:18:49.393

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:

edited Mar 30 '20 at 03:18

answered Mar 29 '20 at 05:13

MMG

3,226
5
16
43

Thank you very much I had tried this way before. The problem is that it has to be the same color as the one inside the TextInputLayout.This is not the solution. It looks like a bug for com.google.android.material.textfield.TextInputLayout – abolfazl bazghandi Mar 29 '20 at 06:42
It's possible I think. You can define a layer for textinputlayer which is wrap-content. Then you can set background for it. As you said maybe this component has bug.@abolfazl bazghandi – MMG Mar 29 '20 at 06:48
Thank you very much for your follow up. Definitely a bug. If I try this the way you say, the margin will be fine and not beautiful. – abolfazl bazghandi Mar 29 '20 at 07:24
You mean its boarder? You can't set boarder for its layout?@abolfazlbazghandi – MMG Mar 29 '20 at 07:30
Yes border,That's not good.I don't think it will, check the rocket chat :) – abolfazl bazghandi Mar 29 '20 at 07:49
rocket chat :) :) :) :) :) :) :) – MMG Mar 29 '20 at 07:58
I edited my answer, it's nearer to what you want.@abolfazlbazghandi – MMG Mar 29 '20 at 09:37
That's not the solution I'm looking for. So you applied a layer to the background. This does not make TextInputLayout look like its original material. Thank you very much for following. – abolfazl bazghandi Apr 02 '20 at 04:57
We can't change attributes of a style which are defined and are unchangable. You can use another style which is nearer to what you want. If you want to use this style, my solution is a trick. I didn't give layer to the background. In drawables I made a shape and set it to background of textview. You can change color of background and color of text. In this solution your style is used, too. @abolfazl bazghandi – MMG Apr 04 '20 at 03:06
Your opinion is correct, but I think it is a bug and it will be fixed!:) – abolfazl bazghandi Apr 04 '20 at 07:59
Until it isn't fixed, my answer may be correct answer of your question!@abolfazlbazghandi – MMG Apr 04 '20 at 08:01
I don't think that's the answer I'm looking for.please respect the opinions of others:) – abolfazl bazghandi Apr 04 '20 at 08:16

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

2 Answers2

Linked