How to add upside edged underline in edittext android - android

I want to add this type of underline in edittext
xml
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/InputLayout">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name" />
</android.support.design.widget.TextInputLayout>
style
<style name="InputLayout" parent="TextAppearance.AppCompat">
<item name="android:textSize">18sp</item>
<item name="android:textColor">#color/white</item>
<item name="android:textColorHint">#color/grey</item>
<item name="colorAccent">#color/white</item>
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/colorPrimary</item>
<item name="android:background">#drawable/edit_draw</item>
</style>
but when it got focused it shows it's own underline along with background drawable and and as you can see the drawable i am using is not working good as well.

Just create xml file like edit_text_design.xml and save it to your drawable folder
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- underline color -->
<item>
<shape>
<solid android:color="#41e3ec" />
</shape>
</item>
<!-- main color -->
<item
android:bottom="1.5dp"
android:left="1.5dp"
android:right="1.5dp">
<shape>
<solid android:color="#FFFFFF" />
</shape>
</item>
<!-- draw another block to cut-off the left and right bars -->
<item android:bottom="5.0dp">
<shape>
<solid android:color="#FFFFFF" />
</shape>
</item>
Then use it in your xml for EditText like this
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/name_edit_text"
android:background="#drawable/edit_text_design"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name"/>
</android.support.design.widget.TextInputLayout>
No theam needed..
Output like this

You have to remove the background from the EditText inside layout, because it has its own.
<android.support.design.widget.TextInputEditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:hint="Name"/>

Add this code to change the state behavior along with Enamul Haque answer
create a drawable and assign it Edittext
Edittext xml
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/InputLayout">
<android.support.v7.widget.AppCompatEditText
android:padding="7dp"
android:id="#+id/editText"
android:background="#drawable/editext_states"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name" />
</android.support.design.widget.TextInputLayout>
drawable
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_pressed="true"
android:drawable="#drawable/underline_blue"
/> <!-- pressed -->
<item
android:state_focused="true"
android:drawable="#drawable/underline_red"
/> <!-- focused -->
<item
android:drawable="#drawable/underline_normal"
/> <!-- default -->
create three drawable and change their color as you like and replace these drawable with that

Related

changing TextInputLayout error and border text color

after setting a custom background drawable to my EditText now I'm trying to set an specific color for it's TextInputLayout error but when I set a color with textColor, it fills the EditText with that color too!
here is my background drawable file :
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="4dp" />
<stroke
android:width="1dp"
android:color="#color/edit_text_border" />
</shape>
here is the way I defined EditTexts :
<android.support.design.widget.TextInputLayout
android:id="#+id/changePasswordOldTL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
app:hintEnabled="false"
android:layout_marginStart="16dp"
app:errorTextAppearance="#style/error_appearance"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/changePasswordOldPasswordLabel">
<EditText
android:id="#+id/changePasswordOldET"
style="#style/customEdiText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:maxLength="60" />
</android.support.design.widget.TextInputLayout>
here is error_appearance and customeEditText style :
<style name="error_appearance" parent="#android:style/TextAppearance">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColor">#color/edit_text_border</item>
</style>
<style name="customEdiText">
<item name="android:textSize">#dimen/edit_text_font_size</item>
<item name="android:fontFamily">#font/sans_web_medium</item>
<item name="android:textCursorDrawable">#null</item>
<item name="android:textColor">#color/text_color</item>
<item name="android:background">#drawable/edit_text_background</item>
<item name="android:padding">#dimen/edit_text_padding_right_left</item>
</style>
here is the result :
but I don't want EditText being filled by textColor!

TextInputLayout Edittext foreground color change

I am using TextInputLayout around edittext to display hint and error. Hint is working perfectly fine as expected, but on using setError on TextInputLayout, the whole edittext is getting foreground colored. I just want the bottom highlight line to be colored not the whole box. The current behaviour is as below:
Code on how I used it in layout is as below:
<android.support.design.widget.TextInputLayout
android:id="#+id/inputLoginEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/TextLabel">
<EditText
android:id="#+id/etLoginEmail"
style="#style/EditTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/text_email_address"
android:imeOptions="actionNext"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
The Style which is been used is as below:
<style name="TextLabel" parent="Widget.Design.TextInputLayout">
<item name="android:textColorHint">#color/COLOR</item>
<item name="android:textSize">#dimen/font_larger</item>
<item name="colorAccent">#color/COLOR</item>
<item name="colorControlNormal">#color/COLOR</item>
<item name="colorControlActivated">#color/COLOR</item>
</style>
EditTextStyle:
<style name="EditTextStyle">
<item name="android:textSize">#dimen/font_normal</item>
<item name="android:textColor">#color/grey_text</item>
<item name="android:fontFamily">#font/gotham_book</item>
<item name="android:paddingBottom">#dimen/spacing_normal</item>
<item name="android:paddingTop">#dimen/spacing_normal</item>
<item name="android:background">#drawable/edittext_background</item>
</style>
edittext_background.xml
<?xml version="1.0" encoding="utf-8"?>
<item>
<shape>
<solid android:color="#color/grey_edittext_line" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
How can I remove this foreground color and get the color only on 1dp of highlighted line as in password?

