Develop Reference

Button color won't change using background attribute in XML

I am trying to customize the design of my application and I ran into this weird problem which I can't figure out a solution for. I am trying to customize my buttons by defining a custom drawable for background in order to change color but also add corners to them, but the problem is when I add the background attribute to the app, whatever value I give to it, whether it's a color or a custom drawable, the color of the buttons becomes colorPrimary and I don't understand why.
Here are the XMLs:
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorSecondary">#color/colorSecondary</item>
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
<item name="android:textColorPrimary">#000000</item>
<item name="android:textColorSecondary">#000000</item>
<item name="android:textColor">#000000</item>
</style>
<style name="AlertDialog" parent="Theme.AppCompat.Light.Dialog" />
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="myCustomMenuTextAppearance" parent="#android:style/TextAppearance.Widget.IconMenu.Item">
<item name="android:textColor">#000000</item>
</style>
</resources>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorAccent">#009B9B</color>
<color name="colorPrimary">#2A3E52</color>
<color name="colorPrimaryDark">#1A2E42</color>
<color name="colorSecondary">#FFFFFF</color>
<color name="red">#BB0000</color>
<color name="yellow">#BBBB00</color>
<color name="green">#00BB00</color>
<color name="white">#FFFFFF</color>
<color name="colorText">#B3BAC5</color>
</resources>
custom_button.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/colorAccent"/>
<corners android:radius="20dp"/>
</shape>
Button definition
<Button
android:id="#+id/signin_button"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="25dp"
android:backgroundTint="#color/colorAccent"
android:background="#color/colorAccent"
android:text="Sign In"
android:textSize="20sp"
android:textColor="#color/white"
android:textAllCaps="false"
android:layout_below="#+id/password_reset2"
android:layout_centerHorizontal="true"/>
Can anyone help me on this one?

As you are using Material theme, for material Button you should simply use app:backgroundTint for more attributes check Material Button
you can set custom background like this
app:backgroundTint="#color/colorAccent"
android:background="your custom background"

Adding button style to AppTheme not working

I've tried to add a custom button style to my AppTheme and it is not working. As a reference, I've added a Spinner style to my AppTheme and it works fine. So, I just need to find out where I'm going wrong with my button style.
style.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:spinnerStyle">#style/mySpinnerStyle</item>
<item name="android:buttonStyle">#style/myButtonStyle</item>
<item name="buttonStyle">#style/myButtonStyle</item>
</style>
<style name="mySpinnerStyle" parent="#style/Widget.AppCompat.Spinner">
<item name="overlapAnchor">true</item>
<item name="android:background">#drawable/spinner_background</item>
<item name="android:padding">5sp</item>
</style>
<style name="myButtonStyle" parent="#style/Widget.AppCompat.Button">
<item name="android:background">#drawable/button_states</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
</style>
I can add my button_states.xml file if needed, but know that the style works if I insert my style directly to a button attribute in my layout like below:
<Button
android:id="#+id/button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="4"
style="#style/myButtonStyle"
android:textSize="#dimen/text_size"
android:text="OK" />
Declaration in Parent layout:
android:theme="#style/AppTheme"
So, why does it work directly in the button attribute but not through my AppTheme?

1- Create new DRAWABLE RESOUCE FILE by right click on res / drawable file in your android studio
2- write code like this in it :-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="100dp"
/>
<solid
android:color="#FFFFFF"
/>
<size
android:width="100dp"
android:height="100dp"
/>
</shape>
3- open your XML file which contain this button and change background of button to the drawable you created before

Thanks to Ahmad Sattout for the answer.
In my button style I removed the #style from the parent:
original:
<style name="myButtonStyle" parent="#style/Widget.AppCompat.Button">
<item name="android:background">#drawable/button_states</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
</style>
changed:
<style name="myButtonStyle" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_states</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
</style>
If anyone can explain in further detail why that happens, it would be greatly appreciated.

Android Gradient Background drawable does not work

I've created this drawable resource, backgroundactivity, to use as my app's background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<item
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<shape
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<gradient
android:angle="90"
android:startColor="#BFEFFF"
android:centerColor="#B0E2FF"
android:endColor="#82CFFD"
android:type="linear"/>
</shape>
</item>
</selector>
I want to set this background on all my activity, so I've tried to put this drawable resource in the styles.xml like this:
<resources>
<!-- Base application theme. -->
<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="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:background">#drawable/backgroundactivity</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="#android:background">#color/colorPrimary</item>
</style>
</resources>
But in this way it didn't work: the background still stay white as default. I've also tried to replace android:background with android:windowBackground, but it causes my application to be completely black.
Thanks in advance!

Try to use windowBackground instead of background
<item name="#android:windowBackground">#color/colorPrimary</item>

It worked by simply editing the background activity.xml to the following:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="90"
android:startColor="#BFEFFF"
android:centerColor="#B0E2FF"
android:type="linear" />
</shape>
</item>
</selector>

android adds a shadow around all my views, How can i remove it?

