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!
Related
[Accessibility][Talkback] I make some tests with TalkBack to read input text to make my app more accessible. I find this possible accessibility bug of Edittext.
When I use the component Edittext with "numberPassword" and "maxLength" defined. the TalkBack, read "maximum limit Reached" but in actual maximum limit is not hit.
This bug is reproducible in:
Reproducible on: Google pixel 3(OS v11), Samsung s 10 e(OS v10)
Works fine on: Samsung s8(OS v8), Samsung s 10 (OS v10)
Can anyone help how to resolve this?
recently, I had meet the same problem, after reaching the issuer in the comment and searching the resource. I find the solution.
first of all, we have to import the com.google.material component, it would be better to use the latest version, if you can not, please make sure it above the 1.4
implementation 'com.google.android.material:material:1.6.0'
second of all, we have to choose to use the TextInputEditText;
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textField"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="3"
/>
</com.google.android.material.textfield.TextInputLayout>
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.
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'
This question is already exist in here. But I want to know this step by step.
I pasted the dependence in gradle under dependencies.
compile 'com.android.support:appcompat-v7:25.3.1'
and than what to do.
My xml code is here
<Button
android:id="#+id/button_not_working"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageViewGroup"
android:layout_marginTop="60dp"
android:paddingEnd="9dp"
android:layout_alignStart="#+id/imageViewGroup"
android:layout_alignEnd="#+id/imageViewGroup"
android:background="#drawable/button_background"
android:text="Drawable Tine not working"
android:textColor="#color/white"
android:textSize="#dimen/font_size_small"
android:textAlignment="center"
android:layout_marginBottom="10dp"
android:drawableEnd="#drawable/forword_arrow"
android:drawableTint="#color/white"
android:gravity="center"
/>
this is the picture
The color of the forward_arrow is not changing.
There are several answer in here but want to know what to do step by step.
That's it.
Tinting compound drawables in TextView (and their descendants such as Button) was introduced in API 23 (Android 6) via android:drawableTint and android:drawableTintMode attributes.
As of today this feature was not yet backported to AppCompat support library.
Naturally I took an attempt at solving this myself. Check out the appcompat-extra library. It has the XpAppCompatTextView and XpAppCompatButton widgets. Your code may look like this:
<android.support.v7.widget.XpAppCompatButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Drawable tint working"
android:drawablePadding="8dp"
app:drawableEnd="#drawable/forword_arrow"
app:drawableTint="?android:textColorPrimary"/>
Note that android:drawablePadding still uses the android prefix.
Layout preview of this widget may be broken. In such case add the following code so you at least know what the result app will look like:
tools:drawableEnd="#drawable/forword_arrow"
tools:drawableTint="?android:textColorPrimary"
To get the library put this in your app module build.gradle:
repositories {
maven { url 'https://dl.bintray.com/consp1racy/maven/' }
}
dependencies {
compile 'net.xpece.android:appcompat-extra:1.2.0'
}
You have to use the tint atttibute
EDIT: My mistake, it should be backgroundTint
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>