Develop Reference

Change background color of the selected item in Android Spinner

I am working on an android app and using Spinner at many places in my app.
What I want is to change the background color of the selected item of spinner, so that one can easily identify which item is currently selected.
I have already checked this link Setting background color for Spinner Item on selection but doing so will change the selected textview background color but do not change its color in dropdown list and I want to change the background color of the selected textview when I will see the dropdown list.
I want to change the color of selected item in list not on spinner, please see the image below.
How can I do this? Please, can someone help me here?.
Thanks a lot in advanced.

You need to implement below method in your adapter class:
It will help you:
int selectedItem = -1;
ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, list) {
#Override
public View getDropDownView(int position, View convertView, ViewGroup parent)
{
View v = null;
v = super.getDropDownView(position, null, parent);
// If this is the selected item position
if (position == selectedItem) {
v.setBackgroundColor(Color.BLUE);
}
else {
// for other views
v.setBackgroundColor(Color.WHITE);
}
return v;
}
};
dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
mySpinner.setAdapter(dataAdapter);
Now on item selected in spinner put below
selectedItem = position;

Here is solution via XML:
Spinner looks like:
<Spinner
android:id="#+id/settingsSleepingTimePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/spinner_main_button"
android:popupBackground="#color/colorPrimary"
android:textColor="#android:color/white"
android:textSize="20sp"/>
While creating spinner set setDropDownViewResource as custom layout:
adapter.setDropDownViewResource(R.layout.spinner_item);
And spinner_item.xml looks like:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/spinner"
android:textColor="#ffffff"
android:textSize="20sp" />
And finally we set #drawable/spinner like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimaryLight" android:state_hovered="true" />
<item android:drawable="#color/colorPrimaryLight" android:state_selected="true" />
</selector>
Hope my answer will be helpfull!

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#color/spinner_background</item>
</style>
Define Spinner_background color in color folder..

Try creating a selector in the drawable, something like,
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:drawable="#color/colorPrimary" />
<item android:drawable="#android:color/transparent" />
</selector>
And set the spinner background as
android:background="#drawable/spinner_selector"

I've searched the internet for a proper solution to do this without hardcoding the background behaviour in java code.
You can achieve this (setting the selected item background color) using drawables.
What you need to do it set the dropdownViewResource to a custom layout. That layout should look something like this:
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/spinner_item_background"
android:gravity="left"
android:padding="8dp" />
In spinner_item_background.xml, you can define a background for each item state. For example, if you want to have a ripple effect on press, but a solid effect when selected, you can try this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Activated state is the selected item -->
<item android:state_activated="true" android:drawable="#00ff00"/>
<!-- Pressed state is the one the user is interacting with -->
<item android:state_pressed="true" android:drawable="#00ff00"/>
<!-- The rest of the items -->
<item android:drawable="#ffffff"/>
</selector>

Create an int variable public static int posOfItemSpinnerSelected in your Activity:
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
#Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
posOfItemSpinnerSelected=position;
}
#Override
public void onNothingSelected(AdapterView<?> parent) {
}
});
and in your adapter insert this code
if(position== YourActivity.posOfItemSpinnerSelected){
textView.setBackgroundColor(ContextCompat.getColor(mActivity,R.color.item_spinner_selected));
} else {
textView.setBackgroundColor(ContextCompat.getColor(mActivity,R.color.white));
}

Dynamic Spinner with icons inheriting AppCompat theme

I am trying to achieve two things:
Make my Spinners inherit from the AppCompat themes.
Add icons to the spinner elements, as is possible in the Toolbar popup menus.
Since I am not able to achieve the first point I am focusing on that, but I also want to add icons later on. As it is now, my Toolbar popup menus inherit the AppCompat theme, but the Spinners do not, as shown in the pictures below. The first image shows the (proper) popup menu from the Toolbar, while the second shows the popup menu from a Spinner. This is an example of a Spinner that is not inheriting the style. Or should this popup menu style be expected?
I have tried loads of things, so there are likely multiple duplicates of this question, but I am not able to make it work. What can be wrong in the code below? After the theme is inherited correctly, how can I add icons later on? Minimum SDK version is 16, target is 23.
themes.xml:
<resources>
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimary">#color/my_brown</item>
<item name="colorPrimaryDark">#color/my_dark_gray</item>
<item name="colorAccent">#color/my_green</item>
<!-- This is just a test, it makes no difference. -->
<item name="android:spinnerStyle">#style/MySpinnerStyle</item>
</style>
<style name="MyTheme" parent="MyTheme.Base"></style>
<!--
ActionBar style, applied directly to XML elements
-->
<style name="MyActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#color/my_brown</item>
<item name="android:minHeight">?attr/actionBarSize</item>
</style>
<!--
Spinner style, for testing. Also tried applied directly to xml Spinners.
-->
<style name="MySpinnerStyle" parent="#style/Widget.AppCompat.Spinner">
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="android:popupMenuStyle">#style/Widget.AppCompat.Light.PopupMenu</item>
</style>
</resources>
The Spinner is set up as simply as:
ArrayAdapter<String> adapter = new ArrayAdapter<>(getContext(), android.R.layout.simple_spinner_item, mCategories);
mSpinner.setAdapter(adapter);
where mSpinner is the inflated Spinner and mCategories is a String array. In XML the Spinner is defined as
<Spinner
android:id="#+id/my_spinner"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
I have tried adding various styles directly to the Spinner, but it does not work.
In my AndroidManifest.xml I have added the following to the Application tag:
android:theme="#style/MyTheme"

