Develop Reference

Spinner with border

I would like to design a simple spinner like below:
Below is my code:
sinnerBg.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_window_focused="false" android:state_enabled="true"
android:drawable="#android:color/black" />
<item>
<layer-list>
<item>
<shape>
<solid android:color="#ffffff" />
<stroke android:width="1dp" android:color="#000000" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item >
<bitmap android:gravity="right" android:src="#drawable/arrow_down" />
</item>
</layer-list>
</item>
</selector>
In style.xml:
<style name="spinner_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/spinnerBg</item>
<item name="android:layout_margin">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:popupBackground">#000000</item>
<item name="backgroundTint">#ffffff</item>
<item name="android:textColor">#000000</item>
</style>
Spinner in my axml file:
<Spinner
android:layout_width="64.0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10"
android:spinnerMode="dropdown"
android:layout_marginRight="6.0dp"
android:id="#+id/PIC"
android:layout_marginTop="12.5dp"
style="#style/spinner_style" />
The code to populate the spinner:
ArrayAdapter<ViewModel> myAdapter = new ArrayAdapter<ViewModel>(this, Android.Resource.Layout.SimpleSpinnerDropDownItem, InfoList);
_spinner.Adapter = myAdapter;
The selected text color of my spinner is coming white which is why the spinner selected text is not displayed in my page:
What am I missing? Any help?
EDIT
This is happening because my spinner is inside linear layout which has background color white:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
android:background="#color/white">
I want my page to be white. That is the reason I had set white background for root linearlayout.

I managed to solve the issue. Hope it helps. Here is my solution for it:
style.xml:
<style name="spinner_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/gradient_spinner</item>
<item name="android:layout_marginTop">2dp</item>
</style>
gradient_spinner.xml
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<solid android:color="#ffffff" />
<stroke android:width="1dp" android:color="#000000" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item >
<bitmap android:gravity="bottom|right" android:src="#drawable/ic_arrow_down" />
</item>
</layer-list>
</item>
</selector>
I made a change here, added SetDropDownViewResource with custom layout:
ArrayAdapter<AgentViewModel> agentAdapter = new ArrayAdapter<AgentViewModel>(this, Resource.Layout.custom_spinner_item, InfoList);
agentAdapter.SetDropDownViewResource(Resource.Layout.spinner_dropDowm_item_view);
_spinner.Adapter = agentAdapter;
spinner_dropDowm_item_view.xml
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:textColor="#color/white"
android:padding="10dp"
/>
And added spinner_style style to the spinner:
<Spinner
android:layout_width="64.0dp"
android:layout_weight="0.75"
android:ems="10"
android:spinnerMode="dropdown"
android:id="#+id/spinner"
android:layout_marginTop="12.5dp"
android:layout_column="1"
android:layout_columnSpan="3"
android:layout_row="0"
android:layout_columnWeight="3"
android:layout_marginRight="7.0dp"
android:layout_marginBottom="4.5dp"
style="#style/spinner_style" />

You can use
android:spinnerItemStyle
android:spinnerDropDownItemStyle
You are missing to set
textAppearanceSmallPopupMenu
<item name="android:textAppearanceSmallPopupMenu">#style/my_style</item>
Finally
<style name="my_style" parent="#android:style/TextAppearance.DeviceDefault.Widget.PopupMenu.Small">
<item name="android:textColor">#000000</item>
<item name="android:textSize">12sp</item>
</style>

Android : Change the color of radio button in custom layout for spinner

I want to change the color of radio button on being tapped. I am using custom layout with on custom edit text and radio button in it.This is my xml for layout item.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<com.ekcoffee.ekcoffeeapp.widgets.AppTextView
android:id="#+id/textViewCountryCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:paddingRight="#dimen/dimen_10dp"
android:text="+91 (India)"
android:textColor="#color/color_black_text"
android:textSize="#dimen/dimen_16sp"
app:textStyle="#integer/OPEN_SANS_REGULAR" />
</RelativeLayout>
<RadioButton
android:id="#+id/selector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:backgroundTint="#color/color_accent"
android:checked="false"
android:clickable="false"
android:focusable="false"
/>
This is my xml for spinner
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/spinnerCountryCode"
style="#style/spinner_style"
android:layout_width="#dimen/dimen_1dp"
android:layout_height="#dimen/dimen_1dp"
android:layout_alignParentBottom="true"
android:hint="+91"
android:spinnerMode="dialog"
android:textColor="#color/color_splash_screen_text"
android:textColorHint="#color/color_white"
android:textSize="#dimen/dimen_25dp" />
i have used style also for spinner
<style name="spinner_style" parent="Widget.AppCompat.Spinner.Underlined">
<item name="android:background">#color/color_primary</item>
<item name="android:layout_marginLeft">#dimen/dimen_48dp</item>
<item name="android:layout_marginRight">#dimen/dimen_24dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:checkMark">#drawable/ic_radio_checked</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:layout_marginTop">100dp</item>
<item name="android:paddingBottom">5dp</item>
</style>

