Search code examples
androidmaterial-designmaterial-components-androidoutline

boxStroke with Material Outline Box doesn´t work


I´m trying to design a very simple UI for Android using Material Design.

The idea of the login interface is 2 outlined boxes, one for email and one for password. The password box should contain a trailing icon, and if you press that icon it should reveal your password. There is no code problems here, everything it´s supposed to be implemented by Material.io

So the problem I´m facing is about the boxStroke.

When you run the app, you can see clearly the boxStroke (But on the password textBox the trailing icon made dissapear the outline).

![notFocused]

Once you focus one of the textBoxes it appears like this:

Focused

And you can notice that the outline of the box has totally dissapeared. And it will come back if you add at least one character:

notEmptyBox

The code for both textBoxes is here, is nearly the same as in the main page of Material.io, I will post at the end of this post the links for the material wiki:

The E-Mail textBox:

    <com.google.android.material.textfield.TextInputLayout
    android:id="@+id/login_email_layout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="@string/login_hint_email"
    app:boxStrokeWidthFocused="3dp"
    app:errorEnabled="true"
    app:layout_constraintBottom_toTopOf="@+id/login_password_layout"
    app:layout_constraintEnd_toEndOf="@+id/imageView"
    app:layout_constraintStart_toStartOf="@+id/imageView"
    app:layout_constraintTop_toBottomOf="@+id/imageView"
    app:shapeAppearanceOverlay="@style/ShapeAppearance.MaterialComponents.SmallComponent">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/textColor" />

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

The Password textBox:

    <com.google.android.material.textfield.TextInputLayout
    android:id="@+id/login_password_layout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="@string/login_hint_password"
    app:endIconMode="password_toggle"
    app:errorEnabled="true"
    app:layout_constraintBottom_toTopOf="@+id/login_forgot_password"
    app:layout_constraintEnd_toEndOf="@+id/login_email_layout"
    app:layout_constraintStart_toStartOf="@+id/login_email_layout"
    app:layout_constraintTop_toBottomOf="@+id/login_email_layout">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:textColor="@color/textColor"
        android:visibility="visible" />

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

I don't know why the trailing icon is making disappearing the outline neither how can I make that even when empty it should focus the outline. So any help is welcome.

Thanks in advance.

PD: Currently using 1.2.1 material version, tried to switch to 1.3.1-alpha03 version but it will not display anything of the textBox.

Material Outlined Box

EDIT: Adding graddle:app in case it could give you more info:

dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.2'
implementation platform('com.google.firebase:firebase-bom:25.12.0')
implementation 'com.google.firebase:firebase-analytics'
implementation 'com.google.android.material:material:1.2.1'
implementation 'com.google.gms:google-services:4.3.4'
implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.19'
implementation 'com.google.android.gms:play-services-auth:18.1.0'
implementation "androidx.navigation:navigation-fragment:2.3.1"
implementation "androidx.navigation:navigation-ui:2.3.1"
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
}

Solution

  • just found the answer:

    After a few days I came back to this problem (This was only an aesthetic problem, so I continued programming other things, like the holy Firebase thing).

    So the problem was that on

    styles.xml
    I had @color/background declared and initialized. And the Material Design API for textEdit was using this color for the outline.

    So the solution was to simply remove @color/background. I could have set on the xml file android:background=@null, but have had to do it on every single xml file that used textEdit.

    Hope this could help someone and sorry for being so dumb.