I managed to do it (or to be very close to it) by changing themes and styles like that:
Just add to your theme:
<item name="android:spinnerDropDownItemStyle">#style/MySpinnerItem</item>
Then create a style for MySpinnerItem that inherits from Widget.AppCompat.DropDownItem.Spinner:
<style name="MySpinnerItem" parent="#style/Widget.AppCompat.DropDownItem.Spinner">
<item name="android:textColor">#color/your_text_color</item>
<item name="android:textSize">16sp</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingStart" tools:targetApi="jelly_bean_mr1">16dp</item>
<item name="android:paddingRight">16dp</item>
<item name="android:paddingEnd" tools:targetApi="jelly_bean_mr1">16dp</item>
</style>
That's it for the AppCompat theme.
Finally, if you want to add icons to list items, you have to create a custom layout and set it programmatically. You can follow this tutorial http://android-er.blogspot.sg/2010/12/custom-arrayadapter-for-spinner-with.html that explains it.
Basically you have to:
create a custom layout
create a custom adapter that inherits from ArrayAdapter
implements getCutomView() methods to set your different images for each item
finally set your adapter to the spinner with MyCustomAdapter.createFromResource(this, R.array.my_data, R.layout.my_cutom_item_layout);

The cause of my problem was in the line
ArrayAdapter<String> adapter = new ArrayAdapter<>(getContext(), android.R.layout.simple_spinner_item, mCategories);
Here I am using android.R.layout.simple_spinner_item which is probably meant for the Spinner itself. Using android.R.layout.simple_spinner_dropdown_item instead gives the desired look for the dropdown items.
The difference between those are described in some detail in this question, though the images are for older Android versions.
For reference, here are the two layouts taken directly from the Android source code.
simple_spinner_item
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="?android:attr/spinnerItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:textAlignment="inherit"/>
simple_spinner_dropdown_item
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="?android:attr/spinnerDropDownItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="?android:attr/dropdownListPreferredItemHeight"
android:ellipsize="marquee"/>
Adding icons to the dropdown items
Now, for the icon part, I followed the steps from #euitam and ended up with the following:
MyAdapter:
public class MyAdapter extends ArrayAdapter<String>
{
private String[] mCategories;
private int[] mIcons;
public CategoryDropDownAdapter(Context context, int layoutResourceId, String[] categories)
{
super(context, layoutResourceId, categories);
mCategories = categories;
// Add the same icon to all items, just for testing.
mIcons = new int[mCategories.length];
for (int i = 0; i < mIcons.length; i++)
{
mIcons[i] = R.drawable.my_icon;
}
}
/**
* View for a dropdown item.
* */
#Override
public View getDropDownView(int position, View convertView, ViewGroup parent)
{
View rowView = convertView;
if (rowView == null)
{
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
rowView = inflater.inflate(R.layout.my_spinner_categories_dropdown_item, parent, false);
}
TextView categoryText = (TextView) rowView.findViewById(R.id.my_spinner_dropdown_item_text);
categoryText.setText(mCategories[position]);
ImageView icon = (ImageView) rowView.findViewById(R.id.my_spinner_dropdown_item_icon);
icon.setImageResource(mIcons[position]);
return rowView;
}
/**
* The Spinner View that is selected and shown in the *Spinner*, i.e. not the dropdown item.
* */
#Override
public View getView(int position, View convertView, ViewGroup parent)
{
View spinnerView = convertView;
if (spinnerView == null)
{
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
spinnerView = inflater.inflate(R.layout.my_spinner_categories_spinner_item, parent, false);
}
TextView categoryText = (TextView) spinnerView.findViewById(R.id.my_spinner_item_text);
categoryText.setText(mCategories[position]);
return spinnerView;
}
}
my_spinner_categories_dropdown_item.xml
<?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"
android:orientation="horizontal" >
<ImageView
android:id="#+id/my_spinner_dropdown_item_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!-- Stolen from android.R.layout.simple_spinner_dropdown_item -->
<TextView
android:id="#+id/my_spinner_dropdown_item_text"
style="?android:attr/spinnerDropDownItemStyle"
android:singleLine="true"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ellipsize="marquee" />
</LinearLayout>
my_spinner_categories_spinner_item.xml
<?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"
android:orientation="horizontal" >
<!-- Stolen from android.R.layout.simple_spinner_dropdown_item -->
<TextView
android:id="#+id/my_spinner_item_text"
style="?android:attr/spinnerDropDownItemStyle"
android:singleLine="true"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:ellipsize="marquee" />
</LinearLayout>
And finally, setting the adapter:
MyAdapter adapter = new MyAdapter(getContext(), android.R.layout.simple_spinner_dropdown_item, mCategories);
mSpinner.setAdapter(adapter);

