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>
Related
I am working in a kotlin project, and have been searching for some documentation about the screen layout.
What i want to do is very rudimentairy i guess. I want is to put a label/prompt/text before a EditText.
In html i would program something like this:
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
</form>
And get the a result like this:
First name: ___________
All i can find is a "android:hint=". But it only fills the View if there is nothing in it.
Should one add extra (plainText) elements for each label ? and how should one contstrain it to the EditText ? or is there some kind of grouping ?
Update after received answers
After reading the answers i understand that you have to roll your own solution. (I am still fighting with androidstudio because it sorts the xml elements so they are not always where i put them.)
I do not use a TextInputLayout (i hope this is allowed) which makes it all quite simple. So this is my solution for now:
We link the TextView ("Date of Birth") to the parent layout:
<TextView
android:id="#+id/dobLabel2"
android:layout_width="92dp"
android:layout_height="23dp"
android:layout_marginStart="76dp"
android:layout_marginBottom="112dp"
android:labelFor="#id/dobInputText"
android:text="Date of Birth"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
and we link the EditText to the TextView
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/dobInputText"
android:layout_width="240dp"
android:layout_height="54dp"
android:hint="Day/Month/Year"
app:layout_constraintStart_toStartOf="#+id/dobLabel2"
app:layout_constraintTop_toBottomOf="#+id/dobLabel2" />
If you play with the layout_contraints you can position the the EditText also to the left of the label.
Thanks for all the input, i think i can solve my problem now.
Android EditText (now often used as a combination of TextInputLayout containing one (and only one) TextInputEditText) can display a Hint, but only while the view has no focus/content.
If you want to provide a better description on what a particular EditText is for, for many reasons (accessibility, often neglected, is not the only one), you may want to provide an extra TextView positioned anywhere you consider it ok to add the extra information needed to better describe the EditText.
The main thing to keep in mind, is to provide this TextView with the labelFor attribute, as described in the Android documentation.
If you're reading this and wondering but why do I have to provide an extra Textview to describe, why not just use the hint, android is horrible!!!, keep in mind that the Hint is good for different reasons, but not for describing what the field is about.
E.g.: Imagine you're asking for a Date of Birth. You may be tempted to write this: (note this is a simplified version obviously):
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/dobInputLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/dobInputText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Date of Birth" />
</com.google.android.material.textfield.TextInputLayout>
And you'd be mostly ok, but then your designer comes in and says, well, we also want to show the Format that we accept, for e.g.: DAY/MONTH/YEAR...
Now you're going to change the hint to be:
android:hint="Date of Birth (DD/MM/YYYY)
And you'd again, be ok, but for accessibility users... this doesn't read very efficiently nor is very clear. You also get back from your designer who says: "but I don't want the (DD/MM/YYYY) part to be visible after the user focuses or types something..."
And so on and so forth.
The correct (according to Google, Material Design, and who knows what), is to provide an extra TextView that accompanies the TextInput combos:
(again, keep in mind this is pseudo-code, when in doubt, read the documentation)
<TextView
android:id="#+id/dobLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Date of Birth"
android:labelFor="#id/dobInputText />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/dobInputLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/dobInputText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Day/Month/Year" />
</com.google.android.material.textfield.TextInputLayout>
Do not provide contentDescription on those views because they will likely interfere with TalkBack/Accessibility. These are the conventions that Android set in place, you may or may not like them, but this is how it's expected to be done.
Do I think EditText should be a better widget and handle this better for you? Yes. Does it matter what I think? Nope.
Yes, you have to add one more textview before adding edit text. The hint is used for displaying messages in edittext.
How do you achieve the "Material look" with the different form controls on Android?
I've seen examples with floating label and edittext, but there is little information about how to create Spinners, RadioButtons, section dividers, etc. and in general any kind of form with a Material look.
Make you activity a descendant of AppCompatActivity. Then all the widgets you use will be automatically substituted to their AppCompat implementation.
For AppCompatActivity you should add in build.gradle file of the project:
compile "com.android.support:appcompat-v7:$supportLibVersion"
Currently, the latest supportLibVersion is 25.2.0. Thus,
compile "com.android.support:appcompat-v7:25.2.0"
i guess you got dislikes, because it is a very general question.
I'll help you and like your post,
as for your question
again it's very very general questino
you can do for example for text views to have more "Material Design" look, you can wrap them in a style like this one:
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_email" />
</android.support.design.widget.TextInputLayout>
as for the rest you just have to google how to style each element to fit your specific layout and the google material design guidlines
I am trying to make something on these lines:
I am able to show the hint using android:hint="Email Address" but unable to show the helper text - This will be your email username
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/et_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="15"
android:hint="Username"
app:et_helper="Username is preferably your registered email"/>
</android.support.design.widget.TextInputLayout>`
What I am getting is only and no Username is preferably your registered email below edittext:
Output:
Any pointers appreciated. Thank you.
The best way is to use TextInputLayout. Google introduced it in new design library. In order to use the TextInputLayout you have to add the following to your build.gradle dependencies:
compile 'com.android.support:design:22.2.0'
Then use it in your xml files:
<android.support.design.widget.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Enter your name"/>
</android.support.design.widget.TextInputLayout>
You can set your text by setting error true. Altough it is for showing errors but it is suitable for your use. You can change color and typeface if you want.
TextInputLayout til = (TextInputLayout) findViewById(R.id.textInputLayout);
til.setErrorEnabled(true);
til.setError("You need to enter a name");
With Design Support Library 28 , an inbuilt helper Text feature is added in TextInputLayout.
implementation 'com.android.support:design:28.0.0'
Now enable error using xml or programmatically
textInputLayout.isHelperTextEnabled=true
textInputLayout.error="Email can not be Empty!!!"
Also , hint and error can together be used now!!!
Example
et.setOnFocusChangeListener { v, b ->
if (b) {
textInputLayout.helperText = "yourhelperText"
} else {
textInputLayout.helperText = null
if(et.text.toString()==""){ // or any other validation
textInputLayout.error="Email can not be Empty!!!"
}
}
TextInputLayout | Android Developers
EDIT Don't forget to enable error and helperText via xml or programatically.
Full XML with TextInputLayout OutlinedBox style and TextInputEditText
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_customer_no"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_marginEnd="5dp"
android:layout_marginRight="5dp"
android:padding="3dp"
app:helperTextEnabled="true"
app:helperText="* Enter customer number that will be used">
<!--android:maxLength="13"-->
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_customer_no"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Customer No"
android:inputType="number" />
</com.google.android.material.textfield.TextInputLayout>
The Helper Text is not provided by TextInputLayout. However, the article below has a working example of it. It uses a class that extends from TextInputLayout by adding HelperText as another indicator to the class, working along side with the ErrorText.
https://medium.com/#elye.project/material-login-with-helper-text-232472400c15#.vm28p662v
So what you want is this:
Helper Text
You can achieve this by using this library:
https://github.com/rengwuxian/MaterialEditText
You can set the "helper text" attribute to show the text below the line and the "hint" to show the text above the line. Below is the sample layout for the attached picture
<com.rengwuxian.materialedittext.MaterialEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword"
app:met_floatingLabel="normal"
app:met_helperText="Must contain at least 8 characters"
app:met_helperTextAlwaysShown="true"/>
I had similar question asked here.
If you want to keep two EditText views together closed vertically in LinearLayout, I think there is no way. One way, I think, is you can set the android:gravity of top EditText to 'bottom' and 'top' to the lower EditText. But in RelativeLayout, This should be easy.
TextInputLayout can be used if you want to show the hint text (on top of EdiText) even while user typing it. Usually with setting hint to EditText would not work this way. Hint text would disappear after the view is focussed by touching it.
You can simply use app:helperText attribute in TextInputLayout (with library com.google.android.material:material:1.2.1) in this way:
<com.google.android.material.textfield.TextInputLayout
...
android:hint="Email Address"
app:helperText="This will be your email username">
<com.google.android.material.textfield.TextInputEditText
... />
</com.google.android.material.textfield.TextInputLayout>
or in programmatically (kotlin) way:
textInputLayout.helperText = "This will be your email username"
I'm planning an android app and my first doubt came on what element should I use to represent a free text area.
I want to develop a quick note type of app and I want to know which kind of element is better to represent an area where the user can freely write that will automatically make newlines and with support for scroll.
So, can anyone help me?
Thx in advance,
CR
These 3 attributes are important: singleLine, inputType, lines. Also, you may need a scrollbar, the code below shows how to make one:
<EditText
android:inputType="textMultiLine"
android:lines="8"
android:minLines="6"
android:gravity="top|left"
android:maxLines="10"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:scrollbars="vertical"
/>
A simple EditText should be sufficient with some tweaking. Something like this:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="100dip"
android:inputType="textLongMessage" />
use edit text with android:singleLine="false"
I would like to know how to remove the top space/margin of a soft-keyboard.
For clearer picture, checkout the following screenshots:
With space and without space:
The "spacing" you're seeing is the autocomplete suggestion area. If you have an input type set to something as simple as text then you're going to get suggestions from the keyboard. Adding textNoSuggestions to your inputType field will remove the suggestions area.
So for example:
<EditText android:id="#+id/username_field"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textNoSuggestions"
android:hint="#string/username" />
Or if you were already using something like textCapWords you can combine them like so:
<EditText android:id="#+id/username_field"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textCapWords|textNoSuggestions"
android:hint="#string/username" />
Also, not sure if you are using it but just a heads up, you'll want to use inputType="password" for your password field.
Whatever your inputType is, add |textNoSuggestions to the end of it.