Develop Reference

My switch does not turn to my style colors

I have just started making an android app just as something other than just C++ so that I learn more things and test more thing on my way to become a programmer. I don't know why, (well I wouldn't be here if I knew why), but a switch for light/dark mode, I am using Android studio for my basic app using a map doesn't react to the style I put on it. I tried with compat, I tried with material - it makes little difference (the compat is whole white and material is in standard theme color. And btw. I still haven't made the mechanics connected to switch in java so I'm testing it on light theme right now.
In short - my switch doesn't turn grey even though I gave it a style.
My theme file
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Spyo" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/blue_light</item>
<item name="colorPrimaryVariant">#color/blue_med</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
<style name="Switch_style" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- active thumb & track color (30% transparency) -->
<item name="colorControlActivated">#color/grey_light
</item>
<!-- inactive thumb color -->
<item name="colorSwitchThumbNormal">#color/grey_dark
</item>
</style>
</resources>
My activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="100dp"
android:layout_marginBottom="50dp"
map:layout_constraintBottom_toBottomOf="parent"
map:layout_constraintEnd_toEndOf="parent"
map:layout_constraintStart_toStartOf="parent"
map:layout_constraintTop_toBottomOf="#+id/ldm_switch"
tools:context=".MapsActivity" />
<com.google.android.material.switchmaterial.SwitchMaterial
android:id="#+id/ldm_switch"
style="#style/Switch_style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:text="#string/light_mode_dark_mode"
map:layout_constraintEnd_toEndOf="parent"
map:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

When you use a SwitchMaterial component you can use the app:thumbTint attribute to change the Thumb colour and the app:trackTint attribute to change the Track colour.
Below is a sample of the above attributes in xml:
<com.google.android.material.switchmaterial.SwitchMaterial
android:id="#+id/switchMaterial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Switch"
android:checked="false"
app:thumbTint="#color/switch_thumb_selector_color"
app:trackTint="#color/switch_track_selector_color"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
where #color/switch_thumb_selector_color is the Thumb colour state selector in res/color folder and will be like below:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#android:color/holo_green_dark" android:state_checked="true"/>
<item android:color="#android:color/holo_red_dark"/>
</selector>
and #color/switch_track_selector_color is the Track colour state selector in res/color folder and will be like below:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#android:color/black" android:state_checked="true"/>
<item android:color="#android:color/black"/>
</selector>
And the Result when the Switch checked state is false is like:
And the Result when the Switch checked state is true is like:

Android - spotShadowAlpha only for linearlayout

I am using the elevation attribute for my linearlayout, but the shadow is to bright. I need a darker shadow only for the linear layout.
I added android:spotShadowAlpha to my styles.xml. It worked, but not only for the linear layout. Every View has a darker shadow.
Styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:ambientShadowAlpha">0</item>
<item name="android:spotShadowAlpha">0.55 </item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
linearlayout in activity_main.xml
<LinearLayout
android:id="#+id/linl"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_marginStart="55dp"
android:layout_marginTop="208dp"
android:layout_marginEnd="56dp"
android:layout_marginBottom="209dp"
android:background="#drawable/custom_buttom"
android:elevation="70dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
Background #drawable/custom_buttom
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners android:radius="999dp"/>
</shape>

DISCLAIMER: ONLY WORKS CORRECTLY FOR API 28 AND ABOVE
I know this question is kind of old, but i ran into the same problem. This guy has a pretty good solution. Essentially you set android:ambientShadowAlpha and android:spotShadowAlpha to 1. then you can use SetOutlineAmbientShadowColor and SetOutlineSpotShadowColor using a value that contains an alpha value to set it on an item by item basis. For everything else these act as the default shadow colors with system default alpha values:
<color name="defaultOutlineAmbientShadowColor">#0A000000</color> <color name="defaultOutlineSpotShadowColor">#30000000</color>
These are set in styles.xml:
<item name="android:ambientShadowAlpha">1</item> <item name="android:outlineAmbientShadowColor">#color/defaultOutlineAmbientShadowColor</item> <item name="android:spotShadowAlpha">1</item> <item name="android:outlineSpotShadowColor">#color/defaultOutlineSpotShadowColor</item>