In your styles.xml put -
<!-- custom style -->
<style name="radionbutton"
parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:button">#drawable/radiobutton_drawable</item>
</style>
Your radio button in xml should look like-
<RadioButton
android:layout_width="wrap_content"
style="#style/radionbutton"
android:checked="false"
android:layout_height="wrap_content"
/>
Now all you need to do is make a radiobutton_drawable.xml in your drawable folder. Here is what you need to put in it-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radio_unchecked" android:state_checked="false" android:state_focused="true"/>
<item android:drawable="#drawable/radio_unchecked" android:state_checked="false" android:state_focused="false"/>
<item android:drawable="#drawable/radio_checked" android:state_checked="true" android:state_focused="true"/>
<item android:drawable="#drawable/radio_checked" android:state_checked="true" android:state_focused="false"/>
</selector>
Your radio_unchecked.xml-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1dp" android:color="#color/colorAccent"/>
<size android:width="30dp" android:height="30dp"/>
</shape>
Your radio_checked.xml-
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:width="1dp" android:color="#color/colorAccent"/>
<size android:width="30dp" android:height="30dp"/>
</shape>
</item>
<item android:top="5dp" android:bottom="5dp" android:left="5dp" android:right="5dp">
<shape android:shape="oval">
<solid android:width="1dp" android:color="#color/colorAccent"/>
<size android:width="10dp" android:height="10dp"/>
</shape>
</item>
</layer-list>
Just replace #color/colorAccent with the color of your choice.

More simple, just set the buttonTint color: (only works on api level 21 or above)
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/radio"
android:checked="true"
android:buttonTint="#color/your_color"/>
in your values/colors.xml put your color in this case a reddish one:
<color name="your_color">#e75748</color>
Result:

int textColor = Color.parseColor(#000000);
yourradiobutton.setButtonTintList(ColorStateList.valueOf(textColor));
put above code inside your button's onClick method

Android doesn't apply background color when a shape is defined

I'm trying to create a style for buttons in my app. In order to do that, I created a drawable file with the corner tag. I also created different styles for different button state (normal and disabled). When I apply the style without setting the background attribute, the button have the correct color. But when I set the background attribute with my drawable file, the text color defined in the style.xml works but not the background color. Here is the code :
values/style.xml :
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:background">#color/background</item>
<item name="android:textColor">#color/text_color</item>
</style>
<style name="ButtonStyle">
<item name="android:background">#color/button_color</item>
</style>
<style name="ButtonDisableStyle">
<item name="android:background">#color/button_color_disabled</item>
<item name="android:textColor">#color/buttonText_color_disabled</item>
</style>
drawable/button_shape.xml :
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="5dp" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
</shape>
main_activity :
<Button
android:id="#+id/newButton"
android:text="#string/generate_first"
style="#style/ButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="30"
android:background="#drawable/button_shape"
/>
I saw several post about the same problem and I know that it is possible to define the button's background color in the drawable/button_shape.xml but I'd like to keep the style and make it works (I want the shape and the style to be separated).
Do you have any idea about it ?

Finally and after more research, I found a solution. I created 3 xml shape files for the button corresponding to 3 different states. Then I created a 4th xml shape file which includes the 3 others.
Finally, I put a reference to the 4th shape xml file into the button style (in values/style.xml). Here is the code :
drawable/button_disabled.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/buttonText_color_disabled"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners android:radius= "5dp" />
</shape>
drawable/button_pressed.xml :
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/button_color_pressed"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners android:radius= "5dp" />
</shape>
drawable/button_enabled.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/button_color"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners android:radius= "5dp" />
</shape>
drawable/button.xml :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="false"
android:drawable="#drawable/button_disabled" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/button_pressed" />
<item
android:state_enabled="true"
android:drawable="#drawable/button_enabled" />
</selector>
values/style.xml :
<style name="Custom_button" parent="#android:style/Widget.Button">
<item name="android:gravity">center_vertical|center_horizontal</item>
<item name="android:textColor">#color/text_color</item>
<item name="android:textSize">16dip</item>
<item name="android:textStyle">bold</item>
<item name="android:background">#drawable/button</item>
<item name="android:clickable">true</item>
</style>
main_activity :
<Button
android:id="#+id/newButton"
android:text="#string/generate_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_below="#id/app_info"
android:layout_centerHorizontal="true"
android:layout_marginTop="35dp"
android:layout_marginBottom="50dp"
style="#style/Custom_button" />

Android add arrow image to spinner

I have created a background drawable that I use for a spinner. I would like to now but an arrow image inside this background. I have tried things like android:drawableRight="arrowimage", but this does not seem to show anything. Does anyone know how I can include an image in my custom background for a spinner?

Create an XML in a drawable folder with any name for example spinner_bg.xml and add this following lines
<?xml version="1.0"
encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="90"
android:endColor="#ffffff"
android:startColor="#ffffff"
android:type="linear" />
<stroke android:width="1dp"
android:color="#504a4b" />
<corners android:radius="5dp" />
<padding android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp" />
</shape>
</item>
<item>
<bitmap android:gravity="bottom|right"
android:src="#drawable/spinner_ab_default_holo_dark_am" />
// you can use any other image here, instead of default_holo_dark_am
</item>
</layer-list>
</item>
</selector>
Add the following lines to your styles.xml which is inside values folder
<style name="spinner_style" >
<item name="android:background">#drawable/spinner_bg</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
</style>
Now add this style to your spinner as
<Spinner android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/spinner_style"
android:popupBackground="#cccccc" />

Aniruddha's solution worked fine for me, when I used JellyBean (4.2.2) or Kitkat (4.4). But unfortunately on Marshmallow (6.0) I have an exception, possible cause explained here: Using drawable resources
I ended up just making a trick and place spinner to LinearLayout with ImageView like this:
<LinearLayout
android:id="#+id/spinner_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/your_arrow_drawable"/>
</LinearLayout>

This works for me. You may be missing the default state. Without posting your code it's hard to tell.
<!-- theme -->
<item name="android:dropDownSpinnerStyle">#style/mySpinnerStyle</item>
<!-- style -->
<style name="mySpinnerStyle" parent="android:Widget.Holo.Spinner">
<item name="android:background">#drawable/mySpinner_background</item>
</style>
<!-- mySpinner_background -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:drawable="#drawable/mySpinner_disabled" />
<item android:state_pressed="true"
android:drawable="#drawable/mySpinner_pressed" />
<item android:state_pressed="false" android:state_focused="true"
android:drawable="#drawable/mySpinner_focused" />
<item android:drawable="#drawable/mySpinner_default" />
</selector>

This has worked for me:
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Light"
android:spinnerMode="dropdown" />

Set your Image ICON On Spinner :
<item>
<layer-list>
<item>
<color android:color="#android:color/white" />
</item>
<item>
<bitmap android:gravity="center_vertical|right" android:src="#drawable/down_arrow" />
</item>
</layer-list>
</item>

Android - Selector with border color?

I have a seelctor that I use on my radioButtons. I need to set a border on each one. Why does the selector below not apply border?
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#integer/short_anim_time">
<item android:drawable="#color/orange"
android:state_pressed="true"/>
<item android:drawable="#color/orange"
android:state_checked="true"/>
<item android:drawable="#color/white"
android:state_focused="true"/>
<item android:drawable="#color/white"/>
<item>
<shape>
<stroke
android:width="2dp"
android:color="#color/orange"/>
<padding
android:left="#dimen/gap"
android:top="#dimen/gap"
android:right="#dimen/gap"
android:bottom="#dimen/gap"/>
</shape>
</item>
</selector>

Simple,
put your border in it's own file.
then add
android:background="#drawable/border"
That's how I got it to work with my image views..
<ImageView
android:id="#+id/iv_icon"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:background="#drawable/border"
android:src="#drawable/foo" />