Is there a way to move up a little more the Floating Labels?
My Edit Text actually has a borderline or a frame, but when the hint floats it floats over the borderline.
Can anyone help me?
Please?
Yes There is a work around of this problem. Use
android:translationY="10dp"
to your EditText
try adjusting
android:paddingTop=""
android:paddingBottom=""
property of Floating Labels
You have definitely problems with android:padding. I don't see your code, but you may put them in wrong places.
Delete them first and let me know if problem still happening:
Here is an sample code from Android Material Design Floating Labels for EditText tutorial
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="60dp">
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_name"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:hint="#string/hint_name" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_email"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="#string/hint_email" />
</android.support.design.widget.TextInputLayout>
<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:inputType="textPassword"
android:hint="#string/hint_password" />
</android.support.design.widget.TextInputLayout>
<Button android:id="#+id/btn_signup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/btn_sign_up"
android:background="#color/colorPrimary"
android:layout_marginTop="40dp"
android:textColor="#android:color/white"/>
</LinearLayout> </android.support.design.widget.CoordinatorLayout>
Also look at another great example to learn how it should be implemented from Google Samples Github Repository
Hope it help
use this textinputlayout,
<android.support.design.widget.TextInputLayout
android:id="#+id/username_text_input_layout"
style="#style/TextLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/etUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:ems="10"
android:hint="Username"
android:imeOptions="actionNext"
android:inputType="text|textNoSuggestions"
android:maxLength="255"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
you can use this style , set font as you need , edit this as per your need .
<style name="TextLabel" parent="TextAppearance.Design.Error">
<!--//hint color And Label Color in False State-->
<!--<item name="android:textColorHint">#color/colorPrimary</item>-->
<item name="android:textSize">#dimen/font_normal_size</item>
<!--//Label color in True State And Bar Color False And True State-->
<item name="colorAccent">#color/colorAccent</item>
<!--<item name="colorControlNormal">#color/</item>
<item name="colorControlActivated">#color/Color Name</item>-->
</style>
enter code here
<android.support.design.widget.TextInputLayout
android:id="#+id/firstnameLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<EditText
android:id="#+id/firstname_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:hint="First Name"
android:inputType="text"
android:drawableLeft="#drawable/ic_person_black_18dp"
android:drawablePadding="5dp"
android:textColorHint="#693EB4" />
</android.support.design.widget.TextInputLayout>
Try this maybe it will help you.
Related
I have some edit text with floating labels like the first one in the image
<android.support.design.widget.TextInputLayout
android:id="#+id/tlIdMode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/signup_edittext_margin_top"
android:hint="#string/signup_id_mode">
<com.vipera.onepay.ui.component.custom.CustomTextInputEditText
android:id="#+id/etIdMode"
android:layout_width="match_parent"
android:layout_height="#dimen/edit_text_height"
android:inputType="text"
android:text="#string/signup_nif"
android:textColor="#color/dark_gray"
android:textSize="#dimen/edit_text_size" />
</android.support.design.widget.TextInputLayout>
and I want to have an ImageButton on the right side of the edit text like the second one but I am losing the hint and the floating label...
<android.support.design.widget.TextInputLayout
android:id="#+id/tlIdNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/signup_edittext_margin_top"
android:hint="#string/signup_id_number">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.vipera.onepay.ui.component.custom.CustomTextInputEditText
android:id="#+id/etIdNumber"
android:layout_width="match_parent"
android:layout_height="#dimen/edit_text_height"
android:inputType="text"
android:textColor="#color/dark_gray"
android:textSize="#dimen/edit_text_size" />
<ImageButton
android:id="#+id/imgClearUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/etIdNumber"
android:layout_alignRight="#+id/etIdNumber"
android:layout_alignTop="#+id/etIdNumber"
android:background="#android:color/transparent"
android:padding="5dp"
android:src="#drawable/ic_clear_28dp" />
</RelativeLayout>
</android.support.design.widget.TextInputLayout>
I want to have both, imageButton and floating label. Thanks for any help!!
Use FrameLayout and keep these views separately to the child of the layout. Like
<FrameLayout
android:layout_marginTop="#dimen/dp20"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputLayout
android:id="#+id/tlIdNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="signup_id_number">
<EditText
android:id="#+id/etIdNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="40dp"
android:inputType="text"
android:textColor="#FF00FF"
android:textSize="16sp" />
</android.support.design.widget.TextInputLayout>
<ImageButton
android:id="#+id/imgClearUser"
android:layout_gravity="right|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/etIdNumber"
android:layout_alignRight="#+id/etIdNumber"
android:layout_alignTop="#+id/etIdNumber"
android:background="#android:color/transparent"
android:padding="5dp"
android:src="#android:drawable/ic_menu_close_clear_cancel" />
</FrameLayout>
This will work. Here padding with EditText android:paddingRight="40dp" will handle the case where, while typing text will not go under close button. You can increase or decrease this value as per your UI requirement.
With proper alignment and view's attributes as per your question, answer would be
<FrameLayout
android:layout_marginTop="#dimen/signup_edittext_margin_top"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputLayout
android:id="#+id/tlIdNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/signup_id_number">
<com.vipera.onepay.ui.component.custom.CustomTextInputEditText
android:id="#+id/etIdNumber"
android:layout_width="match_parent"
android:layout_height="#dimen/edit_text_height"
android:inputType="text"
android:paddingRight="40dp"
android:textColor="#color/dark_gray"
android:textSize="#dimen/edit_text_size" />
</android.support.design.widget.TextInputLayout>
<ImageButton
android:id="#+id/imgClearUser"
android:layout_gravity="right|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/etIdNumber"
android:layout_alignRight="#+id/etIdNumber"
android:layout_alignTop="#+id/etIdNumber"
android:background="#android:color/transparent"
android:padding="5dp"
android:src="#drawable/ic_clear_28dp" />
</FrameLayout>
My CardView was being shown as expected till android O like this,
But in android P it looks like this, (Transparent white rectangle inside)
This is the style used in all CardView of the app.
<style name="translucentCard" parent="CardView">
<item name="cardCornerRadius">20dp</item>
<item name="cardBackgroundColor">#26ffffff</item>
</style>
If I use non-transparent cardBackgroundColor then the inner rectangle disappears but it's not the solution. I need to use semi-transparent color as used before. Can anyone help me to overcome this please ? Please note, It's only happening in Android Pie.
backward compatible elevation on the latest release
app:cardElevation="0dp"
OR
<item name="cardElevation">0dp</item>
Use This hope this will work :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/rootView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="...">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="..." />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
style="#style/translucentCard"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:layout_height="wrap_content">
<LinearLayout
style="#style/paddedContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/login_email">
<EditText
android:id="#+id/.."
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:padding="8dp" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/login_password">
<EditText
android:id="#+id/editTextPasswordForLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:padding="8dp" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:orientation="horizontal">
<TextView
android:id="#+id/textViewForgotPassword"
style="#style/WarrentyLifeTheme.TextAppearance.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/login_forgot_password" />
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="#+id/buttonLogin"
android:layout_width="wrap_content"
android:layout_height="#dimen/buttonHeight"
android:paddingLeft="36dp"
android:paddingRight="36dp"
android:text="#string/dashboard_button_login" />
</LinearLayout>
Try setting
android:background="#null"
to LinearLayout inside the CardView or to TextViews inside this LinearLayout.
This way you will remove the background altogether so there won't be any overdraw.
Add this
android:outlineSpotShadowColor="#color/colorGray"
android:outlineAmbientShadowColor="#color/colorGray"
This solved my problem. Use gray color with a low transparency
I am using an app which displays a drop down Spinner with an EditText as a child of TextInputLayout next to it.
When an underlined error is shown under the TextInputLayout, then the EditText will go up, and alignment will miss !!
See my screenshot please:
What I am trying to do is:
Here is my xml code:
<LinearLayout
android:layout_width="#dimen/edittext_width"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="bottom">
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/spinner_countries"
style="#style/Widget.AppCompat.Spinner.Underlined"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="30"
android:layout_gravity="start"
android:spinnerMode="dialog" />
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_mobile"
style="#style/TextInputLayoutTheme"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="70">
<com.cashu.app.ui.widgets.CustomEditText
android:id="#+id/et_fragment_register_step_one_mobile"
android:layout_width="#dimen/edittext_mobile_num_width"
android:layout_height="wrap_content"
android:ems="12"
android:gravity="center_vertical"
android:layout_gravity="start"
android:hint="#string/mobile_hint"
android:inputType="number"
android:textSize="#dimen/font_size_normal" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
Here is my TextInputLayout theme:
<!-- TextInputLayout Style -->
<style name="TextInputLayoutTheme" parent="Widget.Design.TextInputLayout">
<item name="android:gravity">center</item>
<item name="android:textColor">#color/white</item>
<item name="android:textColorHint">#color/colorControlActivated</item>
<item name="errorTextAppearance">#style/AppTheme.TextErrorAppearance</item>
<item name="counterTextAppearance">#style/TextAppearance.Design.Counter</item>
<item name="counterOverflowTextAppearance">#style/TextAppearance.Design.Counter.Overflow</item>
</style>
I tried searching for many keywords, terms and methods but unfortunately with no luck.
I would appreciate if anyone has a hack for this issue.
Add app:errorEnabled="true" in TextInputLayout.
This will leave space for error even if error is not displayed. This will consume more space but will help you to maintain alignment.
Make your TextInputLayout as below.
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_mobile"
style="#style/TextInputLayoutTheme"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="70"
app:errorEnabled="true">
Later in java:
To set error text use
textInputLayout.setError("Email can not be blank");
To remove error text and set view as normal
textInputLayout.setError("");
*Note that the use of textInputLayout.setErrorEnable(false) to remove the error will take out entire text view of error from the textInputLayout which will disturb your alignment.
I figured out my problem, I set margin to my AppCompatSpinner and set top gravity to it with specific hight.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/spinner_countries"
style="#style/Widget.AppCompat.Spinner.Underlined"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="26dp"
android:layout_weight="30"
android:spinnerMode="dialog" />
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_mobile"
style="#style/TextInputLayoutTheme"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="70"
app:errorEnabled="true">
<com.cashu.app.ui.widgets.CustomEditText
android:id="#+id/et_mobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:ems="12"
android:gravity="center_vertical"
android:hint="#string/mobile_hint"
android:inputType="number"
android:textSize="#dimen/font_size_normal" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
[EDIT]
When my TextInputLayout has an error, I remove it by adding the following lines:
myTextInputLayout.setErrorEnabled(false);
myTextInputLayout.setErrorEnabled(true);
myTextInputLayout.setError(" ");
Why?
This line: myTextInputLayout.setErrorEnabled(false); will clear the error from the TextInputLayout
This line: myTextInputLayout.setErrorEnabled(true); will enable error for the TextInputLayout again
This line: myTextInputLayout.setError(" "); will prevent layout alignment disruption.
Problem now is solved.
try this,
<LinearLayout
android:layout_width="300dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="bottom">
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/spinner_countries"
style="#style/Widget.AppCompat.Spinner.Underlined"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="30"
android:spinnerMode="dialog" />
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_mobile"
style="#style/TextInputLayoutTheme"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="70">
<EditText
android:id="#+id/et_fragment_register_step_one_mobile"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:ems="12"
android:gravity="center_vertical"
android:layout_gravity="start"
android:hint="Mobile No."
android:inputType="number"
android:textSize="20sp" />
</android.support.design.widget.TextInputLayout>
I spent a lot of time in attempt to resolve this issue but without success for now...
when the application runs on android with RTL language. the label(hint) of the EditText is shown at the wrong position.
Desired result
ltr layout
RTL Layout
rtl layou
XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Login form container -->
<android.support.percent.PercentRelativeLayout
android:id="#+id/form_container"
android:layout_centerHorizontal="true"
app:layout_widthPercent="85%"
app:layout_heightPercent="30%"
app:layout_marginTopPercent="8%">
<!-- Username 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:maxLines="1"
android:inputType="textVisiblePassword|textNoSuggestions"
android:textDirection="ltr"
android:hint="#string/hint_username"/>
</android.support.design.widget.TextInputLayout>
<!-- Password layout -->
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_below="#+id/input_layout_username">
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="1"
android:textDirection="anyRtl"
android:hint="#string/hint_password"
android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>
</android.support.percent.PercentRelativeLayout>
</android.support.percent.PercentRelativeLayout>
how can i fix the unnecessary margin in the RTL layout?
In addition, it would be great if it's possible to remove/hide the "visibility toggle"(eye icon) button!
Thank you!
to disable password toggle all you need is to add "passwordToggleEnabled" attribute to your TextInputLayout, for example:
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:passwordToggleEnabled="false">
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="1"
android:textDirection="ltr"
android:hint="#string/hint_password"
android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>
I'm using Support Design Library. I created EditText but when I'm writting something there is some blue underline of edit text like in the picture below
Here is my code:
<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="Test"
android:inputType="none"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
How to fix that?
It seems autocomplete/suggestions are open. Try this:
<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="Test"
android:inputType="textNoSuggestions"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>