How to change the text color of Spinner drop down items?

I would like to change the text color of the Spinner drop down items to black.
I have a custom Spinner that lists different languages. It has an ImageView and a TextView. The Spinner is shown on a blue background with white text and it looks fine.
The problem is when it is clicked, the drop down shows up but the text is barely visible because of the light gray color of the drop down and the white color of the text.
This is the code for the Spinner in the activity_main.xml:
<Spinner
android:id="#+id/languageSpinner"
style="#android:style/Widget.Material.Light.DropDownItem.Spinner"
android:layout_width="140dp"
android:layout_height="40dp"
android:prompt="#string/selectLanguageSpinner"
android:spinnerMode="dropdown" />
This is the spinner_row_layout.xml:
<?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="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical" />
<TextView
android:id="#+id/language"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:layout_marginStart="5dp"
android:gravity="center_vertical"
android:lineSpacingExtra="20dp"
android:minHeight="40dp"
android:textColor="#color/white"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
Here the text color is set to white, because I need it to be white when nothing is selected.
This is the code in styles.xml:
<!-- Base application theme. -->
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/myAppPrimaryColor</item>
<item name="colorPrimaryDark">#color/myAppPrimaryDarkColor</item>
<item name="colorAccent">#color/myAppAccentColor</item>
<item name="android:dropDownListViewStyle">#style/TestSpinnerStyle</item>
<item name="android:spinnerItemStyle">#style/mySpinnerItemStyle</item>
</style>
<style name="mySpinnerItemStyle">
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingBottom">3dp</item>
<item name="android:textSize">20sp</item>
<item name="android:textColor">#color/white</item>
</style>
<!-- ^^ Here I need to set the color to white, because I also have default
spinner on the activity that needs to have a default white color.
But when the default spinner is clicked, the color of the
drop down items is black. How can I do that with my custom spinner? -->
<style name="TestSpinnerStyle" parent="android:style/Widget.ListView.DropDown">
<item name="android:textSize">22sp</item>
<item name="android:textColor">#color/black</item>
<item name="android:height">20dp</item>
<item name="android:divider">#color/gray</item>
<item name="android:dividerHeight">1dp</item>
<item name="android:dividerPadding">5dp</item>
<item name="android:background">#color/default_gray</item>
</style>
<!-- ^^ The text color property here is not reflected.. -->
Does anybody have any suggestions how to do that?
EDIT: After the help from the comments and the answers, I managed to do it. I thought that it could be done in XML...Anyways in the java code behind, this is what I did:
When the custom adapter is defined, we need to override the getDropDownView method, which is fired when the spinner is clicked and the drop down shows up. The getView method should also be overridden, so we can handle the default color when the Spinner is not clicked. In other words, here is the code:
public class CustomSpinnerAdapter extends ArrayAdapter<String> {
public CustomSpinnerAdapter(Context context, int textViewResourceId, String[] objects, TypedArray image){
super(context, textViewResourceId, objects);
}
#Override
public View getDropDownView(int position, View convertView, ViewGroup parent){
LayoutInflater inflater = getLayoutInflater();
View row = inflater.inflate(R.layout.spinner_row_layout, parent, false);
TextView label = (TextView) row.findViewById(R.id.language);
label.setText(languages_list[position]);
label.setTextColor(getResources().getColor(android.R.color.black));
ImageView icon = (ImageView) row.findViewById(R.id.icon);
icon.setImageDrawable(icons_list.getDrawable(position));
return row;
}
#Override
public View getView(int position, View convertView, ViewGroup parent){
LayoutInflater inflater = getLayoutInflater();
View row = inflater.inflate(R.layout.spinner_row_layout, parent, false);
TextView textView = (TextView) row.findViewById(R.id.language);
textView.setText(languages_list[position]);
textView.setTextColor(getResources().getColor(android.R.color.white));
ImageView icon = (ImageView) row.findViewById(R.id.icon);
icon.setImageDrawable(icons_list.getDrawable(position));
return row;
}
}
Notice that the color of the TextView in getDropDownView is set to black, while in getView it is set to white.