android:ambientShadowAlpha and android:spotShadowAlpha theme attributes values are used at pretty low level, so there is no way to set specific values to these attributes for particular view of hierarchy (even using theme overlay approach).
It is possible to set custom values statically per activity basis:
create custom theme derived from your app theme and override android:ambientShadowAlpha and android:spotShadowAlpha in it:
<style name="Theme.YourApp" parent="...">
...
</style>
<style name="Theme.YourApp.StrongShadows">
<item name="android:ambientShadowAlpha">1</item>
<item name="android:spotShadowAlpha">1</item>
</style>
In manifest set this theme for your activity:
<application
android:theme="#style/Theme.YourApp">
<activity android:name=".ActivityWithDefaultShadows" />
<activity
android:name=".ActivityWithStrongShadows"
android:theme="#style/Theme.YourApp.StrongShadows" />
</application>
The best effort you can make at the moment to have better shadow customization is the approach that #ottermatic suggested in his answer (which of course works only for API level 28 and above). I'll describe it more accuratly:
in themes.xml file in values resources folder define base app theme and app theme derived from based without mentioned attributes:
<style name="Base.Theme.YourApp" parent="...">
...
</style>
<style name="Theme.YourApp" parent="Base.Theme.YourApp"/>
in themes.xml file in values-v28 override app theme for api versions 28 and above:
<style name="Theme.YourApp" parent="Base.Theme.YourApp">
<item name="android:ambientShadowAlpha">1</item>
<item name="android:spotShadowAlpha">1</item>
<item name="android:outlineAmbientShadowColor">#color/defaultOutlineAmbientShadowColor</item>
<item name="android:outlineSpotShadowColor">#color/defaultOutlineSpotShadowColor</item>
</style>
We set android:ambientShadowAlpha and android:spotShadowAlpha to 1 so they do not influence the shadow color. And instead we can customize shadow by changing android:outlineAmbientShadowColor and android:outlineSpotShadowColor attributes - they have reasonable default values (for default shadows to be similar to shadows on previous api versions) set in app theme but also their values can be overriden for each separate view:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:text="Button with default theme shadow"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button2"
android:outlineAmbientShadowColor="#55FF0000"
android:outlineSpotShadowColor="#55FF0000"
android:text="Button with custom red shadow"
app:layout_constraintTop_toBottomOf="#id/button1"
app:layout_constraintStart_toEndOf="#id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>

How to disable padding on TextInputLayout?

There appears to be left padding automatically added when using a TextInputLayout to wrap an EditText as you can see in the screenshot below.
There is no padding added to the EditText in the layout XML, but when the view is rendered there appears to be left padding on the EditText. You can see this when comparing the TextView below the TextInputLayout.
How do I disable this left padding from being added?
Thank you!

You can just set the start and end padding on the inner EditText to 0dp.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="0dp"
android:paddingEnd="0dp" />
</com.google.android.material.textfield.TextInputLayout>
Here's a screenshot with Show Layout Bounds turned on so you can see that the hints go all the way to the edge of the view.

With the TextInputLayout included in the Material Components Library you can use a custom style to reduce the padding.
Just use something like:
<com.google.android.material.textfield.TextInputLayout
....
android:hint="Hint text"
style="#style/My.TextInputLayout.FilledBox.Padding" >
Then you can define a custom style for the EditText using the materialThemeOverlay attribute:
<style name="My.TextInputLayout.FilledBox.Padding" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="materialThemeOverlay">#style/MyThemeOverlayFilledPadding</item>
</style>
<style name="MyThemeOverlayFilledPadding">
<item name="editTextStyle">#style/MyTextInputEditText_filledBox_padding</item>
</style>
<style name="MyTextInputEditText_filledBox_padding" parent="#style/Widget.MaterialComponents.TextInputEditText.FilledBox">
<!-- left and right padding -->
<item name="android:paddingStart" ns2:ignore="NewApi">2dp</item>
<item name="android:paddingEnd" ns2:ignore="NewApi">2dp</item>
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingRight">2dp</item>
<!-- top and bottom padding -->
<item name="android:paddingTop">28dp</item>
<item name="android:paddingBottom">12dp</item>
</style>
Here the final result:
Note: it requires at least the version 1.1.0 of the Material Components library.

