TextInputLayout padding issue in Android - android

I need to custom create a TextInputLayout where the EditText can have padding but the upper hint and lower error text does not share that padding like this in Android.
When I'm adding padding to the EditText inside TextInputLayout, the hint and error text also showing that padding like this.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/et_phone_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorText="Invalid Number" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="#dimen/dp_54"
android:paddingEnd="0dp"
android:paddingBottom="#dimen/dp_20"
android:inputType="phone"
style="#style/editTextStyle_large"
android:hint="#string/w12_mobile_sign_in_hint"/>
</com.google.android.material.textfield.TextInputLayout>

Related

Android set padding for hint text

Is it possible to set the padding for the hint inside an EditText in Android?
Cannot seem to find any documentation in regards.
Try following code:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/email"
android:hint="Hint Text"
android:paddingStart="15dp"
/>
You cannot add padding to hint text only. but you can apply padding for both hint and text using paddingStart attribute.
android:paddingStart="16dp"

How to set different gravity for TextInputLayout's hint and text in Android

How to set different gravity for TextInputLayout's hint and text entered in edit text. I want to set the hint gravity to start and edit text's text gravity to center. So how can i achieve this.
This is my xml code,
<android.support.design.widget.TextInputLayout
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:gravity="start">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/grey"
android:hint="Email"
/>
</android.support.design.widget.TextInputLayout>
In Android, we can set gravity both programmatically and in XML.
To set edit text hint in the center see the code below in which I use android:gravity="center" in XML.
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:backgroundTint="#color/colorAccent"
android:hint="Email" />
For showing the hint at top|left and the text typed in edit text to be at center or to set different gravity for TextInputLayout's hint and text in Android, you need to try the code below.
In .xml you need to set EditText's hint gravity top|left.
<android.support.design.widget.TextInputLayout
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<EditText
android:id="#+id/etName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top|left"
android:hint="Email"
android:backgroundTint="#color/colorAccent" />
</android.support.design.widget.TextInputLayout>
And in your java (activity) file, set EditText's text gravity center programmatically:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
EditText etName = (EditText)findViewById(R.id.etName);
etName.setGravity(Gravity.CENTER);
}
See the screenshot with the result:
Different gravity works implementation 'com.google.android.material:material:1.1.0' and below version but does not work in 1.2.0 or above.
To make it work in 1.1.0 or below follow these steps.
set TextInputEditText gravity to start in xml
<com.google.android.material.textfield.TextInputEditText id="#+id/text" gravity="start"/>
then programmatically set its gravity to center
text.gravity=Gravity.CENTER

Android - TextInputLayout doesn't wrap hint of TextInputEditText

