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.
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'
}
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.
Related
I'm trying to get run the Extended FAB for my activity, see Screenshot below. It just does not want to run. In my activity xml I use it as follows:
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ads:layout_constraintBottom_toTopOf="#+id/create_ad_view"
ads:layout_constraintEnd_toEndOf="parent"
ads:layout_constraintStart_toStartOf="parent"
ads:layout_constraintTop_toBottomOf="#+id/create_title_et"
app:icon="#drawable/ic_check"
style="#style/Widget.MaterialComponents.ExtendedFloatingActionButton.Icon"/>
By the way, I used different sources and tutorials, even the official web site of Material Design with some details of using Extended FAB. This is my dependency:
implementation 'com.google.android.material:material:1.0.0'
The ExtendedFloatingActionButton was released with the 1.1.0-alpha04.
Use
implementation 'com.google.android.material:material:1.1.0'
Description:
User starts to type a long text and when the cursor "hits" the end of the view, the EditText not scroll horizontally and all the letters typed by user after that is not shown. To see the text typed, user needs to scroll the EditText manually.
In others words, the cursor is not following the end of the text that user types as normal.
Source code:
On XML:
<com.google.android.material.textfield.TextInputLayout android:id="#+id/tilEmail"
android:layout_width="0dp"
android:layout_height="wrap_content">
<EditText android:id="#+id/etEmail"
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
On gradle
api 'androidx.legacy:legacy-support-v4:1.0.0'
api 'androidx.appcompat:appcompat:1.1.0'
api 'androidx.core:core-ktx:1.0.2'
api "com.google.android.material:material:1.0.0"
Android API version: Tested on API 28
Device: Pixel 3
Update
I found out that the problem was partially resolved when I put the attribute android:scrollbars="vertical" on my EditText.
"Partially resolved", because when I use this in a Activity that has android:windowSoftInputMode="adjustPan", the problem keep happening.
Use a TextInputEditText instead of a EditText
<com.google.android.material.textfield.TextInputLayout
...>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
.../>
</com.google.android.material.textfield.TextInputLayout>
Automatically with layout_height="wrap_content" the content uses multiple lines.
Also try the latest version 1.1.0-alpha10.
Using TextInputEditText.
Try android: scrollbars="vertical".
Version api "com.google.android.material: material: 1.0.0"
Hi is there anyone knows how to use the floating action button with andoidx library I think in android x library they replace
implementation 'com.android.support:appcompat-v7:xx.xx.xx'
by
implementation 'androidx.appcompat:appcompat:1.0.0'
but it's not helping any suggetion?
To use Floating action button in andoidx library use below dependencies
implementation 'com.google.android.material:material:1.0.0-rc01'
For more information check Migrating to AndroidX
Complete example
XML code
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/imgFour"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_close"
app:backgroundTint="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tint="#android:color/white" />
Notes
app:tint="#android:color/white" is used to change the icon color of FloatingActionButton
app:backgroundTint="#color/colorAccent" is used to change background color of FloatingActionButton
To use FloatingActionButton inside activity or fragment we need to import FloatingActionButton like this
import com.google.android.material.floatingactionbutton.FloatingActionButton
Now you can migrate to Android x and replace the xml with:
<com.google.android.material.floatingactionbutton.FloatingActionButton ... />
Also in the gradle file add:
implementation 'com.google.android.material:material:1.0.0'
To use Floating action button in androidx library use this implementation
implementation 'com.google.android.material:material:1.0.0'
I can tell that the devices are capable of displaying suggestions, as I can see them in Google apps, like Messaging, Gmail etc., etc.
I can't get them to work in my own fields however, but it does work on our Samsung device (I suspect that Samsung do more than the vanilla keyboard).
Here is an example of one of the fields:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="28dp"
android:layout_marginRight="28dp"
android:layout_marginTop="33dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/edit_text_email_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/email_address"
android:inputType="textEmailAddress|textAutoComplete" />
</android.support.design.widget.TextInputLayout
if I only use textAutoComplete, I can see the bar/boxes where suggestions would appear, but they are empty! And of course, not using textEmailAddress means a less convenient typing experience.
dependencies involved are:
compile 'com.android.support:support-vector-drawable:25.2.0'
compile 'com.android.support:appcompat-v7:25.2.0'
compile 'com.android.support:recyclerview-v7:25.2.0'
compile 'com.android.support:cardview-v7:25.2.0'
compile 'com.android.support:support-v4:25.2.0'
This is a simple thing to do, so I feel like I'm doing something wrong, any ideas? Cheers!
all. In HTML, I can check a checkbox or give focus to an input field by clicking on the associated <label> element.
<label for="pickles">Click to check the box</label>
<input type="checkbox" id="pickles">
I am trying to figure out if there is a similar Android convention, without setting a bunch of onClick listeners. For the purposes of this question, assume that I would like a tap on the TextView to give focus to the following EditText:
<!-- Label -->
<TextView
android:text="#string/email_label"
style="#style/ProfileField.ProfileFieldLabel" />
<!-- Label's target -->
<EditText
android:inputType="textEmailAddress"
style="#style/ProfileField.ProfileFieldInput" />
One thing you are missing is android:hint="Email" on your EditText which may give you all your looking for..
There is not a similar convention to this in Android, unfortunately what your asking is not a standard behavior when it comes to Android. There is something in the design support library which will handle this a little nicer though but it will still just look like and EditText. It is called TextInputLayout and can be added by including design library in gradle
compile 'com.android.support:design:23.0.0'
compile 'com.android.support:appcompat-v7:23.0.0'
example:
<android.support.design.widget.TextInputLayout
android:id="#+id/inputLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/input"
android:hint="Label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>