TextInputEditText border disappear when setError() is called

I'm using a style for TextInputEditText to put a border around the field and I'm usingTextInputLayout to set error messages. But when setError () is called the border disappears and remains only a space in place that should have a field.
xml:
<android.support.design.widget.TextInputLayout
android:id="#+id/input"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/edittext"
android:layout_width="300dp"
android:layout_height="wrap_content"
style="#style/EditTextStyle"
android:textColor="#color/secondary_text"
android:paddingTop="#dimen/float_hint_margin"
android:textSize="15dp" />
</android.support.design.widget.TextInputLayout>
EditTextStyle:
<style name="EditTextStyle">
<item name="android:textColor">#color/secondary_text</item>
<item name="android:background">#drawable/lgedittext</item>
<item name="android:paddingTop">5dp</item>
<item name="android:textSize">12dp</item>
<item name="android:layout_marginTop">5dp</item>
<item name="android:layout_height">30dp</item>
</style>
lgedittext:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="#dimen/float_hint_margin">
<shape>
<solid android:color="#color/icons" />
<stroke
android:width="1dp"
android:color="#color/divider" />
<corners android:radius="8dp" />
</shape>
</item>
</layer-list>
Activity:
final TextInputEditText field = (TextInputEditText) dialog.findViewById(R.id.edittext);
final TextInputLayout input = (TextInputLayout) view.findViewById(R.id.input);
String text = field.getText().toString();
if (!text.equals("")) {
//do something
} else {
input.setError(getString(R.string.error_empty));
}

Change default button color from grey to white android

I have a cardview. The button default color is grey. I want it to look like the right side image(like the blessings). This right one has been created setting backgroundtint to white but in older versions its still shows grey.
<android.support.v7.widget.CardView
android:id="#+id/programm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardCornerRadius="2dp"
android:layout_alignParentBottom="true"
android:layout_margin="6dp"
card_view:cardElevation="6dp"
android:layout_gravity="end|right"
card_view:cardBackgroundColor="#color/hotpink"
android:onClick="openNextActivity">
<Button
android:layout_width="wrap_content"
android:drawable="#color/white"
android:layout_height="wrap_content"
android:text="#string/Programme"
android:textColor="#color/hotpink"
android:onClick="openNextActivity"
/>
</android.support.v7.widget.CardView>
If i change the background of the button to white the entire color changes to white:
<android.support.v7.widget.CardView
android:id="#+id/programm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:cardCornerRadius="2dp"
android:layout_alignParentBottom="true"
android:layout_margin="6dp"
card_view:cardElevation="6dp"
android:layout_gravity="end|right"
card_view:cardBackgroundColor="#color/hotpink"
android:onClick="openNextActivity">
<Button
android:layout_width="wrap_content"
android:drawable="#color/white"
android:background="#color/white"
android:layout_height="wrap_content"
android:text="#string/Programme"
android:textColor="#color/hotpink"
android:onClick="openNextActivity"
/>
</android.support.v7.widget.CardView>
As per google search, this default grey color is set in some theme.I probably need to overwrite some theme and set some attribute. But I am not sure what do I need to change.
Try this:
<Button
android:layout_width="wrap_content"
android:text="Button Text"
android:theme="#style/myButtonTheme"
android:layout_height="wrap_content"/>
set this myButtonTheme in your styles.xml file:
<style name="myButtonTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColorPrimary">#color/white</item>
<item name="colorButtonNormal">#5552f1</item>
</style>
[ set your desired background color in colorButtonNormal ]
Output:
i haven't tested it for this kind of situation, but i think something like this can work
you can create a background.xml in your drawable directory and set it as background
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item>
<shape>
<!-- set the shadow color here -->
<stroke
android:width="3dp"
android:color="#77000000" />
<!-- setting the thickness of shadow (positive value will give shadow on that side) -->
<padding
android:bottom="3dp"
android:left="1dp"
android:right="3dp"
android:top="1dp" />
<corners android:radius="4dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#fff" />
<corners android:radius="4dp" />
</shape>
</item>
things you can try with this is that you can set the shadow color the color you want or something else that i had in mind was set the opacity of shadow color to zero so that it would be transparent and you can set its thickness by the paddings of the shadow
hope this helps
In yout styles define:
<style name="BlueButtonTheme" parent="#style/AppTheme">
<item name="android:buttonStyle">#style/Widget.AppCompat.Button.Colored</item>
<item name="colorButtonNormal">#color/disabledButtonColor</item>
<item name="colorAccent">#color/enabledButtonColor</item>
<item name="android:disabledAlpha">1</item>
<!-- button text color-->
<item name="android:textColor">#drawable/colored_button_text_color</item>
</style>
And in your layout xml file:
<Button
android:id="#+id/buttonId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false"
android:theme="#style/BlueWhiteButtonTheme"
android:text="#string/buttonLabel"/>
Just set background for button in your layout
<Button
android:background="#android:color:white"
</Button>

