How to make text grey in TextInputEditText after TextInputLayout enabled = false? - android

When I disable my TextInputLayout
InputTextContainer.isEnabled = false
it's getting grey so visually you understand that it's unavailable but text in it still black even it's blocked too. I want my text to be grey as the disabled container. Can you help me to do that?

Using the default theme, the text in a TextInputLayout's contained EditText is also grayed out when you disable a TextInputLayout. You may have done something in your theme or specific styling on your EditText that has overridden this.
For example, if you have specified a text color like this:
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
tools:hint="Hint"
tools:text="Text" />
...you have specified a single color that cannot react to different states of the view. Here I defined black #000000, so the text will be black no matter what.
If you want a color that turns gray or transparent when it's disabled, you need to define a ColorStateList color in XML and use that as your android:textColor. Make sure the ColorStateList has at least one state that corresponds with state_enabled="false". For example:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:color="#80000000"
android:state_enabled="false"/> <!-- Translucent black for disabled state -->
<item
android:color="#FF000000"/> <!-- Default -->
</selector>

Suppose this is your xml view
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/pswrd"
.....>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/pswrd_text"
....>
</com.google.android.material.textfield.TextInputEditText>
</com.google.android.material.textfield.TextInputLayout>
you can try 2 things:
along with setting pswrd.isEnabled = false, set pswrdText.isEnabled=false as well.
in case 1 doesnt work, try pswrdText.setTextColor(android.R.color.darker_gray)

Try this method just as #Nitin Verma answered.
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edt_email">
<TextView
android:id="#+id/textView20"
android:layout_width="wrap_content"/>
<com.google.android.material.textfield.TextInputEditText/>
edt_email.isEnable = false
textView20.isEnable = false

Related

Don't change textinputlayout hint color while setting error