I've done that thing like that, but in BaseAdapter
public View getDropDownView(int position, View convertView, ViewGroup parent) {
View view = convertView;
if (view == null) {
view = inflater.inflate(R.layout.spinner_item, null);
}
TextView txtTestText = (TextView) view.findViewById(R.id.txtSpinnerRowText);
txtTestText.setText(list.get(position).getText());
if (getSelectedPosition() == position) {
txtTestText.setTextColor(context.getResources().getColor(android.R.color.holo_blue_dark));
} else {
txtTestText.setTextColor(context.getResources().getColor(android.R.color.primary_text_light));
}
return view;
}

try this I hope is't work.
((Spinner)findViewById(R.id.spinnergender)).setAdapter(adapter);
((Spinner)findViewById(R.id.spinnergender)).setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
#Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
Log.e("Value",""+position);
((TextView) ((Spinner)findViewById(R.id.spinnergender)).getSelectedView()).setTextColor(getResources().getColor(R.color.cyan));
if(parent.getItemAtPosition(position).toString().equals(getResources().getString(R.string.Gender))) {
((TextView) ((Spinner)findViewById(R.id.spinnergender)).getSelectedView()).setTextColor(getResources().getColor(R.color.Text));
}
}

You should create custom adapter (that extends BaseAdapter) for spinner and on getDropDownView inflate custom spinner_item_dropdown.xml, which is set to your wishes.

Coloring issue when setting Theme.AppCompat.Light.NoActionBar

i've a main activity xml which shows 2 button and 1 EditText and another layout with listview. The problem is my buttons and listview texts are white. I don't know how to resolve this.
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:colorPrimary">#009688</item>
<item name="colorPrimaryDark">#00796b</item>
<item name="android:textColorPrimary">#FFF</item>
<item name="android:textColorSecondary">#FFF</item>
</style>
activity_main.xml (Design view)
You can see here, button isn't visible. But, if i give background as black it shows,
So, i don't want to give the background for each element because that's not a good solution.
Another activity with listactivity :
Here, the same problem.

For your ListView, you can overrider the getView method of the Adapter, then set the TextView color in code.
ArrayAdapter<String> adapter = new ArrayAdapter<String>(getApplicationContext(),
android.R.layout.simple_list_item_1, myList) {
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View view = super.getView(position, convertView, parent);
TextView text = (TextView) view.findViewById(android.R.id.text1);
text.setTextColor(Color.BLACK);
return view;
}
};
And for your button
Button btn = (Button)findViewById(R.id.btn);
btn.setTextColor(Color.BLACK);
or in xml:
<Button android:id="#+id/mybtn"
android:text="text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000" /> <-- set color here -->
Alternatively, your could try using a dark theme such as
Theme.AppCompat.NoActionBar

Spinner Drop-Down Customization

I'm using an ActionBar with a spinner (drop-down), but the thing is that the text on the selection area itself is not supposed to be one of the elements in the list. Moreover, I'm styling the elements in the spinner using a custom adapter, which also customizes the selection area.
Probably a screenshot would be best. This is what I want to achieve:
This is what I currently have:
A snippet from my custom adapter:
public class CategoriesDropDownAdapter extends BaseAdapter{
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater mInflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
convertView = mInflater.inflate(R.layout.categories_drop_down_item, parent, false);
}
Category category = getCategory(position);
ImageView icon = (ImageView) convertView.findViewById(R.id.catIcon);
TextView title = (TextView) convertView.findViewById(R.id.catTitle);
//setting icon, title and background color
icon.setImageDrawable(category.getIcon());
title.setText(category.getTitle());
convertView.setBackgroundColor(category.getBackgroundColor());
//setting the width of the drop-down to take all the layout width
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics metrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(metrics);
convertView.setLayoutParams(new LayoutParams(metrics.widthPixels, 100));
return convertView;
}
}
How can I avoid customizing the selection area (the area on the bar itself) when using a custom adapter? I want that area to be customized differently (without that triangle on the bottom-right, for instance).

You have to apply style for Spinner component in styles.xml
<resources>
<style name="spinner_style">
// Change background
<item name="android:background">#drawable/img</item>
<item name="android:dropDownWidth">fill_parent</item>
<item name="android:showDividers">beginning|middle|end</item>
<item name="android:alignmentMode">alignBounds</item>
<item name="android:dividerHeight">2dp</item>
<item name="android:scrollbars">none</item>
<item name="android:scrollbarAlwaysDrawVerticalTrack">false</item>
<item name="android:scrollbarTrackVertical">#android:color/transparent</item>
<item name="android:dropDownSelector">#android:color/white</item>
<item name="android:requiresFadingEdge">none</item>
</style>
</resources>
In UI Xml file
<Spinner
android:id="#+id/ics_spinner"
style="#style/spinner_style"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="none" />