I have a simple TextInputEditText nested in TextTnputLayout.
I am trying to make the of TIL to be as long as the hint given in TIET.
<android.support.design.widget.TextInputLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="This is a hint"/>
</android.support.design.widget.TextInputLayout>
But the problem is, it doesn't show anything
I have to set TIL's width to match_parent or just any other width other than wrap_content. But I want to the width to be dynamic as in, the width of TIL follows the length of the hint provided. Is it possible? If yes, how to do that?
I am using support library version 26.0.2 btw.
Yvette Colomb's answer is close, the TIL wraps the TIET but the fancy animation doesn't work there. It might be because the animation won't start if hints are set in execution?
You can do so, by setting the hint in the java code.
Remove the hint from the xml:
<android.support.design.widget.TextInputLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="#+id/inputTxt"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.TextInputLayout>
Declare and initialise the TextInputEditText in the activity and set the hint.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TextInputEditText inputTxt = (TextInputEditText) findViewById(R.id.inputTxt);
inputTxt.setHint("This is a hint");
}
This will wrap the text to the width of the hint as you type (not saying this is how it goes for all devices)
Then expand the width when you've entered the text.
To answer your updated question.
How to make the input layout grow as we enter input.
<android.support.design.widget.TextInputLayout
android:id="#+id/txtInputL"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="#+id/inputTxt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:maxLines="1"/>
The Java.
final TextInputEditText inputTxt = (TextInputEditText) findViewById(R.id.inputTxt);
inputTxt.setHint("This is a hint");
final TextInputLayout txtInputL = (TextInputLayout) findViewById(R.id.txtInputL);
txtInputL.setMinimumWidth(300);
txtInputL.setHint("This is a hint");
I've added a floating hint:
As we're typing:
If you have any other questions about this, please ask a new question.
You can achieve this from xml instead, just set the hint for both TextInputLayout and TextInputEdittext and it will work then to make the TextInputEdittext grow as you are typing you have to set the it maxlines="1" and the layout_height to wrap_content as below
<android.support.design.widget.TextInputLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="This is edittext">
<android.support.design.widget.TextInputEditText
android:hint="This is edittext
android:maxLines="1"
android:inputType="numberDecimal"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</android.support.design.widget.TextInputLayout>
I hope this help someone
Try this:
<android.support.design.widget.TextInputLayout
android:id="#+id/txt_inputLayout_gify"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="#+id/edt_gift_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="This is hint." />
</android.support.design.widget.TextInputLayout>
I found a type of workaround, for me I wanted to show Country Code in a disabled Material Design styled EditText, but same as you I was unable to use the wrap_context inside TextInputLayout.
So as a workaround I added the hint text in both TextInputLayout and TextInputEditText, and since I had a predefined text inside the TextInputEditText, the hint of TextInputEditText never appeared on screen, but made space for the hint of TextInputLayout to be visible.
Here is what I did...
<androidx.constraintlayout.widget.ConstraintLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="16dp">
...
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/country_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Country code"
app:hintTextColor="#737373"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+91"
android:hint="Country Code"
android:enabled="false"
android:textColor="#737373"
.../>
</com.google.android.material.textfield.TextInputLayout>
...
</androidx.constraintlayout.widget.ConstraintLayout>
P.S. You might want to add a few more characters in the TextInputEditText hint, as that is what is controlling the spacing. Also the constraint layout is there just because I had other elements in the activity, you can avoid it and use any of your root view.
Screenshot
set your xml like so:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/text_field_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/input_text_field"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
/>
</com.google.android.material.textfield.TextInputLayout>
Now, adjust the size of the input_text_field to be BY THE SIZE OF THE HINT, depending on the hint size, like so:
val tf = input_text_field
val layout = text_field_layout
val hint = "Hint"
val measureText = tf.paint.measureText(hint).toInt()
tf.width = tf.paddingLeft + tf.paddingRight + measureText.toInt()
layout.hint = hint
Try doing this.
<android.support.design.widget.TextInputEditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="This is a hint"/>

Make Label(Floating Label) of TextInputLayout either Marquee or show in multiple lines

I want to make label of TextInputLayout either Marquee or in Multiple lines.
I tried android:ellipsize property with TextInputLayout and with AppCompatEditText but not able to get desired result.
Please guide me how I can set Floating label of TextInputLayout either marquee or in multiple lines.
My code is as follows:
<android.support.design.widget.TextInputLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:hintTextAppearance="#style/TextAppearence.App.TextInputLayout">
<android.support.v7.widget.AppCompatEditText
style="#style/style_name"
android:layout_width="fill_parent"
android:hint="Demo Long Hint Text Text text Text Text Text"
android:imeOptions="actionNext"
android:inputType="text" />
</android.support.design.widget.TextInputLayout>
I also tried to apply android:ellipsize="marquee" direct to EditText, but it causes crash my application.

TextInputLayout hint padding not working

I want to give padding to hint of edittext in TextInputLayout
where email address is hint and Sample is text
also tried this solution but didn't work.
facing this issue after changing support design library 23.1.0
here is my code
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/edtEmailAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/border_round_edt_grey"
android:focusableInTouchMode="true"
android:hint="#string/emailadd"
android:padding="10dp"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
As per this answer ,if you have custom background set on EditText the android:padding attribute simple doesn't work to alter the spacing b/w the hint text and edit text .So if you have set custom background to your AppCompatEditText, you can use android:translationY attribute in the AppCompatEditText
Please add below line in your AppCompatEditText.
android:translationY="10dp"
hope you got your answer :)

Categories

Resources