I am implementing form using textinputlayout in Android
I don't want to change hint text color while setting error on textinputlayout as per below
textInputLayout.setErrorEnabled(true)
textInputLayout.setError("this field is required ")
// As of now this code is changing error message and hint color to red. But I don't want to change hint color to red. Only message color should be changed to red
I want to change error hint "nickname" to blue and error message to red color.
TLDR; It seems there's no way or workaround to do that.
Setting hint color to be different from error seems to be not possible to achieve with xml styling. This and this didn't work. No matter what combination I used, hint was always changed when error was set (to the error color).
So I did a bit of digging in the TextInputLayout code. It has hint color saved defaultHintTextColor, but this one is not used when state changes:
private void updateLabelState(boolean animate, boolean force) {
...
} else if (errorShouldBeShown) {
collapsingTextHelper.setCollapsedTextColor(indicatorViewController.getErrorViewTextColors());
...
The collapsingTextHelper seems to take responsibility for the hint drawing (it's the only one using hint color). However none on the properties I set after error happened worked hintTextColor, setHintTextAppearance, defaultHintTextColor (tried with postDelayed). In fact setting any of these can trigger collapsingTextHelper.setCollapsedTextColor(hintTextColor); but then there's always update that triggers above code:
if (defaultHintTextColor == null) {
collapsingTextHelper.setCollapsedTextColor(hintTextColor);
}
focusedTextColor = hintTextColor;
if (editText != null) {
updateLabelState(false);
}
If you debug or check layout inspector you will not see a corresponding text view for the hint. The text is drawn by collapsingTextHelperso there's no even a way to get the hint view sadly.
One solution:
Use helper text styled as error text instead of error text.
<com.google.android.material.textfield.TextInputLayout
style="#style/TextAppearance.TextInputLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:errorEnabled="false"
app:helperTextEnabled="true"
app:helperText="Test error message"
app:hint="your hint">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
and made style that corresponds to your error style.
Set To Main Theme of App, It Works Only Highlight State Only
<item name="colorAccent">#color/Color Name</item>
Try The Below Code It Works In Normal State
Change the theme of your TextInputLayout as given below
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ti_email"
android:hint="#string/EmailAddress"
android:layout_toLeftOf="#+id/imEntremail"
android:textColorHint="#color/view"
app:hintTextAppearance="#style/HintTextStyle">
<EditText
android:id="#+id/etentrEmail"
android:layout_width="match_parent"
android:layout_height="#dimen/_30sdp"
android:layout_marginTop="#dimen/_10sdp"
android:cursorVisible="false"
android:imeOptions="actionNext"
android:padding="#dimen/_3sdp"
android:gravity="left|bottom"
android:textColorHint="#B8B8B8"
android:textSize="#dimen/_11ssp"
android:maxLines="1"
android:inputType="text"
android:background="#android:color/transparent"
android:textColor="#000000"/>
</com.google.android.material.textfield.TextInputLayout>
In Styles Folder HintTextStyle Code change the android:textColor code to change your floating label color
<style name="HintTextStyle" parent="TextAppearance.Design.Hint">
<item name="android:textSize">14sp</item>
<item name="android:padding">26dp</item>
<item name="android:textColor">#ff0000</item>
</style>

Setting backgroundTint on Material Button with alpha has a weird visual effect in normal and pressed state

I'm using Material Buttons in my project and trying to set backgroundTint with alpha value.
<!-- background_tint.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#android:color/black" android:alpha="0.60"/>
</selector>
<!-- activity_main.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Sign in"
app:backgroundTint="#color/background_tint" />
</LinearLayout>
The resulting button however looks weird while in normal state and even weirder while pressed.
I don't see this issue when I set backgroundTint to specific shade of gray such as #777777. Why does this happen with alpha value?
We had the same issue with partially opaque elevated material views.
Simply adding android:stateListAnimator="#null" removed the visible shadow artifacts.
We also set the elevation to 0dp which I don't think is required.
You just need to change the style property of Material Button.
style="#style/Widget.MaterialComponents.Button.UnelevatedButton"
It's probable that you're seeing the shadow beneath. It seems like Material Design shadows are weird. It feels like the shadows are only at the sides as you're not suppose to see them anyways.
You can fix it by using an unelevated button (style="#style/Widget.MaterialComponents.Button.UnelevatedButton") or by trying to recreate that shade of gray without alpha (by maybe screenshotting the part without the shadow weirdness and using an eyedropper to get the color in RGB)
Also, it seems like you're trying to change the color of the selector.
It can be achieved by using app:rippleColor="#color/yourRippleColor". Background tint changes the color of the button itself according to the Material Components Documentation (Material Component: Button). Adjusting the alpha adjusts opacity of the color making your button more transparent/opaque enabling you to see beneath it.

Android MapView control change background color without affecting other visual properties

I have an Android application that uses a MapView with an ImageButton control (to move to the user's current location) I've added in the top right-hand corner. The problem I am having is that the ImageButton control's background is too transparent, but changing it with android:background="#BBFFFFFF" alters both the size of the background and removes the blue "flash" that you normally see when the button is pressed - two qualities I wish to retain.
I start with something like this:
<RelativeLayout 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" >
<com.google.android.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mapview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:apiKey="my api key"
/>
<ImageButton android:id="#+id/googlemaps_select_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginTop="13dp"
android:layout_marginRight="13dp"
android:src="#drawable/device_access_location_found"/>
</RelativeLayout>
Which achieves something that looks like this:
So then I add:
android:background="#BBFFFFFF"
And I get this:
Note that although this is basically the level of opacity I want, changing the background has affected the padding, and also doesn't display a blue "flash" when pressed (which obviously isn't illustrated in this question).
So my question is, how can I change just the background color/opacity in the non-pressed state, while retaining the other visual qualities of the button? I had a brief read about Android styles and themes, but can't even figure out where this button is getting its style/theme from and how I would go about just overriding the background color/opacity while retaining all of the other visual features.
Issue
When you are assigning a fixed color to the a view background, you are replacing the default background in the view by the fixed color you define.
In reality, the background of a button is not a simple fixed color. It's a state list of color or drawables, which means, depending on button status (focous, selected, pressed, etc.) a different background is used, resulting in the "flash" animation you see when button is pressed. If you replace this state list by a simple fixed color, not depending on buttons status, you get a fixed background (i.e. not changing when button is pressed).
Resolution
There is a xml parameter that can be used to change the image view's alfa (i.e. transparency) which is:
android:alpha="1"
where the value 1 above can be any float between 0 and 1, being 1 the maximum opacy.
However, I believe this is not solving your issue, because you want to change the alfa of background not the image alfa, if I correctly understood your issue. Anyway the default seems to be 1.
One possibility the should work for you is to define a selector to be used as background. The selector will choose the drawable based on his status.
Example
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#android:color/darker_gray" />
<item android:drawable="#android:color/white" />
</selector>
Save the xml file above in your drawable-xxxx folder with the name my_selector
In this example I'm using standard android colors, but you can define your own colors. You need to assigne a color for each different button status that you want to have a different color.
Then you need to define your ImageView backgroung to be the selector you defined above:
<ImageButton
android:id="#+id/googlemaps_select_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="13dp"
android:layout_marginTop="13dp"
android:background="#drawable/my_selector"
android:src="#drawable/device_access_location_found" />
With the above changes, the bacground color used by the button will change when the button is pressed and you can have the "flash" effect.
I ended up using a style to inherit the look of Widget.ImageButton with just a few minor tweaks for my purposes:
My /res/values/styles.xml file now looks like:
<resources>
<style name="AppTheme" parent="android:Theme.Light" />
<style name="my_loc_btn_style" parent="#android:style/Widget.ImageButton">
<item name="android:layout_marginTop">8dp</item>
<item name="android:layout_marginRight">8dp</item>
</style>
</resources>
And my layout file has:
<ImageButton android:id="#+id/googlemaps_select_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
style="#style/my_loc_btn_style"
android:src="#drawable/device_access_location_found"/>
This seems to have inherited a background from Widget.ImageButton that seems to be just slightly transparent, which is what I was after anyway, so I don't set the transparency at all now.

How to change background image for focused state of edittext

I know the title of my question sounds like a question that already has been answered.
However, my question is somehow different and I couldn't find a solution
In my app I have a login screen with two EditText. I use a modified version of the Theme.Holo.Light.
The EditTexts look like this:
As you can see there is a border below the text in different color, depending on the state of the EditText.
So here is my question: Can anyone tell me how to change the color of these borders??
I hope anyone can help me! Thanks in advance!
EDIT:
Unfortunately, I ran into an other problem:
I was able to change the background image using solution of dtmilano.
However, adding a StateListDrawable removed the padding of the EditView. If I add text, the cursor is at the most left position, not inside the depicted border as before.
Up to now, I wasn't able to introduce this padding, e.g. with android:paddingLeft.
Can anyone tell me which property got overwritten by using this selector
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_pressed="true"
android:drawable="#drawable/edittext_pressed"
/> <!-- pressed -->
<item
android:state_focused="true"
android:drawable="#drawable/edittext_focused"
/> <!-- focused -->
<item
android:drawable="#drawable/edittext_default"
/> <!-- default -->
</selector>
and an EditText like this:
<EditText
android:id="#+id/loginEmail"
android:background="#drawable/edittext_modified_states"
android:inputType="textEmailAddress"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
You should use a StateListDrawable as the background of your EditText in your theme so you can handle the different states.

Android text view color doesn't change when disabled

When I call setEnabled(false) for a TextView object the text color doesn't change. I expected it will be changed to gray. If I remove the line of android:textColor in my XML file, it backs to normal.
Any ideas ?
I think what's happening is that since you're overriding the default textcolor it isn't inheriting the other textcolor styles. Try creating a ColorStateList for it and setting the textColor attribute to it instead of to a color.
In a color file (eg res/color/example.xml):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:color="#color/disabled_color" />
<item android:color="#color/normal_color"/>
</selector>
then in your layout:
<TextView
android:text="whatever text you want"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/example" />
Note, I haven't done this in a while and I'm typing a lot of this from memory, so it may need a little tweaking. The ColorStateList docs (linked above) have a more fleshed-out example for the color XML file.

Categories

Resources