So this is part of the design that I'm working on it's flat as shown in the image.
Here is the implemented version there is this shadow that I cannot get rid of no matter what and it's not just in CardView component it's around all Views.
Here is the code for the cardView
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/product_item_card"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_margin="#dimen/margin"
android:layout_marginTop="#dimen/half_margin"
android:layout_marginBottom="#dimen/half_margin"
android:background="#color/color_foreground"
card_view:cardCornerRadius="5dp"
android:elevation="0dp"
card_view:cardPreventCornerOverlap="false">
As shown I set the elevation to zero also tried setting LinearLayout elevation to zero and nothing changed
Here is another example including LinearLayout also notice it's around the EditText as well and even the button
here is code for EditText
<EditText
android:id="#+id/fragment_product_details_amount_et"
android:layout_width="60dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:background="#drawable/rounded_corners_with_border_grey"
android:inputType="number"
android:text="1"
android:textAlignment="center" />
here is the drawable
<?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="#color/lightGrey"></solid> // #ADADAD
<stroke android:width="1dp" android:color="#color/grey"/>
</shape>
Here is my styles.xml pretty much the defauls
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/color_primary</item>
<item name="colorPrimaryDark">#color/color_primary_dark</item>
<item name="colorAccent">#color/color_accent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="FullscreenTheme" parent="AppTheme">
<item name="android:actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowBackground">#null</item>
<item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
<item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
</style>
<style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
<item name="android:background">#color/black_overlay</item>
</style>
</resources>
Update:
CardView and Button was fixed as advised by #ZeroOne. LinearLayout and EditText issue still persist.
Added sample code.
Update:
Added styles.xml
Update: issue fixed

use card_view:cardElevation="0dp" instead of android:elevation="0dp"
and for the Button.. just add style="?android:attr/borderlessButtonStyle" to flat the button

Android text selection handles have white background (instead of transparent)

The following screenshot shows my problem:
The text selection handles have a white background and overlay other UI elements. How can I make the background transparent?
Or the better question is actually: what could I possibly have done to make the background white?
Here is the style applied to the EditText:
<style name="TextInputLayout" parent="AppTheme">
<item name="android:background">#color/grey_50</item>
<item name="colorControlNormal">#color/grey_500</item>
<item name="colorControlActivated">#color/grey_900</item>
<item name="colorControlHighlight">#color/grey_900</item>
<item name="backgroundTint">#color/grey_900</item>
<item name="colorAccent">#color/grey_900</item>
<item name="colorPrimary">#color/grey_900</item>
<item name="android:textCursorDrawable">#null</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/grey_500</item>
<item name="colorPrimaryDark">#color/grey_500</item>
<item name="colorAccent">#color/grey_700</item>
<item name="android:colorBackground">#color/grey_50</item>
<item name="android:colorForeground">#color/grey_900</item>
<item name="android:textColorPrimary">#color/grey_900</item>
<item name="android:textColorPrimaryInverse">#color/grey_50</item>
<item name="android:textColorSecondary">#color/grey_900</item>
<item name="android:textColorSecondaryInverse">#color/grey_50</item>
<item name="android:windowBackground">#color/grey_50</item>
<item name="android:textColorHint">#color/grey_700</item>
<item name="android:colorActivatedHighlight">#color/grey_900</item>
<item name="colorControlNormal">#color/grey_700</item>
<item name="colorControlActivated">#color/grey_900</item>
<item name="colorControlHighlight">#color/grey_900</item>
<item name="android:textColorHighlight">#color/grey_500</item>
<item name="android:colorControlNormal" tools:targetApi="lollipop">#color/grey_700</item>
<item name="android:colorControlActivated" tools:targetApi="lollipop">#color/grey_900</item>
<item name="android:colorControlHighlight" tools:targetApi="lollipop">#color/grey_900</item>
<item name="android:stateListAnimator" tools:targetApi="lollipop">#null</item>
<item name="android:statusBarColor" tools:targetApi="lollipop">#color/grey_900</item>
<item name="android:navigationBarColor" tools:targetApi="lollipop">#color/grey_900</item>
</style>
Edit #1
The EditText's XML (note that I see the same behaviour with EditTexts and AppCompatEditTexts):
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_home_autocomplete"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_horizontal_margin_small"
android:layout_marginTop="#dimen/activity_horizontal_margin_small"
android:layout_weight="3.5"
android:background="#null"
android:hint="#string/location"
android:padding="#dimen/activity_vertical_margin_medium"
android:theme="#style/TextInputLayout"
app:hintAnimationEnabled="true"
app:hintEnabled="true"
app:hintTextAppearance="#style/TextAppearance.TextInputLayout">
<AutoCompleteTextView
android:id="#+id/user_home_autocomplete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3.5"
android:dropDownWidth="match_parent"
android:inputType="textAutoComplete"
android:maxLines="1"
android:paddingTop="#dimen/activity_horizontal_margin_small" />
</android.support.design.widget.TextInputLayout>
The Phone I used for the screenshot runs Android 6.0.1 with OxygenOS 3.2.7
Getting rid of all #null elements did not work.

This could happen if you set a background color in your main theme , something like this
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="android:background">#color/white</item>
...
</style>
remove this property solve this issue for me , if you want to setup a background for all your screens set windowBackground instead.
<item name="android:windowBackground">#color/white</item>

As per the android docs, the theme is applied to views used in the layouts of entire activity or application. For individual views in the layout , we need to apply styles.
Ref: https://developer.android.com/guide/topics/ui/themes.html
The theme is applied as a common style for all the views in an activity or application.

Remove this from your theme <item name="android:popupBackground">????</item>

This happens because you set the background as part of the style, and declare android:theme="#style/TextInputLayout" as theme and not as style.
This makes that the children views of that view have the same behaviour including the text selection handler.
Move this line <item name="android:background">#color/grey_50</item> out of the style.

please set the background for the view :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="YOUR_CUSTOM_COLOR" />
<item android:state_selected="true" android:color="#80000000" />
<item android:color="YOUR_CUSTOM_COLOR" />
</selector>

try this may help you
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Pressed State -->
<item android:state_pressed="true"
android:color="#FFFFFF" />
<!-- Focused State -->
<item android:state_focused="true"
android:color="#FFFFFF" /> <!-- use background color here -->
<!-- Default State -->
<item android:color="#000000" />
</selector>
set this property as background to your edit-text