I have this layout:
<LinearLayout
android:id="#+id/dialogCentralContent"
android:gravity="center_horizontal"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_below="#+id/phoneNumberInfo"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="20dp"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:background="#drawable/edittext_white_rounded">
<EditText
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:maxLines="1"
android:inputType="none"
android:focusable="false"
android:text="#={dataContext.phonePrefix}"
style="#style/Widget.App.PurchaseAmountEditText" />
<android.support.design.widget.TextInputLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
tools:errorEnabled="true"
app:errorText="#{dataContext.validator.phoneValidation}">
<android.support.design.widget.TextInputEditText
android:layout_height="60dp"
android:layout_width="match_parent"
android:gravity="center"
android:maxLines="1"
android:inputType="phone"
android:text="#={dataContext.phoneNumber}"
style="#style/Widget.App.PurchaseAmountEditText" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
It looks like this:
As you can see the second EditText is rendered lower than the first one. When I look at it in the visual editor of Android Studio I can see that the TextInputLayout has some free space at its top, however setting paddingTop="0dp" didn't change anything. So how to make those two EditTexts render the same way?
By default, android.support.design.widget.TextInputLayout will leave room at the top for the floating hint text. If you're not using the floating hint, you can remove that space by adding the following to the opening <TextInputLayout> element.
app:hintEnabled="false"
The regular hint text will still be visible on the TextInputEditText when it's empty.
N.B. – This answer does not apply to the current Material Components version, which is markedly different than the original.
Related
Is there a way to create an input field that looks like the ones on this image - Icon on the left, input on the right - using only the default TextInputLayout?
I've tried several combinations, and the icon always stays inside the TextInputEditText. I've tried changing the TextInputLayout orientation to horizontal but it didn't work as well. Is there anyway of doing this without placing an ImageView and an EditText inside of another ViewGroup?
Below is the code I used to create an input field, but with the icon remains inside the TextInputEditText.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Test"
>
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_bank_card_back_grey_24dp"
android:drawablePadding="#dimen/default_padding"
/>
</android.support.design.widget.TextInputLayout>
Does this fit the bill ? :
<android.support.design.widget.TextInputLayout
android:id="#+id/TextInputLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<android.support.v7.widget.AppCompatEditText
android:id="#+id/EditText1"
android:hint="code"
android:text="0044"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:imeOptions="actionNext"
android:inputType="phone"
android:minWidth="350dp"
android:drawableLeft="#drawable/cross"
android:drawableStart="#drawable/cross"
android:textColor="#00ff00"
android:textColorHint="#ff0000"
android:textCursorDrawable="#null"
/>
</android.support.design.widget.TextInputLayout>
image from code:
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'
I have a fragment which contains a calculator (Just three TextInputEditTexts which listen for input).
These inputs are set out in a RelativeLayout as shown below-
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingBottom="16dp">
<android.support.design.widget.TextInputLayout
android:id="#+id/binomial_probability_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label_probability"
android:paddingBottom="16dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/binomial_probability_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:inputType="numberDecimal"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/binomial_trials_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label_trials"
android:paddingBottom="16dp"
android:layout_below="#+id/binomial_probability_wrapper">
<android.support.design.widget.TextInputEditText
android:id="#+id/binomial_trials_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:inputType="numberSigned"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/binomial_successes_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label_successes"
android:paddingBottom="16dp"
android:layout_below="#+id/binomial_trials_wrapper">
<android.support.design.widget.TextInputEditText
android:id="#+id/binomial_successes_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:inputType="numberSigned"/>
</android.support.design.widget.TextInputLayout>
</RelativeLayout>
I have also tried using a LinearLayout with each input on a separate row, but that had the same result.
As you can see in this image-
the bottom input is cut off. If I measure it on my screen it is clearly a different size, but Android returns the same value for the heights of each layout and input.
Any suggestions as to how to fix this are welcome.
Edit: Some extra information. The layout bounds show that the text cursor is actually taller than the height of the bottom TextInputEditText. The top have the correct height.
Second edit: I added the a TextView below (For output) and that is now cut off, while the TextInputEditText is now the same as the others.
As saying in official github page:
TextInputLayout provides two height variations for filled and outline
text fields, standard and dense. Both box styles default to the
standard height.
In order to reduce the height of a text box, you can use a dense
style, which will reduce the vertical padding within the text box. You
can achieve this by applying the appropriate styles to your
TextInputLayout and TextInputEditText, depending on whether you are
using a filled or outline text field
So try to apply #style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense to your TextInputLayout or change padding for TextInputEditText
<android.support.design.widget.TextInputLayout
android:id="#+id/binomial_probability_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label_probability"
android:paddingBottom="16dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/binomial_probability_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:inputType="numberDecimal"/>
</android.support.design.widget.TextInputLayout>
You have to use android:paddingTop="5dp" in
<android.support.design.widget.TextInputLayout
android:id="#+id/binomial_probability_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label_probability"
android:paddingTop="5dp">
---- write something ----
</android.support.design.widget.TextInputLayout>
I'm making a calculator and user input is contained in EditText. Input is typed through buttons on screen, so Android keyboard is disabled. However, I want it to write all input in one line and when line reaches border, it needs to be ellipsized and then horizontally scrollable so you can reach whole text.
I tried doing this by setting android:maxLines="1" and android:ellipsize="end", but that doesn't work. Text is still in multiple lines, but only one line is visible and you need to scroll vertically to see other lines. I also tried using android:singleLine="true", but that makes EditText completely unusable.
This is EditText XML:
<EditText
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#color/colorBlue"
android:textAlignment="textEnd"
android:textSize="40sp" />
I think this will work for you. Let me know if it works.
<EditText
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#color/colorBlue"
android:textAlignment="textEnd"
android:textSize="40sp"
android:inputType="text"
android:maxLines="1"
android:lines="1"
android:scrollHorizontally="true"
android:ellipsize="end"/>
This post might help you as well.
For single line in EditText, you just need to set two properties:
android:inputType="text"
android:maxLines="1"
Adding this line in the edittext make scrollable singleline text.
android:inputType="textShortMessage"
**This example helps you to create multiline EditText in Android.**
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/rl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
tools:context=".MainActivity"
>
<!--
android:scrollbars="vertical"
It will display a vertical scrollbar if the EditText text exceed
3 lines (android:maxLines).
-->
<EditText
android:id="#+id/et"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_marginBottom="10dp"
android:hint="Multiline EditText by XML layout"
android:fontFamily="sans-serif-condensed"
android:background="#d3d7b6"
android:minLines="2"
android:maxLines="3"
android:scrollbars="vertical"
android:inputType="textMultiLine"
/>
<EditText
android:id="#+id/et2"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:padding="10dp"
android:fontFamily="sans-serif-condensed"
android:hint="Multiline EditText programmatically"
android:background="#d4d7a5"
android:layout_below="#+id/et"
/>
</RelativeLayout>
I've created a text input with the help of the design support library but it behaves strangely inside the constraint layout I placed it in. The code below is how I wish the widget to be displayed and it initially displays correctly both in the design-builder and on the device. However, if I select the TextInputLayout (in either the design or blueprint layout) the EditText has it's layout_width modified from match_parent to 0dp causing it disappear.
<android.support.design.widget.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_height="wrap_content"
android:layout_width="0dp"
app:layout_constraintLeft_toLeftOf="#+id/activity_login"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="#+id/activity_login"
android:layout_marginTop="16dp"
app:layout_constraintRight_toRightOf="#+id/activity_login"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#+id/activity_login"
android:layout_marginBottom="16dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/email"
android:layout_weight="1"
android:hint="#string/email"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="11dp"/>
</android.support.design.widget.TextInputLayout>
I figured I'd come back and provide a solution since this is still left open.
The reason I was seeing the EditText views were behaving abnormally in the TextInputLayout is because they shouldn't be there in the first place. The TextInputLayout is part is the design support library and gives developers an easy way to build dynamic labels and error messages for text fields in a manner that is consistent with the Material design spec. However, they have a TextInputEditText as a child, not EditText.
<android.support.design.widget.TextInputLayout
android:id="#+id/emailLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:labelFor="#+id/email"
app:layout_constraintLeft_toLeftOf="#+id/activity_login"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="#+id/activity_login"
android:layout_marginTop="16dp"
app:layout_constraintRight_toRightOf="#+id/activity_login"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#+id/activity_login"
android:layout_marginBottom="16dp">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/email"
android:inputType="textEmailAddress"
android:hint="#string/email"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="11dp"
/>
</android.support.design.widget.TextInputLayout>
In my case i just put the below line it worked fine
android:inputType="textEmailAddress"
android:imeOption="yourAction"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp"
Include these lines in textInputLayout.