How to change bottom line color of an edit text?

I have a dialog layout in that i have 3 edit texts, for the 1st edit text it shows the underline color as green(primary color), and other two edit text shows the color pink(color accent).
Why so? It should be same as other two edit texts.
Tried to change this with :
name.getBackground().mutate().setColorFilter(getResources().getColor(R.color.colorAccent), PorterDuff.Mode.SRC_ATOP);
name.getBackground().setColorFilter(getResources().getColor(R.color.colorAccent), PorterDuff.Mode.SRC_ATOP);
also by the SO solutions. But nothing helped.
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
....
<item name="android:editTextStyle">#style/EditTextStyle</item>
</style>
<style name="EditTextStyle" parent="Widget.AppCompat.EditText">
<item name="colorControlNormal">#color/border_gray</item>
<item name="colorControlActivated">#color/border_gray</item>
<item name="colorControlHighlight">#color/border_gray</item>
</style>
layout :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<LinearLayout android:layout_height="50dp"
android:layout_width="match_parent"
android:background="#color/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Schedule"
android:textColor="#android:color/white"
android:textAppearance="#android:style/TextAppearance.Medium"
android:layout_gravity="center"
android:layout_marginLeft="20dp" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="20dp">
<EditText
android:id="#+id/edt_name"
android:layout_width="match_parent"
android:layout_height="45dp"
android:textColor="#000000"
android:textSize="14sp"
android:inputType="textCapSentences"
android:hint="Name"
android:cursorVisible="false"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp" />
<EditText
android:id="#+id/edt_dateTime"
android:layout_width="match_parent"
android:layout_height="45dp"
android:textColor="#000000"
android:textSize="14sp"
android:cursorVisible="false"
android:inputType="textCapSentences"
android:hint="Date and Time"
android:layout_centerVertical="true"
android:layout_alignLeft="#+id/edt_name"
android:layout_alignStart="#+id/edt_name"
android:layout_below="#+id/edt_name"
android:layout_alignRight="#+id/edt_name"
android:layout_alignEnd="#+id/edt_name"
android:layout_marginTop="05dp" />
<EditText
android:id="#+id/edt_budget"
android:layout_width="match_parent"
android:layout_height="45dp"
android:textColor="#000000"
android:textSize="14sp"
android:cursorVisible="false"
android:hint="Budget"
android:layout_below="#+id/edt_dateTime"
android:layout_alignLeft="#+id/edt_dateTime"
android:layout_alignStart="#+id/edt_dateTime"
android:layout_alignRight="#+id/edt_dateTime"
android:layout_alignEnd="#+id/edt_dateTime"
android:layout_marginTop="05dp"
android:inputType="number" />
</RelativeLayout>
</LinearLayout>
This is what i got after implementing drawable.
Thank you..
It simply consists of overriding the value for colorControlActivated, colorControlHighlight and colorControlNormal in your app theme definition
<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">#color/accent</item>
<item name="colorControlHighlight">#color/accent</item>
</style>
or by java
editText.getBackground().mutate().setColorFilter(getResources().getColor(R.color.your_color), PorterDuff.Mode.SRC_ATOP);
by changing your "colorAccent" color you will change color or edittext bottom line and text input layout as well.
Create textfield_bg_drawable.xml in drawable folder. and set it as background resource in EditText.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="2dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<selector>
<item
android:state_enabled="true"
android:state_focused="true">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/focused_line_color" />
</shape>
</item>
<item android:state_enabled="true">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/normal_line_color" />
</shape>
</item>
</selector>
</item>
</layer-list>
Try with this following code properly working on my side
Drawable drawable = editText.getBackground(); // get current EditText drawable
drawable.setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_ATOP); // change the drawable color
if (Build.VERSION.SDK_INT > 16) {
editText.setBackground(drawable); // set the new drawable to EditText
} else {
editText.setBackgroundDrawable(drawable); // use setBackgroundDrawable because setBackground required API 16
}
Where editText is the id of your EditText
I think it is because Your 1st editText focusing, when your alert layout appear.
add this line in your editText
android:focusable="true"
You need to disable focus from your first edittext when the activity is opened, so set
android:requestFocus= "false"
in your xml file. Or try the following
edittext.clearFocus();
in your java file.
It will not pick your primary color then.
Hope it works!

Categories

Resources