Want to customize EditText attribute with a hint - android

I'm new to android mobile development and java. And wonder if anybody can help me with my issue.
Now, I'm making XML file of my android app and want it to have something like displayed below.
Can it be made in XML file without deep knowledge of java? I just want to have fixed text in my EditText attribute. Using LinearLayout to my first app. I appreciate any kind of help.
Using API 28 for testing.

Yes, there is a default layout TextInputLayout and TextInputEditText.
Here's documentation:
https://developer.android.com/reference/android/support/design/widget/TextInputLayout
https://material.io/develop/android/components/text-input-layout/

This is called TextInputLayout.Read here. Demo example here
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintEnabled="true">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username" />
</android.support.design.widget.TextInputLayout>

You are looking for the TextInputLayout component:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
app:boxBackgroundColor="#color/white"
app:boxStrokeColor="#color/text_input_layout_stroke_color"
app:counterMaxLength="15"
app:counterEnabled="true"
>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</com.google.android.material.textfield.TextInputLayout>

Related

Material TextInputLayout set two end icons

I'm trying to add a second endIcon to Material TextInputLayout like so:
But feels like it's almost impossible, I've already tried this solution but it's not working (at least for me).
Right now I've just a simple TextInputLayout with only one icon (toggle password), and I've no idea how to add a second one like at the screenshot above.
Do you have and advices?
Thanks:)
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/ed_password_label"
app:endIconMode="password_toggle"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionDone"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

"inputType="none" doesn't work with Material Components ExposedDropdownMenu

I'm trying do make a non-editable exposed dropdown menu, following the guide under "Implementing an exposed dropdown menu" found here: https://material.io/develop/android/components/text-fields/
However, it's still editable, even with "inputType="none"" on the AutoCompleteTextView.
Here's my xml:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu">
<AutoCompleteTextView
android:id="#+id/autoCompleteTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="none" />
</com.google.android.material.textfield.TextInputLayout>
Does anybody know why this doesn't work, even though it's in their official documentation and how to make this truly non-editable?
PS: "editable="false"" does solve the problem, but since this is depracted, I don't really want to use it
How about this:
android:focusable="false"
android:focusableInTouchMode="false"
android:inputType="none|textNoSuggestions"
android:cursorVisible="false"
This is an example of AutoCompleteTextView:-
<AutoCompleteTextView
android:id="#+id/autoComplete"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:inputType="none"
android:enabled="false"
android:padding="15dp" />

How to make Edit Text hint appear when typing

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'

Left Icon in TextInputLayout

I'm trying to add an Left Icon to my TextInputLayout, but text get over the Icon.
When I add a padding, everything move together.
I tried with
android:drawableLeft="#drawable/ic_store_white_48dp"
android:drawablePadding="50dp"
android:drawableStart="#drawable/ic_store_white_48dp"
But it is not working !
I should implement a LinearLayout horizontal for each row, but I would like to be sure there is no easier way to do it
Here is my code layout:
<android.support.design.widget.TextInputLayout
android:id="#+id/til_calle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/et_calle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_store_white_48dp"
android:drawablePadding="50dp"
android:drawableStart="#drawable/ic_store_white_48dp"
android:hint="Calle"
android:inputType="text" />
</android.support.design.widget.TextInputLayout>
Make sure you are using the latest Design library, all you need for both Design and AppCompat is:
compile 'com.android.support:design:23.2.0'
Try using both the Design's library TextInputLayout and AppCompat's AppCompatEditText.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#android:color/white"
android:textColorHint="#color/loginHint">
<android.support.v7.widget.AppCompatEditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:imeOptions="actionNext"
android:inputType="textEmailAddress|textNoSuggestions"
android:minWidth="350dp"
android:drawableLeft="#drawable/ic_store_white_48dp"
android:drawableStart="#drawable/ic_store_white_48dp"
android:textColor="#android:color/white"
android:textColorHint="#color/loginHint"
android:textCursorDrawable="#null"
app:backgroundTint="#android:color/white"/>
</android.support.design.widget.TextInputLayout>
With the Material Components library you can change the left icon in the TextInputLayout using the app:startIconDrawable attribute.
Something like:
<com.google.android.material.textfield.TextInputLayout
android:hint="Hint text"
app:startIconDrawable="#drawable/ic_add_24px"
...>
<com.google.android.material.textfield.TextInputEditText/>
</com.google.android.material.textfield.TextInputLayout>
Here is my code layout:
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_username"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:drawableLeft="#drawable/icon_user"
android:drawableStart="#drawable/icon_user"
android:drawablePadding="10dp"
android:hint="User Name" />
</android.support.design.widget.TextInputLayout>
android:drawablePadding="10dp"
Its work
This is a bug that was reported on Android's Issue Tracker
https://code.google.com/p/android/issues/detail?id=225836
and it's now been fixed on the latest release of the Design Support Library (v25.0.1). Just add the required dependency to the build gradle...
dependencies {
compile 'com.android.support:design:25.0.1'
}
It is simple, when adding passwordToggleEnabled it automatically adding the eye icon on the right and the drawableLeft was gone. so you have to remove the drawableLeft and just use the drawableStart.
<android.support.design.widget.TextInputLayout
android:id="#+id/til_calle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/et_calle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawablePadding="50dp"
android:drawableStart="#drawable/ic_store_white_48dp"
android:hint="Calle"
android:inputType="text" />
If you are using material input layout so you just need to add one line in input layout's xml code
app:startIconDrawable="#drawable/ic_baseline_content_paste_24"
Yes. Currently its a bug on Layout.
You can try giving leftPadding to EditText or give some blank_spaces before the text.
Using material library, you can set custom icon using endIconMode="custom":
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/date_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:endIconMode="custom"
app:endIconDrawable="#drawable/ic_calendar">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/date_end"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="none"
android:textSize="14sp"
tools:text="30 feb" />
</com.google.android.material.textfield.TextInputLayout>

How to use TextInputLayout in new android design library

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.

Categories

Resources