Highlighting a focused edit text - android

I have been looking on how to highlight a focused edit text form field in an Android app.
When I focus my email field, there is no visual feedback.
What sort of visual feedback should I provide ? Is there a standard on what the user expects ?
I was thinking of some background color highlight or some field border color.
Any way to achieve this ?
My layout is:
<EditText
android:id="#+id/login_email_edittext"
style="#style/editext_graybg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_username"
android:drawableStart="#drawable/ic_username"
android:hint="#string/login_email_hint" >
<requestFocus />
</EditText>
And the style:
<style name="editext_graybg" parent="android:Widget.EditText">
<item name="android:background">#drawable/editext_bg_gray</item>
<item name="android:drawablePadding">#dimen/pad_10dp</item>
<item name="android:ems">10</item>
<item name="android:inputType">textEmailAddress</item>
<item name="android:paddingLeft">#dimen/pad_10dp</item>
<item name="android:paddingRight">#dimen/pad_10dp</item>
<item name="android:textColor">#color/black</item>
<item name="android:textSize">#dimen/txt_18sp</item>
</style>
EDIT: I tried the following solution but it is not satisfactory as it reduces the size of my beautifully styled field:
I added textfield_selected.9.png image file into the drawable/ folder, I added a edit_text.xml file in the drawable/ folder containing a <item android:drawable="#drawable/textfield_selected" android:state_enabled="true" android:state_focused="true" />
and I added the attribute android:background="#drawable/edit_text" to my field. But the field is too small now. Using an image for this styling overwrites my existing styling. Is there any way to do this without an image ?

You must create a selector inside your drawable folder. This selector will have the different states of the editText (with focus or not i.e).
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_pressed="true"
android:drawable="#android:drawable/edittext_pressed"
/>
<item
android:state_focused="true"
android:drawable="#drawable/edittext_focused"
/>
<item
android:drawable="#android:drawable/edittext_normal"
/>
After that in your editText you can put as background this selector and it should work.

Related

Colorstatelist for button background not working

