I want to change the color of the circle of RadioButton in one of my projects, but I could not understand which property to set. The background color is black, so it gets invisible. I want to set the color of the circle to white.
It is simpler just setting 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 file, put your color, in this case a reddish one:
<color name="your_color">#e75748</color>
Result:
If you want to do it by code (also API 21 and above):
if(Build.VERSION.SDK_INT >= 21)
{
ColorStateList colorStateList = new ColorStateList(
new int[][]
{
new int[]{-android.R.attr.state_enabled}, // Disabled
new int[]{android.R.attr.state_enabled} // Enabled
},
new int[]
{
Color.BLACK, // disabled
Color.BLUE // enabled
}
);
radio.setButtonTintList(colorStateList); // set the color tint list
radio.invalidate(); // Could not be necessary
}
Update:
use this one instead
<android.support.v7.widget.AppCompatRadioButton
android:id="#+id/rbtn_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:buttonTint="#color/primary" />
Then add this line into parent layout or Alt + Enter in Android Studio to auto-add
xmlns:app="http://schemas.android.com/apk/res-auto"
A minimum example should look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.AppCompatRadioButton
android:id="#+id/rbtn_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:buttonTint="#color/primary" />
</LinearLayout>
In your program, you should call it like this:
AppCompatRadioButton radioButton = (AppCompatRadioButton) view.findViewById(R.id.rbtn_test);
Basically, this kind of pattern can be applied for all AppCompact types such as AppCompatCheckBox, AppCompatButton, and so on.
Old Answer:
In order to support below android API 21, you can use AppCompatRadioButton. Then use setSupportButtonTintList method to change the color. This is my code snippet to create a radio button.
AppCompatRadioButton rb;
rb = new AppCompatRadioButton(mContext);
ColorStateList colorStateList = new ColorStateList(
new int[][]{
new int[]{-android.R.attr.state_checked},
new int[]{android.R.attr.state_checked}
},
new int[]{
Color.DKGRAY
, Color.rgb (242,81,112),
}
);
rb.setSupportButtonTintList(colorStateList);
Tested result at API 19:
See the Android reference link for more detail.
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:buttonTint="#color/Color" />
This is working on API pre 21 as well as post 21.
In your styles.xml put:
<!-- custom style -->
<style name="radionbutton"
parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:button">#drawable/radiobutton_drawable</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">true</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 file:
<?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 file:
<?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.
Declare a custom style in your styles.xml file.
<style name="MyRadioButton" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">#color/indigo</item>
<item name="colorControlActivated">#color/pink</item>
</style>
Apply this style to your RadioButton via the android:theme attribute.
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Radio Button"
android:theme="#style/MyRadioButton"/>
But only if your activity extends AppCompatActivity.
For under API 21
Create a custom style RadioButton:
File style.xml
<style name="RadioButton" parent="Theme.AppCompat.Light">
<item name="colorAccent">#color/green</item>
<item name="android:textColorSecondary">#color/mediumGray</item>
<item name="colorControlNormal">#color/red</item>
</style>
In the layout, use the theme:
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/RadioButton" />
For API 21 and higher
Just use buttonTint:
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:buttonTint="#color/green" />
You can change the color of radio button's unchecked and checked state by using style in XML.
<RadioButton
android:id="#+id/rb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/RadioButtonStyle" />
In style.xml
<style name="RadioButtonStyle" parent="Theme.AppCompat.Light">
<item name="colorAccent">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
</style>
You can set the desired colors in this style.
You have to use this code:
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Radiobutton1"
app:buttonTint="#color/black" />
Using app:buttonTint instead of android:buttonTint and also android.support.v7.widget.AppCompatRadioButton instead of Radiobutton!
Set the buttonTint property. For example, android:buttonTint="#99FF33".
I made it the short way like this (working on API pre 21 as well as post 21):
Your radio button in XML should look like this
<RadioButton android:id="#+id/radioid"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:button="#drawable/radiodraw" />
In file radiodraw.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" >
<shape android:shape="oval" >
<stroke android:width="1dp" android:color="#000"/>
<size android:width="30dp" android:height="30dp"/>
<solid android:color="#android:color/transparent"/>
</shape>
</item>
<item android:state_checked="true">
<layer-list>
<item>
<shape android:shape="oval">
<stroke android:width="1dp" android:color="#000"/>
<size android:width="30dp" android:height="30dp"/>
<solid android:color="#android:color/transparent"/>
</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="#000"/>
<size android:width="10dp" android:height="10dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
You have to add color transparent for drawing the unchecked status; else it draws a solid black oval.
For those who want to change disable, checked and enabled states you can do the following steps:
<!-- Or androidX radio button or material design radio button -->
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:buttonTint="#color/black"
android:text="Radiobutton1"
app:buttonTint="#color/radio_button_color" />
Then in the color res folder, make a file named "radio_button_color.xml":
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/yellow900" android:state_selected="true" />
<item android:color="#color/yellow800" android:state_checked="true" />
<item android:color="#color/gray800" android:state_enabled="false" />
<item android:color="#color/yellow800" android:state_enabled="true" />
</selector>
Sometimes you just need to override colorControlNormal like this:
<style name="RadioButtonStyle" parent="AppTheme">
<item name="colorControlNormal">#color/pink</item>
<item name="colorAccent">#color/colorPrimary</item>
<item name="android:textColorSecondary">#color/black</item>
</style>
And you will get a button like this:
colorControlNormal is used for the unchecked state and colorAccent for checked.
There is an XML attribute for it:
android:buttonTint="yourcolor"
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/radio"
android:buttonTint="#color/my_color"/>
All buttons will change color, the circle box and the central check.
Just use the android:buttonTint="#color/colorPrimary" attribute on the <RadioButton> tag.
RadioButton by default takes the colour of colorAccent in res/values/colors.xml file.
So go to that file and change the value of
<color name="colorAccent">#3F51B5</color>
to the colour you want.
You can do it this way in XML with the android:buttonTint attribute:
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/radio"
android:checked="false"
android:padding="5dp"
android:buttonTint="#color/radio_color"/>
You can do it this way in Java using android:buttonTint:
// RadioButton ColorStateList
ColorStateList colorStateList = new ColorStateList(
new int[][]{
new int[]{-android.R.attr.state_checked}, // Unchecked
new int[]{android.R.attr.state_checked} // Checked
},
new int[]{
DataUtils.getColorResource(mContext, R.color.colorBlack), // Unchecked
DataUtils.getColorResource(mContext, R.color.colorPrimary) // Checked
}
);
RadioButton radio = findViewById(R.id.radio);
radio.setButtonTintList(colorStateList);
The easiest way is to change colourAccent color in values->colours.xml
but be aware that it will also change other things like edit text cursor color etc..
< color name="colorAccent">#75aeff</color >
I had this problem. If your app has a black background and you have a lot of RadioButtons that are invisible due to the background, it is complicated to edit the android:buttonTint attribute of each one. The best solution is to change the parent theme in your styles.xml file
I changed
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
to
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
So the RadioButtons' circles became a lighter shade of gray and now they are visible even with a black background.
This is my style.xml file:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
To change the radio button color programmatically you can use following:
yourradio button name.buttonDrawable?.setColorFilter(Color.parseColor( color_value), PorterDuff.Mode.SRC_ATOP)
If you have android:buttonTint it wont work and you have to change it to app:buttonTint.
I had to do this after uprading to androidx.
use app:buttonTint instead of android:buttonTint like this:
<com.google.android.material.radiobutton.MaterialRadioButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="English"
android:checked="true"
app:buttonTint="#FF0000"
android:textAppearance="#style/TextAppearance.Material3.TitleSmall"
android:layout_marginHorizontal="16dp"
android:layoutDirection="rtl"
/>
or
<RadioButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="English"
android:checked="true"
app:buttonTint="#FF0000"
android:textAppearance="#style/TextAppearance.Material3.TitleSmall"
android:layout_marginHorizontal="16dp"
android:layoutDirection="rtl"
/>
create a drawable file my_compound_button_color_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#color/text_app_color"/>
<item android:state_checked="true" android:color="#color/text_app_color"/>
<item android:color="#color/gray"/> </selector>
add style in style.xml file
<style name="AppRadioAppStyle" parent="Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:textColor">#drawable/my_compound_button_color_selector</item>
<item name="drawableTint">#drawable/my_compound_button_color_selector</item>
</style>
layout file
<RadioButton
android:id="#+id/radio1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="#null"
android:drawableBottom="?android:attr/listChoiceIndicatorSingle"
android:gravity="center_horizontal|bottom"
android:background="#drawable/app_border_0"
android:padding="#dimen/_15sdp"
android:text="#string/no"
android:fontFamily="#font/poppins_medium"
style="#style/AppRadioAppStyle"
android:layout_marginStart="#dimen/_10sdp"/>
should be add android:button="#null" in your radiobutton
For different colors according to checked and unchecked states please try this -
Create a color resource file #color/radio_button -
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/grey" android:state_enabled="false" />
<item android:color="#color/grey" android:state_checked="false" />
<item android:color="#color/green" android:state_enabled="true" />
<item android:color="#color/green" android:state_checked="true" />
</selector>
And then use it like this -
<androidx.appcompat.widget.AppCompatRadioButton
android:id="#+id/radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:buttonTint="#color/radio_button" />
This kotlin Extension
fun RadioButton.setLangRadioColor(isCheck: Boolean) {
val color = if (isCheck) {
intArrayOf(
ContextCompat.getColor(rootView.context, R.color.light_red),
ContextCompat.getColor(rootView.context, R.color.light_red)
)
} else {
intArrayOf(
ContextCompat.getColor(rootView.context, R.color.sortRadioUnselectColor),
ContextCompat.getColor(rootView.context, R.color.sortRadioUnselectColor)
)
}
val colorStateList = ColorStateList(
arrayOf(
intArrayOf(-android.R.attr.state_enabled), // disabled
intArrayOf(android.R.attr.state_enabled) // enabled
),
color
)
this.buttonTintList = colorStateList
}
If you want to set different color for a clicked and unclicked radio button, just use:
android:buttonTint="#drawable/radiobutton" in the XML content of the radiobutton and your radiobutton.xml file will be:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#1E88E5"/>
<item android:state_checked="true" android:color="#00e676"/>
<item android:color="#ffffff"/>
</selector>
#jh314 is correct.
In file AndroidManifest.xml,
<application
android:allowBackup="true"
android:icon="#drawable/icon"
android:label="#string/app_name"
android:theme="#style/AppTheme"></application>
In file style.xml:
<!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorAccent">#color/red</item>
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
The item name must be colorAccent. It decides the application's widgets default color.
But if you want to change the color in code, maybe #aknay's answer is correct.
I am trying to get the Google apps photo select UI .. Am using Appcompat checkbox to achieve that with out success. The steps I am working on ,
1. Set the checkbox background to custom circular shape
2. define custom shape in xml
This is my check box xml looks like ,
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/checkBox"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:button="#drawable/custom_checkbox"
android:background="#drawable/checkbox_drawable"
/>
My custom checkbox background,
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="1dp"
android:color="#78d9ff"/>
<solid
android:color="#79bfea"/>
</shape>
My checkbox button ,
<selector>
<item android:drawable="#drawable/checkbox_drawable"
android:state_checked="false"/>
<item android:drawable="#drawable/selected_check"
android:state_checked="true"/>
</selector>
I even changed from android:background to android:button .. nothing gives me the circular check box .. Any help is appreciated ? Should I use floating action bar ? or a view ? Any suggestions ?
Custom Checkbox with two drawable image.
1. In .xml file
<android.support.v7.widget.AppCompatCheckBox
android:id="#+id/checkBox"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:background="#drawable/checkbox_selector"
android:button="#color/white"
android:checked="true" />
2. Create checkbox_selector.xml in drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/cancel"
android:state_checked="false"/>
<item android:drawable="#drawable/checked"
android:state_checked="true"/>
</selector>
3. Add checked.png and cansel.phd image in drawable folder from the below link
https://icons8.com/icon/set/yes/all
And
https://icons8.com/icon/set/cross/all
4. Checkbox click event
AppCompatCheckBox checkBox = (AppCompatCheckBox) view.findViewById(R.id.checkBox);
checkBox.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (checkBox.isChecked()){
checkBox.setChecked(false);
}else {
checkBox.setChecked(true);
}
}
});
You need to give size to your drawable when you want to use it for button attribute.
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<stroke
android:width="1dp"
android:color="#78d9ff"/>
<solid android:color="#79bfea"/>
<size
android:width="20dp"
android:height="20dp"/>
</shape>
And apply to CheckBox with android:button.
Also since this is a checkbox, you should use selector to have checked and unchecked state.
An example of selector is
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/normal"
android:state_checked="false"/>
<item android:drawable="#drawable/checked"
android:state_checked="true"/>
<item android:drawable="#drawable/normal"/>
</selector>
You may not be looking now, however i have code which seems to make circular image with checkbox please have a look at my answer given on another thread.
Click here to view answer on another thread
check my answer on the question in the link, with that you will be able to create and customise your checkbox without the need of coding
answer here
Create a custom checkbox background
custom_check_box_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_unchecked_check_box_background"
android:state_checked="false"/>
<item android:drawable="#drawable/ic_checked_check_box_background"
android:state_checked="true"/>
</selector>
After this go to the checkbox and call this xml file from the checkbox
<androidx.appcompat.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:checked="true"
android:button="#drawable/custom_check_box_background"
android:gravity="center" />
This will allow you to switch the icons based on the status of checkbox.
Note: You can add your own drawable as background to obtain your desired shape.
I want to make a weekly calendar, where every day is a custom checkbox with objective to look like the image bellow:
(http://i.imgur.com/WjIKCd0.png)
When the user clicks on a day (Monday in this case), the "background" and "button" checkbox changes as well the text color...
I made the drawables and it seems to work fine... check bellow the code:
Checkbox layout:
<CheckBox
android:id="#+id/selectMonday"
android:layout_width="40dp"
android:layout_height="40dp"
android:button="#drawable/ic_none"
style="#style/CheckBoxBackgroundView"
android:onClick="selectDay"
android:text="#string/monday_letter"
android:gravity="center"
android:checked="true"/>
(the drawable "ic_none", is simple a 135x135 "transparent" image with nothing in it...)
Style (CheckBoxBackgroundView):
<style name="CheckBoxBackgroundView">
<item name="android:background">#drawable/background_day_week_picker_box_selector</item>
<item name="android:textColor">#color/text_color_day_week_picker_box_selector</item>
<item name="android:textSize">#dimen/text_spinner_text</item>
<item name="android:textStyle">bold</item>
</style>
Background Selector (background_day_week_picker_box_selector):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
android:drawable="#drawable/background_day_of_week_picker_unselected" />
<item android:state_checked="true"
android:drawable="#drawable/background_day_of_week_picker_selected" />
</selector>
Background selected (background_day_of_week_picker_selected):
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- view background color -->
<solid
android:color="#color/red_color" >
</solid>
<!-- view border color and width -->
<stroke
android:width="3dp"
android:color="#color/transparent">
</stroke>
<!-- Here is the corner radius -->
<corners
android:radius="10dp" >
</corners>
</shape>
and finally the color selector (text_color_day_week_picker_box_selector):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
android:color="#color/red_color"></item>
<item android:state_checked="true"
android:color="#color/white"></item>
</selector>
I tried this in several devices... in some, it appears like it suppose to, in others the text disappears and it looks like this:
(http://i.imgur.com/Jy9FrPS.png)
probably is coincidence, but all the devices that worked are below 5 inches...
is there anything wrong with my code that I'm not seeing? anyone have any suggestions?
Thanks in advance
The problem is that the 135x135 button drawable is pushing the text out of the bounds of your CheckBox's width. Instead of using a drawable, you can just set android:button="#color/transparent".
Hi i'm trying to change the color of toggle button's text through xml.
I have referred links but its only changing the background color of toggle button but not its text.
I tried with this approach :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#ffffff" />
<item android:state_checked="false" android:color="#000000" />
</selector>
but only the background is changing.
Note : I don't want to do it in code since there are 21 toggle buttons and setting listeners for each of them is not good.
You shouldn't set the parent of a widget style to be a theme. Instead, you'll want to set it to be the default widget style that you want to modify (e.g. #android:style/Widget.Holo.Button.Toggle).
In your case, however, you don't need to use a style:
res/color/toggle_text.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#ffffff" />
<item android:color="#000000" />
</selector>
res/layout/your_layout.xml:
...
<ToggleButton
android:id="#+id/toggleButton"
...
android:textColor="#color/toggle_text" />
I tried to change the background color of the toggle button using XML file as white color, but the toggle button is totally damaged. It looks like all the button was covered with white.
There is no indication of ON or OFF on the toggle button when I have changed the color of the toggle button to white. Is there is another way to change the background which will not damage the indication of the toggle button?
<ToggleButton android:id="#+id/togglebutton"
android:layout_width="100px"
android:layout_height="46px"
android:background="#ffffff"
android:layout_above ="#+id/save"
android:textOn="DAY"
android:textOff="NIGHT" />
This is how my XML code look for the toggle button.
Yes, there is a way to change the background as you wish, but you have to use a selector like this as background:
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_focused="true"
android:state_pressed="false"
android:drawable="#drawable/some_image" />
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/some_other_image" />
<item
android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/some_image1" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/other_image" />
</selector>
For #Drawable, etc. (you can use a color or make a gradient. Check this for more information about gradients.
Follow this way to make your ToogleButton have background color red when On and green when OFF
First, create tooglebutton_selector.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/togglebutton_on"
android:state_checked="true" />
<item android:drawable="#drawable/togglebutton_off"
android:state_checked="false"
/>
</selector>
Second, create togglebutton_on.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#ff0000" /> // red color
</shape>
Third, create togglebutton_off.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#00FF00" /> // green color
</shape>
Finally, in your ToggleButton
<ToggleButton
android:id="#+id/btnMon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/tooglebutton_selector" //set background of ToggleButton to tooglebutton_selector
/>
When you decompile your SystemUI.apk, you should go to the following file: SystemUI/res/values/colors.xml
Then change the following line:
#ff000000
#ffffffff
#80000000
#ffadc1d6
#ffffffff
#ffe6e6e6