Make the padding 0dp like this
<com.google.android.material.textfield.TextInputLayout
style="#style/UserTextLayout"
android:layout_height="50dp"
app:boxBackgroundMode="none">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/emailEditText1"
style="#style/UserEditText"
android:layout_width="match_parent"
android:hint="MATRIC NUMBER"
android:inputType="number"
android:maxLines="1"
android:padding="0dp"
android:text="20181766" />
</com.google.android.material.textfield.TextInputLayout>
Here is the result

I managed to remove that left space by making a copy of the original theme of the edittext background
res/drawable/my_edit_text_material.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/abc_edit_text_inset_horizontal_material"
android:insetRight="#dimen/abc_edit_text_inset_horizontal_material"
android:insetTop="#dimen/abc_edit_text_inset_top_material"
android:insetBottom="#dimen/abc_edit_text_inset_bottom_material">
<selector>
<item android:state_enabled="false" android:drawable="#drawable/abc_textfield_default_mtrl_alpha"/>
<item android:state_pressed="false" android:state_focused="false" android:drawable="#drawable/abc_textfield_default_mtrl_alpha"/>
<item android:drawable="#drawable/abc_textfield_activated_mtrl_alpha"/>
</selector>
</inset>
res/drawable-v21/my_edit_text_material.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetTop="#dimen/abc_edit_text_inset_top_material"
android:insetBottom="#dimen/abc_edit_text_inset_bottom_material">
<selector>
<item android:state_enabled="false">
<nine-patch android:src="#drawable/abc_textfield_default_mtrl_alpha"
android:tint="?attr/colorControlNormal"
android:alpha="?android:attr/disabledAlpha"/>
</item>
<item android:state_pressed="false" android:state_focused="false">
<nine-patch android:src="#drawable/abc_textfield_default_mtrl_alpha"
android:tint="?attr/colorControlNormal"/>
</item>
<item>
<nine-patch android:src="#drawable/abc_textfield_activated_mtrl_alpha"
android:tint="?attr/colorControlActivated"/>
</item>
</selector>
</inset>
in the two files delete:
android:insetLeft="#dimen/abc_edit_text_inset_horizontal_material"
android:insetRight="#dimen/abc_edit_text_inset_horizontal_material"
Create a new style for your editText and add it as background
/res/values/styles.xml
<resources>
<!-- Other styles . -->
<style name="AppTheme.EditText" parent="Widget.AppCompat.EditText">
<item name="android:background">#drawable/my_edit_text_material</item>
</style>
</resources>
Add the style to your editText
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_lastname"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="0dp"
android:layout_marginStart="0dp"
android:textColorHint="#color/Cool_Gray_2_C"
app:layout_constraintEnd_toStartOf="#+id/profile_guideline_end"
app:layout_constraintStart_toStartOf="#+id/profile_guideline_start"
app:layout_constraintTop_toBottomOf="#+id/input_layout_firstname" >
<EditText
style="#style/AppTheme.EditText"
android:id="#+id/txfLastname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/last_name"
android:inputType="textPersonName"
android:textColor="#color/Cool_Gray_2_C"
android:textColorHint="#color/Cool_Gray_2_C"
android:textSize="17sp" />
</android.support.design.widget.TextInputLayout>
That is the way I found removing the left and right space.
I hope help, thanks