Reference: How to specify background color in Color State List Resources?
I have followed the popular answer in the link above.
I have the following drawable;
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true"
android:drawable="#color/KeyActionPrimary"/> <!-- enabled -->
<item android:state_enabled="false"
android:drawable="#color/KeyActionButtonDeactivated"/> <!-- disabled -->
<item android:state_pressed="true"
android:drawable="#color/KeyActionPrimary"/> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#color/KeyActionPrimary"/> <!-- focused -->
<item android:drawable="#color/KeyActionPrimary"/> <!-- default -->
</selector>
I understand that it will always follow order of precedence and therefore in the current order only activated and deactivated likely to be triggered. Currently however I am not getting any results at all
My button;
<Button
android:id="#+id/buttonSTART"
android:layout_width="#dimen/btn_width"
android:layout_height="#dimen/btn_height"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="16dp"
android:background="#drawable/state_controlled_key_action_button"
android:padding="#dimen/btn_padding"
android:text="#string/btn_start"
android:textColor="#color/key_action_button_text_color"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnSCORES"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
The button comes out as white which in my material theme is the ColorPrimary attribute
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Home" parent="Theme.MaterialComponents">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/Primary</item>
<item name="colorPrimaryVariant">#color/PrimaryVariant</item>
<item name="colorSecondary">#color/Secondary</item>
<item name="colorSecondaryVariant">#color/SecondaryVariant</item>
<!--colorBackground appears behind scrollable content and is used for the default window-->
<!--background. colorSurface is mapped to the surface of components such as cards, sheets-->
<!--and menus. colorError is used to indicate an error state for components such as-->
<!--text fields.-->
<item name="android:colorBackground">#color/Background</item>
<item name="colorSurface">#color/Surface</item>
<item name="colorError">#color/Error</item>
<!--"On" colors define how text, icons and strokes are colored in relation to the surface-->
<!--on which they appear.-->
<item name="colorOnPrimary">#color/ColorOnPrimary</item>
<item name="colorOnSecondary">#color/ColorOnSecondary</item>
<item name="colorOnBackground">#color/ColorOnBackground</item>
<item name="colorOnSurface">#color/ColorOnSurface</item>
<item name="colorOnError">#color/ColorOnError</item>
<item name="android:fontFamily">#font/atma_medium</item>
<item name="android:textColor">#color/PrimaryTextColor</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">#color/StatusBar</item>
<!-- Customize your theme here. -->
<item name="actionBarSize">36dip</item>
</style>
</resources>
Firstly I am assuming that a theme covers the entire app but if you explicitly specify a background to a specific button it should override the theme value, please correct me if I am wrong.
I started this journey with a colorstatelist under res/colors. Read the link at the top which confirmed you need to use drawable. As I already had a color state list initially followed the advice of the answer which had 0 votes...
shape
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#color/primary_button_color" />
<stroke android:width="#dimen/btn_stroke" android:color="#color/primary_button_stroke_color"/>
<corners android:radius="#dimen/btn_radius"/>
</shape>
colorstatelist
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true"
android:color="#color/Primary"/> <!-- pressed -->
<item android:state_enabled="false"
android:color="#color/PrimaryButtonDeactivated"/> <!-- pressed -->
<item android:state_pressed="true"
android:color="#color/Primary"/> <!-- pressed -->
<item android:state_focused="true"
android:color="#color/Primary"/> <!-- focused -->
<item android:color="#color/Primary"/> <!-- default -->
</selector>
Neither of these approaches is amending my button color. I am still always seeing a white button. I purposely chose horrid colors to ensure the change was obvious
What am I doing wrong? What else do you need to see?
UPDATE...........
Following discussion with #rcs I used my original colorstatelist from res/color with the backgroundtint property on the button and it works as intended
My final code:
For each button that requires a different style i have a button color or text color file in res/colors as per below
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#color/KeyActionColorOnPrimary"/>
<item android:state_enabled="true"
android:color="#color/KeyActionPrimary"/>
<item android:state_enabled="false"
android:color="#color/lime"/>
<item android:state_focused="true"
android:color="#color/KeyActionPrimary"/>
<item android:color="#color/KeyActionPrimary"/>
</selector>
Then within my button xml
android:backgroundTint="#color/key_action_button_color" // for button color
android:textColor="#color/key_action_button_text_color" // for text color
e.g.
<Button
android:id="#+id/buttonSTART"
android:layout_width="#dimen/btn_width"
android:layout_height="#dimen/btn_height"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="16dp"
android:backgroundTint="#color/key_action_button_color"
android:padding="#dimen/btn_padding"
android:text="#string/btn_start"
android:textColor="#color/key_action_button_text_color"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnSCORES"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
This works with no additional styles. I can keep my material design theme without the button style being set to apt compat style. I am only using the above attributes in the layout xml for the button i want to have these styles
Since the first condition in your color_state is `android:state_enabled="true", which is always the case, thereby resulting in the same color. Get rid of it to notice the color changes
Refer the official docs for more info and try to use a color file resource instead of drawable as the docs says,
ColorStateLists are created from XML resource files defined in the "color" subdirectory directory of an application's resource directory
Edit:
As mentioned in this answer, applying the colorstate as a style to the Button tag should solve the issue
create a new style
<style name="AppTheme.CustomButtonStyle" parent="#style/Widget.AppCompat.Button.Colored">
<item name="android:backgroundTint">#color/state_controlled_key_action_button</item>
</style>
Activity
<Button
android:id="#+id/your_button_id"
style="#style/AppTheme.CustomButtonStyle"/>

Material Design TextInputEditText Border Color When Not Activated

I'm placing a TextInputEditText widget onto a white background. When the fragment first loads, the widget does not have focus. The border around the widget is white (or almost white), so it is invisible on a white background. Here is a screenshot of that widget, drawn on a black background for contrast:
As soon as I tap on the widget, the border becomes that of my primary color, which is exactly what I want. Here is a similar screenshot after the widget is activated.
I'm trying to control these colors through a style, and I've tried everything that I can think of, but I cannot figure out how to adjust that color. Here is my style (feel free to laugh at the various attempts):
<style name="MyTextInputLayout" parent="Base.Widget.MaterialComponents.TextInputLayout">
<item name="android:colorBackground">#android:color/black</item>
<item name="android:textColorHint">#color/colorPrimary</item>
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
<item name="android:colorControlActivated">#android:color/black</item>
<item name="android:colorControlNormal">#android:color/black</item>
<item name="android:colorControlHighlight">#android:color/black</item>
<item name="android:backgroundTint">#android:color/black</item>
<item name="android:colorAccent">#android:color/black</item>
</style>
<style name="MyTextInputEditText" parent="ThemeOverlay.MaterialComponents.TextInputEditText">
<item name="android:textColor">#android:color/black</item>
<item name="android:colorBackground">#android:color/black</item>
<item name="android:colorControlActivated">#android:color/black</item>
<item name="android:colorControlNormal">#android:color/black</item>
<item name="android:colorControlHighlight">#android:color/black</item>
<item name="android:backgroundTint">#android:color/black</item>
<item name="android:colorAccent">#android:color/black</item>
</style>
And finally, the xml of the layout in case it is helpful:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
style="#style/MyTextInputLayout">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/reg_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/username"
style="#style/MyTextInputEditText"/>
</com.google.android.material.textfield.TextInputLayout>
How can I change this border color when the widget is not active (i.e. does not have focus)?
I solved this in two main steps:
First problem I had was that the parent style for my TextInputLayout style needed to be changed to Widget.MaterialComponents.TextInputLayout.OutlinedBox.
Once I figured that out, I traced through the Android xml for that style and got to a file called mtrl_box_stroke_color.xml. This is a selector where the three colors for the standard TextInputLayout border are declared. That file looks like this:
So I copied that and created my own file in the res/color folder that I called edit_text_box_border.xml. I modified the three colors to suit my purposes, ultimately coming up with this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_focused="true"/>
<item android:alpha="0.87" android:color="#color/colorPrimary" android:state_hovered="true"/>
<item android:alpha="0.12" android:color="#color/colorPrimary" android:state_enabled="false"/>
<item android:alpha="0.38" android:color="#color/colorPrimary"/>
</selector>
Then, back in my style, I had to get rid of my many color attempts and add an item for boxStrokeColor that pointed to this file. Here are both styles:
<style name="MyTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:textColorHint">#color/colorPrimary</item>
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
<item name="boxStrokeColor">#color/edit_text_box_border</item>
</style>
<style name="MyTextInputEditText" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.Dense">
<item name="android:textColor">#android:color/black</item>
</style>
Now, when I run the app, I start out with this:
Which then turns into this when I tap on it:
That's what I was going for, so problem solved. Hope this helps someone.
1.
<com.google.android.material.textfield.TextInputLayout
...
style="#style/Widget.MaterialComponents.TextInputLayout.OutlineBox"
app:boxStrokeColor = "#android:color/holo_purple"
//border color when in active status
...
2. add the following in colors.xml file
<color name="mtrl_textinput_default_box_stroke_color">#00ff00</color>
//border color when in inactive status
Add
app:boxStrokeColor="#color/black"
app:hintTextColor="#color/black"
to your XML file. I tried all the color options. You can replace the "#color/black" with any color HEX code. Also write app:color and android will show you all the color options, there are many color fields that can be changed, like the error field which we can set to red to indicate the user has entered Invalid Data.
In case you need to change the outline color dynamically (for automatic field validation, for example) you can use the following hack:
Set
app:errorTextColor="#color/colorAccepted"
app:errorIconTint="#color/colorAccepted"
for TextInputLayout in xml.
Then in code:
text_input_layout.errorIconDrawable = null to remove the error icon
and text_input_layout.error = " " to enable the coloring or text_input_layout.error = null to disable it.
This way TextInputLayout takes more space. To resolve this you can customize the errorTextAppearance by defining your own style:
<style name="ErrorTextStyle" parent="TextAppearance.MaterialComponents.Caption">
<item name="android:textSize">0sp</item>
</style>
Note:
That's clearly a hack rather than a proper solution.
I use this:
<style name="TextInputLayoutTheme" parent="TextAppearance.AppCompat">
<item name="android:textColorHint">#color/secondaryTextLight</item>
<item name="android:backgroundTint" tools:targetApi="lollipop">#color/colorAccent</item>
<item name="android:textColor">#color/white</item>
<item name="colorControlActivated">#color/colorAccent</item>
</style>
and in the xml:
<com.google.android.material.textfield.TextInputEditText
style="#style/TextInputLayoutTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

Change highlight in spinner

PROBLEM
I've tried to change the select highlight in my application but with no luck.
I've been doing it via styles because I have quite a lot of them in my app.
I would be grateful if you have told me what is wrong with my code.
CODE
<style name="AppTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionOverflowButtonStyle">#style/MyActionBar</item>
<item name="android:imageButtonStyle">#style/MyImgBtn</item>
<item name="android:spinnerDropDownItemStyle">#style/mySpinnerItemStyle</item>
<item name="android:spinnerStyle">#style/MySpinnerTheme</item>
<item name="android:windowBackground">#android:color/white</item>
</style>
<style name="MySpinnerTheme" parent="android:Widget.Holo.Light.Spinner">
<item name="android:activatedBackgroundIndicator">#drawable/custom_activated_background</item>
</style>
UPDATE
So I've managed to merge two selectors with setting style on setDropDownViewResource layout element. But what I get at the moment are two selectors appearing at the same time.
I've tried to set android:dropDownSelector="#android:color/transparent" on Spinner in XML but still no luck. Posting more code below.
SPINNER
final Spinner yearSpinner = (Spinner) rootView.findViewById(R.id.yearSpinner);
ArrayAdapter<SpinnerItem> adapterYear = new ArrayAdapter<SpinnerItem>(getActivity(),
R.layout.spinner_item_layout , yearsItems);
yearSpinner.setOnItemSelectedListener(itemSelectedListener);
yearSpinner.setAdapter(adapterYear);
<Spinner
android:id="#+id/yearSpinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:dropDownSelector="#android:color/transparent"
android:layout_below="#id/yearTxt"
android:layout_marginLeft="20dp"
android:popupBackground="#drawable/podpowiedzi"
android:layout_marginRight="20dp"
android:layout_centerHorizontal="true"
>
</Spinner>
SPINNER_ITEM_LAYOUT
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="#style/mySpinnerItemStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:ellipsize="marquee"
android:singleLine="true"
android:textStyle="italic"
android:textAlignment="inherit"
android:textColor="#color/text_color"
>
</TextView>
To change the style and colours of your spinner drop down items add the following to your style.xml
<style name="mySpinnerItemStyle" parent="#style/android:Theme.Holo">
<item name="android:background">#drawable/spinner_selector</item>
<item name="android:gravity">center_vertical</item>
</style>
And then create the "spinner_selector.xml" in your drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true" android:drawable="#color/orange" /> <!-- current selected -->
<item android:state_pressed="true" android:drawable="#color/orange_bright" />
<item android:drawable="#android:color/transparent" />
</selector>
If you want to custom highlight colour when you press on the spinner, we need 9 patch images for spinner backgrounds. Do the following steps:
1) visit this website:http://android-holo-colors.com/, select Spinner, select the colour you want for your spinner highlight and download the zip file. (there are many other options depends on your app)
2) In the zip file open res-->drawable and save file "apptheme_spinner_background_holo_light.xml" to your drawable folder
3) save the following images in the right drawable folders:
apptheme_spinner_default_holo_light.9.png
apptheme_spinner_disabled_holo_light.9.png
apptheme_spinner_focused_holo_light.9.png
apptheme_spinner_pressed_holo_light.9.png
4) add this to your style.xml file:
<style name="MySpinnerTheme" parent="#android:Widget.Holo.Light.Spinner">
<item name="android:background">#drawable/apptheme_spinner_background_holo_light</item>
</style>
In future, you can auto generate any style you want with all the resources required (including spinner highlight colour) thr this website:
http://android-holo-colors.com/

Spinner does not apply dropDownSelector attribute

I'm using spinner and want to add spinner - to change behavior depends of states(focused, pressed)
sample project is here https://github.com/vovs/spinner_issue
My code:
activity_main.xml
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:spinnerMode="dropdown"
android:dropDownSelector="#drawable/spinner_state" />
spinner_state.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="false"
android:drawable="#color/black" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#color/red" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#color/red" />
<item
android:state_enabled="true"
android:drawable="#color/gray" />
</selector>
AndroidManifest:
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="16" />
So, if I run app in emulator Android 4.0.2 API 14 and try to select some item or scroll using wheel of my mouse no any effect, that I set in selector(when press or scrolling - items should be red, but it is blue - default for ICS color).
For Android 2.2 API 8 when press or scroll using wheel(in this case state is focused) color is yellow[orange](default color for Android 2.2)
How to enable selector for spinner?
also an official bug...
https://code.google.com/p/android/issues/detail?id=24922
what helps:
<resources>
<style name="Theme.MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:dropDownListViewStyle">#style/Theme.MyListView</item>
</style>
<style name="Theme.MyListView" parent="#android:style/Widget.Holo.Light.ListView">
<item name="android:listSelector">#drawable/orange_list</item>
</style>
</resources>
good luck!
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#color/lighter_gray_no_transparent" />
<item android:state_selected="true" android:drawable="#color/lighter_gray_no_transparent" />
<item android:state_pressed="true" android:drawable="#color/lighter_gray_no_transparent" />
<item android:drawable="#android:color/transparent"/>
</selector>
<color name="lighter_gray_no_transparent">#FFDDDDDD</color>
set backgroud selector for your item view, that's all. Work for me. The color alpha value should be FF, or it will show orange background, left one color value is #FFDDDDDD, the right one is #55DDDDDD
There may be other ways but here's what I understand from using one of the Generators.
Declare your own style for the spinner in your res/values/styles.xml pointing to your drawable.
<style name="myCustomSpinner" parent="android:Widget.Holo.Light.Spinner">
<item name="android:background">#drawable/spinner_state</item>
</style>
Create res/values/themes.xml and declare your own theme that inherits from the current theme. Within this theme, add an item for each attribute you're modifying and point it to your custom style from the last step. I think this could go in the styles file if you wanted, but since the generator separates them I follow suit.
<style name="myCustomTheme" parent="android:Theme.Light">
<item name="android:dropDownSpinnerStyle">#style/myCustomSpinner</item>
</style>
In your AndroidManifest, add android:theme="#style/myCustomTheme" to the opening application tag.
Your values for parent will depend on how the project is setup and I think this will style of the spinners in your project and not just one. Try it out and let me know what you get.

Android Honeycomb: How to style right corner arrow in spinner on an ActionBar

This is a pretty specific question. I have a spinner on an ActionBar that is added in the onCreate() method. I have been able to style the text white, but I can't get the underline and the triangle/arrow at the bottom right to appear as white. Here is my styling:
<item name="android:actionDropDownStyle">#style/customActionBarDropDownStyle</item>
<style name="customActionBarDropDownStyle" parent="android:style/Widget.Holo.Light.Spinner">
<item name="android:textColor">#FFFFFF</item>
</style>
I can't find a style item/property that makes the underline and triangle white. Does one exists?
Here's an example. I have highlighted in red the triangle and underline that I want to make white.
A bit late answer, but better than never :)
You should create a new 9 patch drawable and set it as a background to android:actionDropDownStyle.
here is an example:
<item name="android:actionDropDownStyle">#style/customActionBarDropDownStyle</item>
<style name="customActionBarDropDownStyle"parent="android:style/Widget.Holo.Light.Spinner">
<item name="android:background">#drawable/custom_spinner_dropdown</item>
</style>
You can't set a color to almost every native component, as their backgrounds are (in most cases) 9-patch pngs.
The actionDropDownStyle can not used to change the style of spinner you added on actionbar; its for one of the actionbar mode ActionBar.NAVIGATION_MODE_LIST;
As for your problem, you can define a selector for your spinner in the layout file,just like this:
enter code here
<Spinner
android:dropDownWidth="200dp"
android:background="#drawable/actionbar_spinner"
android:id="#+id/action_spinner"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="10dp" />
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:drawable="#drawable/spinner_ab_disabled" />
<item android:state_pressed="true"
android:drawable="#drawable/spinner_ab_pressed" />
<item android:state_pressed="false" android:state_focused="true"
android:drawable="#drawable/spinner_ab_focused" />
<item android:drawable="#drawable/spinner_ab_default" />
</selector>
Try this : android:background="#null"

Categories

Resources