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/
Related
In my app I get a color scheme for the app from the server. I update colors for all app views according to the server settings. My question is related to updating colors of EditText in the selected state:
I can change a background color of selection, using the editText.setHighlightColor() method, but can I somehow change a color of blue drag views at the left and right bottom corners? I can't change the color, using the colorAccent style attribute, as I get the color from the server at runtime. Can I change the drag views dynamically?
Here is full example, custom TextInputLayout colors:
in your custom *.xml file, check properties style and android:theme
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/txtConfirmPassword"
style="#style/TextInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="9dp"
android:hint="#string/confirm_password_hint"
android:importantForAutofill="no"
app:hintAnimationEnabled="false"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
style="#style/TextInputEditTextStyle"
android:layout_width="match_parent"
android:layout_height="48dp"
android:hint="#string/password_hint"
android:inputType="textPassword"
android:singleLine="true"
android:theme="#style/TextInputEditTextTheme" />
</com.google.android.material.textfield.TextInputLayout>
in your themes.xml file
<style name="TextInputEditTextStyle">
<item name="android:textColor">#color/main_text</item>
</style>
<style name="TextInputEditTextTheme">
<item name="android:textColorHighlight">#color/gray2</item> <!-- background of selected text -->
<item name="android:colorControlActivated">#color/main_text</item> <!-- cursor -->
</style>
you can custom TextInputLayout's border, by adding this to themes.xml
<style name="TextInputLayoutStyle" parent="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#color/text_input_layout_tint</item>
<item name="boxStrokeWidth">1dp</item>
<item name="boxStrokeWidthFocused">1dp</item>
<item name="boxCornerRadiusBottomEnd">8dp</item>
<item name="boxCornerRadiusBottomStart">8dp</item>
<item name="boxCornerRadiusTopStart">8dp</item>
<item name="boxCornerRadiusTopEnd">8dp</item>
</style>
file #color/text_input_layout_tint:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/action_yes" android:state_focused="true" />
<item android:color="#color/stroke" />
</selector>
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.
i have a List view with seperators, for the header i am using this xml:
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list_header_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="2dip"
android:paddingBottom="2dip"
android:paddingLeft="5dip"
android:textSize="20sp"
style="?android:attr/listSeparatorTextViewStyle" />
By using listSeparatorTextViewStyle the default color is gray, how can i change that color or add an image ?
You'll need to create your own style.
The Android Source code is a best friend for quickly gathering and building system styled themes.
Follow this path from the source code you've downloaded via Android SDK Manager
platforms/android-19/data/res/values
You'll find something like this inside styles.xml:
For Dark theme:
<style name="Widget.Holo.TextView.ListSeparator" parent="Widget.TextView.ListSeparator">
<item name="android:background">#android:drawable/list_section_divider_holo_dark</item>
<item name="android:textAllCaps">true</item>
</style>
For Light theme
<style name="Widget.Holo.Light.TextView.ListSeparator" parent="Widget.TextView.ListSeparator">
<item name="android:background">#android:drawable/list_section_divider_holo_light</item>
<item name="android:textAllCaps">true</item>
</style>
By following the path the code mentioned above, you'll get all the assets/images you need to build your own one.
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.
I'm trying to create a theme for my first Android app, and it is driving me round the bend. I finally managed to figure out how to style items in a dropdown list, but now I can't change the colour of the divider between list items. I have searched similar questions on stackoverflow, and tried dozens of combinations, but nothing seems to work.
Here is my styles.xml file (abbreviated for clarity):
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme" parent="android:Theme.Light">
<item name="android:spinnerStyle">#style/spinnerStyle</item>
<item name="android:spinnerDropDownItemStyle">#style/spinnerDropDownItemStyle</item>
<item name="android:dropDownListViewStyle">#style/spinnerListViewStyle</item>
</style>
<style name="spinnerStyle" parent="#android:style/Widget.Spinner">
<item name="android:background">#drawable/my_theme_spinner</item>
</style>
<style name="spinnerDropDownItemStyle" parent="#android:style/Widget.DropDownItem.Spinner">
<item name="android:background">#drawable/my_theme_spinner_item</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:gravity">center_vertical</item>
</style>
<style name="spinnerListViewStyle" parent="#android:style/Widget.ListView.DropDown">
<item name="android:height">3dp</item>
<item name="android:dividerHeight">3dp</item>
<item name="android:divider">#color/divider</item>
</style>
</resources>
No matter what I do, I just get a 1dp light grey divider between items (which can barely be seen with my light coloured list item background) - neither the height nor colour of the divider is ever affected (I also tried setting it to a drawable, also with no effect). What am I doing wrong?
I have a very simple Activity with the Spinner and it works for the following. The only difference I see is that you have a <item name="android:height">3dp</item> and I don't have that at all.
<style name="TestSpinnerStyle" parent="android:style/Widget.ListView.DropDown">
<item name="android:divider">#ff0000</item>
<item name="android:dividerHeight">5dp</item>
</style>
<style name="SampleTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:dropDownListViewStyle">#style/TestSpinnerStyle</item>
</style>
and in my Activity I have:
Spinner spinner = (Spinner) findViewById(R.id.spinner);
List<String> list = new ArrayList<String>();
list.add("list 1");
list.add("list 2");
list.add("list 3");
ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item, list);
dataAdapter.setDropDownViewResource(android.R.layout.simple_dropdown_item_1line);
spinner.setAdapter(dataAdapter);
and then for the main layout I have the following XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello World, StylingActivity"
/>
<Spinner android:id="#+id/spinner"
android:layout_width="250dp"
android:layout_height="40dp"
/>
</LinearLayout>
Here is the screenshot
If you can't get it to work from there, I can push up the entire thing to a github repo for you.
You could add a horizontal line to the dropdown layout you use, which would effectively create a divider.
EDIT
Some further searching found this:
SO Answer
Which basically says what you show you are trying to do above should work... although it mentions setting that style in your activity theme and you don't mention doing that.
You can do it in your layout.xml
<Spinner
android:id="#+id/sp_to_create"
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_marginBottom="10dp"
style="#style/spinner_style"
android:prompt="#string/to_type_prompt" />
XML STYLES ADD it
<style name="spinner_style" parent="Widget.AppCompat.ListView.DropDown">
<item name="android:divider">#d1d1d1</item>
<item name="android:dividerHeight">0.5dp</item>
</style>
Add to your Activity Theme
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:dropDownListViewStyle">#style/spinner_style</item>
</style>
JAVA FILE
your_spinnerList.setAdapter(new ArrayAdapter<>(getActivity(), android.R.layout.simple_dropdown_item_1line, timeOff_type_list));
Let me know if it had been useful for you! Have a nice day!
The style method in the accepted answer works well until you need two spinners with different divider colors.
Here is what I found works as an alternative:
a) Set the popupBackgroundColor attribute on the spinner to the color you want for the divider. This will color the entire list item's background (including the space we think of as the divider).
b) Set the spinners adapters dropDownViewResource to be a CheckedTextView with it's background attribute set to some other color (or a selector if you want the selected items to have a different color). This will override the color we set in step a for everything but the divider. effectively giving us the desired result.
So you will have:
drawable/spinner_dropdown_background_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/your_unchecked_color" android:state_checked="false"/>
<item android:drawable="#color/your_checked_color" android:state_checked="true"/>
<item android:drawable="#color/your_unchecked_color"/>
</selector>
layout/drop_down_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:background="#drawable/spinner_dropdown_background_selector"
android:textColor="#android:color/white"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee" />
Your spinner definition:
<Spinner
...
android:popupBackground="#color/your_divider_color"
...
/>
And finally your array adapter definition:
ArrayAdapter<String> dataAdapter = new ...
dataAdapter.setDropDownViewResource(android.R.layout.drop_down_item);
spinner.setAdapter(dataAdapter);
Please note that setting the popupBackgroundColor has no effect if the spinner is in dialog mode.