The horizontal space on the left and right of the EditText default drawable is controlled by the abc_edit_text_inset_horizontal_material dimension. You can confirm that by looking at the abc_edit_text_material.xml drawable file, which represents AppCompat's default EditText background. To remove the space completely you can just set the dimension to 0 by specifing the dimension with exact same name inside your own project's dimens.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen tools:override="true" name="abc_edit_text_inset_horizontal_material">0dp</dimen>
...
</resources>
However, there is a catch. AppCompat library will only use it's own abc_edit_text_material.xml background if the host OS doesn't support material design. So If you're running your app on Android 4, you'll see that side margins disappear after you add the dimension mentioned above. If, however, you launch your app on say Android 10, you'll see that margins are still there. That is because on newer Android versions, compat library will actually prefer background drawable specified inside the OS itself.
So you need to force all of your EditTexts to use abc_edit_text_material.xml background specified inside the AppCompat library. Luckily, you can do that just by adding one line to your syles.xml file:
styles.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="editTextBackground">#drawable/abc_edit_text_material</item>
...
</style>
...
</resources>
Any Theme.AppCompat.* will do as a parent theme and of course you have to use this theme as your app's theme in order to get any effect.
This solution uses private AppCompat identifiers (Android Studio will complain about this), but I still think this solution is much cleaner than using negative margins.

<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textField_driver_age"
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:padding="0dp"
android:textColorHint="#color/brown_grey"
app:boxBackgroundColor="#color/white"
app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"
app:endIconMode="none"
app:layout_constraintBottom_toBottomOf="#+id/lable3"
app:layout_constraintStart_toEndOf="#+id/lable3"
app:layout_constraintTop_toTopOf="#+id/lable3">
<AutoCompleteTextView
android:drawablePadding="8dp"
android:drawableEnd="#drawable/ic_email"
android:id="#+id/et_driver_age"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dropDownHeight="250dp"
android:inputType="none"
android:lines="1"
android:padding="0dp"
android:text="30"
android:textColor="#color/greyish_brown"
android:textSize="12sp" />

How to have Material design buttons with different colors in API 21?

Coming from this thread: Android Material Design Button Styles
I couldn't understand how to individually change the colors of the buttons, so that not all buttons are with the same color.
<item name="android:colorButtonNormal">#color/blue</item>
This solution works nice, but it changes the color of all buttons.
In API 22, we can change the color of the different buttons by using the backgroundTint, like so:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="3dp"
android:backgroundTint="#color/orange"
android:text="#string/button1_text"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="18sp" />
How can we do it in API 21 ?
That's the styles.xml that I have:
<style name="AppTheme" parent="#android:style/Theme.Material.Light">
<item name="android:actionBarStyle">#style/actionBarCustomization</item>
<item name="android:spinnerDropDownItemStyle">#style/mySpinnerDropDownItemStyle</item>
<item name="android:spinnerItemStyle">#style/mySpinnerItemStyle</item>
<item name="android:colorButtonNormal">#color/myDarkBlue</item>
</style>
<style name="actionBarCustomization" parent="#android:style/Widget.Material.Light.ActionBar">
<item name="android:background">#color/white</item>
<item name="android:titleTextStyle">#style/actionBarTextColor</item>
</style>
<style name="actionBarTextColor" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/black</item>
</style>

