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).
Once you focus one of the textBoxes it appears like this:
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:
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.
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'
}
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.xmlI 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.