Spinner with border - android

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>

Related

How to set background of MaterialBetterSpinner in android?

This is my Design of campaign_create.xml
Spinner :
<com.weiwangcn.betterspinner.library.material.MaterialBetterSpinner
android:id="#+id/select_city"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Select Category"
android:background="#drawable/rounded_white"
android:textColorHint="#ffffff"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_alignParentStart="true"
android:layout_marginTop="9dp" />
#drawable/rounded_white.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#f2f2f2"/>
<stroke android:width="0.1dp"
android:color="#color/white"/>
<corners android:radius="40dp"/>
</shape>
</item>
</selector>
I want to set background of spinner.
It is drawable file. i set property
android:background="#drawable/rounded_white"
but it didn't work.
How to set background of spinner?
It must be working, but you won't be able to check in preview.
Try setting values(Adapter) to spinner and run the code.
But as per your layout I guess you should take Linear or Relative Layout as parent and keeping Imageview and Spinner inside.
i am used simple spinner control and set background used below code..
<Spinner
android:id="#+id/mySpinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/name"
android:background="#drawable/button_selector_blue"
/>
and button_selector_blue.xml..
<?xml version="1.0" encoding="utf-8"?>
<item android:state_pressed="false">
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary"/>
<padding android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"/>
<corners android:radius="5dp" />
</shape>
</item>
</layer-list>
</item>
create a style for spinner like this :
<style name="spinner_style" parent="Base.Widget.AppCompat.Spinner">
<item name="android:background">#drawable/spinner_custom</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>
<item name="android:popupBackground">#848484</item>
<item name="android:textColor">#000000</item>
</style>
add this style in your spinner :
<Spinner
style="#style/spinner_style"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_margin="5dp" />

how to fix the button from rectangle to rounded rectangle?

I can find many rounded-rectangle button but it is not working to me.
What do I miss?
It is layout.xml:
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:background="#ebf1ff"
android:orientation="vertical">
<LinearLayout
style="#style/wrapperWidthWeightSumOne"
android:paddingTop="50dp">
<Button
android:id="#+id/btnTypeAll"
style="#style/ConsentTypeBtn"
android:layout_width="0dp"
android:layout_weight="0.85"
android:text="All"/>
</LinearLayout>
(...)
</LinearLayout>
This is button's style:
<style name="ConsentTypeBtn">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:onClick">onClick</item>
<item name="android:background">#drawable/selector_btn_consent_all</item>
<item name="android:layout_marginBottom">2dp</item>
<item name="android:singleLine">true</item>
<item name="android:layout_gravity">center</item>
<item name="android:textColor">#fff</item>
</style>
...and this is selector_btn_consent_all.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/consent_type_on">
<shape android:shape="rectangle">
<corners android:radius="4dp" />
<stroke android:width="2dp" android:color="#1F3259"/>
</shape>
</item>
<item android:state_pressed="true" android:drawable="#drawable/consent_type_on"></item>
<item android:drawable="#drawable/consent_type_off"></item>
your selector_btn_consent_all.xml has status like this: when android:state_selected="true", use android:drawable="#drawable/consent_type_on".
So, find consent_type_on.xml at your drawable folder, and it would be rectangle, add <corners android:radius="4dp" />
EDIT
then, make consent_type_on.xml at your drawable folder. example here
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" />
<solid android:color="#android:color/holo_blue_bright" />
</shape>

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>

Categories

Resources