Okay, I figured it out. Here is the way I solved it, I hope it helps someone else too (I am not saying that it's perfect).
I created a drawable material_ripple_effect.xml that looks like that:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/black">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp" />
<solid android:color="#color/myOrange" />
</shape>
</item>
</ripple>
And then in the layout, where I have the button, I just set the ripple drawable as a background. In activity_main.xml:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="3dp"
android:backgroundTint="#color/orange"
android:background="#drawable/material_ripple_effect"
android:text="#string/button1_text"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="18sp" />

Android spinner with underline appcompat

I am using a appcompat theme for my application. Need to know how i can show underline to spinner. It is just showing anchor. I tried setting up underline using android:background but it makes the anchor disappear.

Update your support library and in XML use
Please add this style to your Spinner
style="#style/Base.Widget.AppCompat.Spinner.Underlined"

This is hacky (and not perfect) way to change spinner and underline color in appcompat theme. Main point that I customized Android support library images and xml files to change color.
1) go to support library package and copy 2 images (or download my custom from the bottom of this post)
/your-app/build/intermediates/exploded-aar/com.android.support/appcompat-v7/23.1.0/res/drawable-hdpi/abc_spinner_mtrl_am_alpha.9.png
and
/your-app/build/intermediates/exploded-aar/com.android.support/appcompat-v7/23.1.0/res/drawable-hdpi/abc_textfield_default_mtrl_alpha.9.png
2) Make a copy of those images
3) Change color of abc_spinner_mtrl_am_alpha.9.png (warning: leave black borders as they are, it's for 9 patch)
4) Change color of second bottom line of abc_textfield_default_mtrl_alpha.9.png (you can see in attached small image below)
5) Save and move files to your project drawables
6) Create bottom_line_color.xml drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-6dp" android:left="-6dp" android:right="-6dp">
<shape>
<stroke android:color="#color/brown" android:width="6dp"/>
</shape>
</item>
7) Create spinner_bottom_line.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/abc_control_inset_material"
android:insetTop="#dimen/abc_control_inset_material"
android:insetBottom="#dimen/abc_control_inset_material"
android:insetRight="#dimen/abc_control_inset_material">
<selector>
<item android:state_checked="false" android:state_pressed="false">
<layer-list>
<item android:drawable="#drawable/my_custom_abc_textfield_default_mtrl_alpha" />
<item android:drawable="#drawable/my_custom_abc_spinner_mtrl_am_alpha" />
</layer-list>
</item>
<item>
<layer-list>
<item android:drawable="#drawable/my_custom_abc_textfield_default_mtrl_alpha" />
<item android:drawable="#drawable/my_custom_abc_spinner_mtrl_am_alpha" />
</layer-list>
</item>
</selector>
</inset>
P.S. I couldn't achieve same visual style as default spinner (visual changes shown below). If you start using this custom spinner theme you should use it in all project.
So add to values/styles.xml
<style name="My.Spinner.Style" parent="Base.Widget.AppCompat.Spinner.Underlined">
<item name="android:background">#drawable/spinner_bottom_line</item>
</style>
And use it in application like this:
<Spinner
android:id="#+id/account_spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/My.Spinner.Style"
/>
Important:
You should resize spinner and place to various drawables folders. You can find size in same path as I showed above.
There are few popular sizes:
drawables-mdpi 20x26
drawables-hdpi 29x38
drawables-xhdpi 38x50
drawables-xxhdpi 74x98
You can take my customized images from here:
my_custom_abc_spinner_mtrl_am_alpha:
my_custom_abc_textfield_default_mtrl_alpha:
Spinner example is (xxhdpi), line is mdpi (because we don't need various lines in various drawable folders, so we can have only 1).
Visual difference (from android studio xml preview window) is shown here:
First line is my custom underline spinner, second is default Base.Widget.AppCompat.Spinner.Underlined

Applying style="#style/Base.Widget.AppCompat.Spinner.Underlined" didn't show any difference .Then gave android:backgroundTint and android:backgroundTintMode to spinner and it worked.
<Spinner
android:id="#+id/spBookingType"
android:spinnerMode="dropdown"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Base.Widget.AppCompat.Spinner.Underlined"
android:backgroundTint="#ff000000"
android:backgroundTintMode="src_in" />

in styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:spinnerStyle">#style/holoSpinner</item>
</style>
<style name="holoSpinner" parent="Widget.AppCompat.Spinner.Underlined">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#color/colorPrimary</item>
</style>
========================
in Layout
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<Spinner
android:id="#+id/spinCountry"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/edit_text_bottom_border"
android:paddingBottom="10dp" />
</android.support.design.widget.TextInputLayout>
===============================================
edit_text_bottom_border.xml file in Drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="1dp"
android:left="-3dp"
android:right="-3dp"
android:top="-3dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#535353" />
<!--android:color="#535353" />-->
</shape>
</item>
</layer-list>