In my android app, I have a hint text in my EditText view. Once the user starts typing, I want the hint to be displayed on top of the edittext field. The original hint text disappears when user starts typing which is fine. How do I place a text on top of the edittext field ? Is there a way to make the EditText field multiline and use the first line for hint? But the user input should always start from the second line.
Thanks in advance for your help!
Just found that they are called floating inline labels in android.
http://www.google.com/design/spec/components/text-fields.html#text-fields-floating-labels
But looks like API 21 doesnt support this yet.
There new widget provide by android called TextInputLayout it is the standard way. Below is an example of it:
<android.support.design.widget.TextInputLayout
android:id="#+id/first_text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/first_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="hello"/>
</android.support.design.widget.TextInputLayout>
You can use FloatLabelLayout. It's a custom component that works as described in the google documentation.
Once you create the custom component you can use it in this way:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<your.package.FloatLabelLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:floatLabelTextAppearance="#style/TextAppearance.YourApp.FloatLabel">
<EditText
android:id="#+id/edit_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/account_username_hint"
android:singleLine="true"
android:inputType="textNoSuggestions"
android:imeOptions="actionNext"
android:nextFocusDown="#+id/edit_password" />
</your.package.FloatLabelLayout>
<your.package.FloatLabelLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:floatLabelTextAppearance="#style/TextAppearance.YourApp.FloatLabel">
<EditText
android:id="#+id/edit_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/account_password_hint"
android:singleLine="true"
android:inputType="textNoSuggestions"
android:imeOptions="actionDone" />
</your.package.FloatLabelLayout>
</LinearLayout>
Related
The problem is that android keyboard is hiding textview under edittext (not edittext itself!) while being opened.
This is my layout example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity">
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/big_image"
android:layout_width="200dp"
android:layout_height="600dp"
android:layout_centerHorizontal="true"
android:background="#color/colorPrimary"
android:src="#drawable/ic_launcher_foreground"/>
<android.support.design.widget.TextInputLayout
android:id="#+id/comment_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/big_image">
<EditText
android:id="#+id/comment_edittext_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="your comment"
android:imeOptions="actionDone"
android:maxLength="250"/>
</android.support.design.widget.TextInputLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/comment_input_layout"
android:text="0/250"/>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
Images below to make it clear:
screen without keyboard
actual behavior
expected behavior
I found several similar questions on stackoverflow, none of them has solutions:(
Please, help me to deal with this problem!
Be sure, that I used all advices considering android:windowSoftInputMode="adjustPan"
or android:windowSoftInputMode="adjustResize"
or android:focusableInTouchMode="true"
or android:fitsSystemWindows="true"
or adding this textview on separate from edittext layout, having framelayout as root,
but the problem is a little more complicated.
Another important things are, that this text below edittext should
remain above keyboard while text is going on another line
dissapear while edittext is scrolling up (as it is the part of edittext).
I faced the same issue. I have already log a ticket to Material regarding this.
The "hack" I applied, thanks to my awesome colleague's advice is this:
Whenever the layout is rendered and I click on the field which has the counter (which is the last field on my layout), scroll it to the bottom programatically, so that the keyboard not longer hides the counter.
Here are the difference pieces of code of my program which you can refer to:
override fun onFocusChange(p0: View?, isOnFocus: Boolean) {
if (isOnFocus.not() && getDescription().isEmpty()) {
tnDescriptionLayout.error = resources.getString(R.string.description_error_message)
tnDescriptionLayout.isErrorEnabled = true
} else {
tnDescriptionLayout.isErrorEnabled = false
llayout.postDelayed(object : Runnable {
override fun run() {
var v =
tnDescriptionLayout.findViewById<AppCompatTextView>(R.id.textinput_counter)
nestedScrollView.smoothScrollBy(0,v.height)
}
}, CoreConstants.MINIMUM_VIEW_LOAD_DURATION)
}
tvDescription.setText(getDescription())
lateinit var nestedScrollView: NestedScrollView
fun change(nestedScrollView: NestedScrollView){
this.nestedScrollView=nestedScrollView
}
paymentOrderContent.change(nestedScrollView = parentView.nestedScrollViewParent)
I hope that this helps you!
You can archive your design using this design also
In XML use TextInputLayout instated of edittext
<android.support.design.widget.TextInputLayout
android:id="#+id/itFAuthAnswer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_5sdp"
app:passwordToggleEnabled="true"
app:counterEnabled="true"// add this
app:counterMaxLength="250" //add this
app:hintTextAppearance="#style/AppTextInputHintLabelStyle">
<EditText
android:id="#+id/etName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/et_auth_f_que_hint"
android:imeOptions="actionDone"
android:singleLine="true"/>
</android.support.design.widget.TextInputLayout>
This lines of code is solved your issue in different way and its also suitable to your currant design.
app:counterEnabled="true"// make it true
app:counterMaxLength="250"//set your limit
Happy Learning...
please add this app:counterEnabled="true" app:counterMaxLength="250" to your TextInputLayout
<android.support.design.widget.TextInputLayout
android:id="#+id/comment_input_layout"
android:layout_width="match_parent"
app:counterEnabled="true"
app:counterMaxLength="250"
android:layout_height="wrap_content"
android:layout_below="#+id/big_image">
<EditText
android:id="#+id/comment_edittext_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="your comment"
android:imeOptions="actionDone"
android:maxLength="250"/>
Edit :
please try with this in your manifest
android:windowSoftInputMode="stateVisible|adjustResize"
I would like for my app to be able to display different hints in the edittext at different times, so i have to set the hint pro-grammatically at each times as below.
editText.setHint("Hint 1");
But the problem is when i starts typing the hint starts disappearing.I want to show this hint every time.If i set the hint in xml it will not disappear while typing, but how to do this in my case.
Either you should consider to change to TextInputLayout(Strongly recommended this. Here is an example too.)
or
make relative layout with EditText for input and TextView for hint inside.Change the textview according to your needs.
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text"
android:layout_alignParentLeft="true"
android:id="#+id/editText1"
android:layout_gravity="center"
/>
<TextView
android:id="#+id/text_hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="yourHint"
android:textSize="14sp"
android:layout_marginRight="10dp"
android:textColor="#color/customColor"
/>
</RelativeLayout>
what you are expecting is not possible,since we have to how what user is writing on editext.
Now a days https://github.com/hardik-trivedi/FloatingLabel
this type of hints are more popular,you can try above link.
TextInputLayout give powerful material features to EditText. Main feature is floating hint. See doc here https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html
You can't display while typing text in edit text hint in android have default functionality
<android.support.design.widget.TextInputLayout
android:theme="#style/TextLabel"
android:id="#+id/input_layout_username"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/username_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:hint="Email Address"
android:inputType="textEmailAddress"
android:translationY="10dp"
android:textColor="#color/white"
android:textColorHint="#color/white"
android:textSize="#dimen/font_13"/>
</android.support.design.widget.TextInputLayout>
Here android provide default functionality while typing text in edit text the hint above edit text, You can also set Hint via programmatically
EditText. setHint ("Hint 1");
the best way to do this is to use TextInputLayout.
https://www.bignerdranch.com/blog/becoming-material-with-android-design-support-library/
<!--EMAIL-->
<android.support.design.widget.TextInputLayout
android:id="#+id/email_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/TextLabel">
<EditText
android:id="#+id/etUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/login_screen_email_hint"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"
android:maxLines="1"
android:nextFocusDown="#+id/etPassword"
android:singleLine="true"
android:textColor="#android:color/white"
android:textColorHighlight="#android:color/white"
android:textColorHint="#android:color/white" />
</android.support.design.widget.TextInputLayout>
And dont forget adding this line to your gradle file
compile 'com.android.support:design:23.4.0'
When I'm using my app to enter text into an editview, when I click the Enter button on the soft keyboard the text entered is disappearing. Ideally I would like the app to go to the next edittext box when the user clicks the button as it does on a different form, however the XML is the same for the button so unsure as to why there is a difference
To try getting the enter button move to the next edit text I've tried inputting the following into the XML but had no luck so far
android:imeOpions="actionNext";
XML For Control As Requested
<EditText
android:layout_width="0dp"
android:layout_height="40dp"
android:id="#+id/text_name"
android:layout_weight="1"
android:visibility="invisible"
/>
Comment: Removed Line above as didn't work
I created a basic activity a simple layout ( shown below). When I press enter in the edit text, it goes to the next edit text.
I added the code you mentioned
(android:imeOpions="actionNext";)
but I also had to add:
android:singleLine="true"
EDIT: singleLine is deprecated.
You can simply add
android:inputType="text"
to your editText.
That worked for me. I think the reason that the line was disappearing was because it was being shifted up and out of the bounds of the textview. The EditText thought you wanted to create a new line. That's my guess.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.slipperyslope.aperturelabs.nextfield.NextEditTextActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Example"/>
<!-- This way works!-->
<EditText
android:id="#+id/first_edittext"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:inputType="text"
/>
<!-- This way works! But it's deprecated-->
<EditText
android:id="#+id/second_edittext"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:imeOptions="actionNext"
android:singleLine="true"
/>
<!-- dummy edit text just to transition to. -->
<EditText
android:id="#+id/third_edittext"
android:layout_width="100dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
Let me know if this works or if you are still having issues.
Recently google introduced new Android Design Library in that how to use TextInputLayout field to enable the Floating Hint feature of EditText.
Not much guidance is available here.
This page says
you can now wrap it in a TextInputLayout
But No idea because smart prediction (Ctrl+SPACE) doesn't predicts any attributes to the TextInputLayout. So my questions are:
How do we get hold of the EditText underlying this component?
How can we get data from EditText?
TextInputLayout extends ViewGroup class.
So which means that you have to wrap your EditText in a TextInputLayout.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="hint"
android:id="#+id/editText1" />
</android.support.design.widget.TextInputLayout>
Do wrap the TextInputLayout around TextInputEditText instead of EditText.
Wrapping around EditText does have issue in landscape mode. Refer to
this article for more details.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="hint"
android:id="#+id/editText1" />
</android.support.design.widget.TextInputLayout>
This is defined in design support library under "Floating labels for editing text".
<android.support.design.widget.TextInputLayout
android:id="#+id/name_et_textinputlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin">
<EditText
android:id="#+id/FeedBackerNameET"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="hinttext"
android:inputType="textPersonName|textCapWords" />
</android.support.design.widget.TextInputLayout>
To make this works well, you should let you app theme extends from Theme.AppCompat (or its descendant) theme, like extends from Theme.AppCompat.Light.NoActionBar.
<android.support.design.widget.TextInputLayout
android:id="#+id/til_message"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/et_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/type_message"
android:maxLines="5"/>
</android.support.design.widget.TextInputLayout>
hint will automatically shift up once you start typing in the edit text and to have those errors which appear below edit text set error on text input layout like this not on edit text
tilMessage.setError("Message field is empty!");
to disable error
tilMessage.setErrorEnabled(false);
The correct way...
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/card_id_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/form_card_id_text"
android:inputType="number"
android:maxLength="10"/>
</android.support.design.widget.TextInputLayout>
If you use EditText like a child of TextInputLayout, you will see this message in Android Monitor:
I/TextInputLayout: EditText added is not a TextInputEditText. Please switch to using that class instead.
With the Material Components Library there is a new TextInputLayout component.
Just use:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
In the official doc you can find all the info.
We can use AppCompactEditText also for this need to add support:appcompat in gradle
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/et_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint"
android:maxLength="100"
android:inputType="textNoSuggestions"
android:textColor="#color/colorPrimary"
android:textSize="#dimen/font_size_large" />
</android.support.design.widget.TextInputLayout>
Rule of Thumb : TextInputLayout should wrap TextInputEditText instead of the normal EditText.
Reason?
TextInputEditText is a sub-class of EditText and is designed for use as a child of TextInputLayout.
Furthermore, using an EditText instead would shoot us a warning : EditText added is not a TextInputEditText. Please switch to using that class instead.
I created a custom layout for an AlertDialog, and it works fine,
But i have a problem with the text style of my layout.
This is the layout for my alertDialog:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/namedialoglable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/profilename" />
<EditText
android:id="#+id/namedialoginput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/namedialoglable"
android:layout_marginTop="24dp"
android:ems="10"
android:selectAllOnFocus="true"
android:text="#string/defaultname" >
<requestFocus />
</EditText>
</RelativeLayout>
The problem is that the text into the default AlertDialog is white, and in my custom dialog is black. I just want to use the same color used into other AlertDialog.
How to do that?
EDIT
To be more clear:
I want to keep the father text color, not force my custom dialog color to be white. I think that AlertDialog use system color, so my alert need to keep the same color
Why wont you just apply:
android:textColor="#android:color/white"
to the Views you want with while text color.
Also look into styles and themes to achieve what you wnat:
http://developer.android.com/guide/topics/ui/themes.html#PlatformStyles
Ok in my case, i found another solution.
Since my need is to have only a message and an input text into the dialog box, the best solution is to create a layout with only an EditText, like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<EditText
android:id="#+id/namedialoginput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="24dp"
android:ems="10"
android:selectAllOnFocus="true"
android:text="#string/defaultname" >
<requestFocus />
</EditText>
</RelativeLayout>
And for the message text, using the builder method: setMessage:
builder.setView(content)
.setTitle("Profile Name")
.setMessage(R.string.profilename);
In that way, i am sure that i keep the other dialog boxes format.