Develop Reference

Android Custom Switch

I'm trying to make a custom switch like this:
with these properites:
text on both sides always shown.
different colors for on and off.
and these are two problems I faced since the switch only shows the text on the chosen side , and I can't seem to find a place where I can specify two different colors?
can I achieve this using the regular switch in android studio or must I use some library?
Thank you.

After researching I found a way that gives me exactly what I needed, this is what I got:
in case of anyone looking for a way to do it, this is how:
based on this post answer , which worked great for me.
this is what I did, I created two drawables one for On and another for Off :
switch_on.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:state_checked="true" android:drawable="#color/colorGray"/>
<item android:drawable="#color/colorPrimary" android:state_checked="true" />
<item android:drawable="#color/colorPrimaryDark" android:state_pressed="true" />
<item android:drawable="#color/transparent" />
</selector>
switch_off.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:state_checked="true" android:drawable="#color/colorGray"/>
<item android:drawable="#color/gray_light" android:state_checked="true" />
<item android:drawable="#color/black_overlay" android:state_pressed="true" />
<item android:drawable="#color/transparent" />
</selector>
Next , created a drawable for the outline of the switch.
outline.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="2dp" />
<solid android:color="#80ffffff" />
<stroke
android:width="1dp"
android:color="#color/gray_light" />
</shape>
one thing that I added is a drawable for the text color, because the color of the text changes depending on whether it's checked or not, this is it :
switch_text.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/colorWhite"/>
<item android:state_checked="true" android:color="#color/colorWhite"/>
<item android:color="#color/gray_light"/>
</selector>
and finally, created RadioGroup in my layout this way:
<RadioGroup
android:id="#+id/toggle"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:background="#drawable/outline"
android:checkedButton="#+id/off"
android:orientation="horizontal">
<RadioButton
android:id="#+id/off"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:layout_marginStart="1dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="#drawable/switch_off"
android:button="#null"
android:gravity="center"
android:padding="#dimen/fab_margin"
android:text="#string/off"
android:textColor="#drawable/switch_text" />
<RadioButton
android:id="#+id/on"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:layout_marginEnd="1dp"
android:layout_marginTop="1dp"
android:layout_weight="1"
android:background="#drawable/switch_on"
android:button="#null"
android:gravity="center"
android:padding="#dimen/fab_margin"
android:text="#string/on"
android:textColor="#drawable/switch_text" />
</RadioGroup>
Notice the usage of each drawable in the right place:
android:background="#drawable/outline" for the RadioGroup
android:background="#drawable/switch_off" for the first RadioButton
android:background="#drawable/switch_on" for the second RadioButton
android:textColor="#drawable/switch_text" for both Radio Buttons
And that's all.

Use ToggleButton(change height/width as per image ratio) & selector, here's the code
<ToggleButton
android:id="#+id/toggle_"
android:layout_width="60dp"
android:layout_height="30dp"
android:layout_alignParentStart="true"
android:background="#drawable/on_off"
android:textOff=""
android:textOn=""/>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/ic_on" />
<item android:state_checked="false"
android:drawable="#drawable/ic_off" />
</selector>

To create ON and OFF labels for the switch you can use the attributes android:textOn and android:textOff with the switch declaration.
To ensure, that the text lebals are always displayed, especially for API Level bigger API21, also use this attribute: android:showText="true".
Then your switch should look like this:
<Switch
android:id="#+id/switcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="OFF"
android:textOn="ON"
android:showText="true"
/>
In order to change the default color, you have to specify a seperate design for it like that:
1. In file values\styles.xml define a style like that:
<style name="CustomSwitchTheme" parent="Theme.AppCompat.Light">
<item name="android:colorControlActivated">#FF0000</item>
</style>
It is important, that you also reference the correct parent theme.
2. After defining the new switch style, you can link your custom style to the switch with the attribute
android:theme="#style/CustomSwitchTheme"
Finally your Switch should look like that:
<Switch
android:id="#+id/switcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="OFF"
android:textOn="ON"
android:showText="true"
android:theme="#style/CustomSwitchTheme"
/>

Default Switch overlapping with Custom Switch

I'm trying to implement custom switch using two images for false and true respectively . But the problem is default switch image us overlapping with custom switch images.
Below is my code for Switch:
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Do you want the current offer as your final offer"
android:background="#null"
android:button="#null"
android:textOff=""
android:textOn=""
android:drawableRight="#drawable/switch"
android:textSize="16sp"
android:textColor="#9B9B9B"
android:id="#+id/switch1"
/>
And the following is my switch.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/dummy_toggle_off"
android:state_checked="false" />
<item
android:drawable="#drawable/dummy_toggle_on"
android:state_checked="true" />
<item
android:drawable="#drawable/dummy_toggle_off"/>
</selector>
Here are the resulting images :

use the following code for switch customization-
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="#drawable/switch_thumb"
android:track="#drawable/switch_track" />
here switch_thumb is styling xml file for your thumb and switch_track is your xml styling for background of switch.
for more information refer the link-link
switch_thumb.xml
<selector>
<item android:drawable="#drawable/your_png_for_thumb">
</item>
</selector>
switch_track.xml
<selector>
<item android:drawable="#drawable/your_png_for_track_grey"
android:state_checked="true"/>
<item android:drawable="#drawable/your_png_for_track_blue"
android:state_checked="false"/>
</selector>
and you can download these png images from web..the below is a link where you can find those png-icon finder

I have the same problem and I think this solution.
In your XML switch add this code.
android:thumb="#android:color/transparent"
android:track="#android:color/transparent"
android:background="#drawable/yourSelector"

Android ImageView selector does not work

This is my selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/white_small_down_arrow_v4" android:state_pressed="true"/>
<item android:drawable="#drawable/white_small_up_arrow_v4" android:state_focused="false"/>
<item android:drawable="#drawable/white_small_up_arrow_v4" /> <!-- default -->
</selector>
This is how I applied it on ImageView:
<ImageView
android:id="#+id/change_city_small_down_ImageView"
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/changeCityRelativeLayout"
android:layout_marginLeft="5dp"
android:background="#drawable/change_city_selector"
</ImageView>
Now, the problem is, when I pressed the ImageView, the according state drawable image does not change. I have tried it on other wigdet, also not work. I can't figure out why, becasue I used to do this the same way, and it works.
I have monitored imageview states when it been clicked.
v.hasFocus() : false , v.isClickable() : true , v.isInTouchMode() :true , v.isEnabled() : true , v.isPressed() : true
I made a terrible mistake, the white_small_down_arrow_v4 and white_small_up_arrow_v4 actually pointing the same direction, in other words, they are same picture.
so, probably my mistake will help someone else if they found selector does not work, and first thing to do is to check if the state drawables are the same....

Try this: use image android:src="#drawable/change_city_selector" instead of android:background="#drawable/change_city_selector"
<ImageView
android:id="#+id/change_city_small_down_ImageView"
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/changeCityRelativeLayout"
android:layout_marginLeft="5dp"
android:src="#drawable/change_city_selector"
</ImageView>

Try adding android:focusable="true" and android:focusableintouchmode="true" in your ImageView property.

You need to set clickable to true in ImageView
android:clickable="true"

change you selection to this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/white_small_down_arrow_v4" android:state_pressed="true"/>
<item android:drawable="#drawable/white_small_up_arrow_v4" android:state_focused="true"/>
<item android:drawable="#drawable/white_small_up_arrow_v4" /> <!-- default -->
</selector>
both of them should be true

Try this, it's checked on Android 4.4.2 and 5.1:
/drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<color android:color="#color/item_pressed"/>
</item>
<item>
<color android:color="#android:color/transparent"/>
</item>
</selector>
/layout
<ImageView
android:id="#+id/ivOpenFile"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_margin="8dp"
android:layout_alignParentRight="true"
android:padding="4dp"
android:background="#drawable/selector_settings_item"
android:clickable="true"
android:focusableInTouchMode="true"
android:visibility="invisible"
/>
/java
ivOpenFile = (ImageView) rootView.findViewById(R.id.ivOpenFile);
ivOpenFile.setImageDrawable(VectorDrawableCompat.create(
getResources(),
R.drawable.vd_action_files_black,
null));

Make sure that your selector actually has state_selected instead of state_checked the later will not work
your_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_heart_selected" android:state_selected="true" />
<item android:drawable="#drawable/ic_heart_unselected" android:state_selected="false" />
</selector>
if you have state_checked instead of state_selected, ImageView will never work.

Android state list for compound drawable

Is it possible to define state list for compound drawables in Android?
This is my button in layout xml:
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/btn_top"
android:text="#string/button_text" />
This is my drawable xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:drawable="#drawable/btn_top_enabled" />
<item android:drawable="#drawable/btn_top_disabled" />
</selector>
This works for background, but its not working for drawableTop. The first state is always displayed. Is this even possible in Android, and if so am I missing something?

look ad TextView.java source code and you will see that yes, you can use StateListDrawable as a compound Drawable that displays according to TextView state

Try:
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true" android:drawable="#drawable/btn_top_enabled" />
<item android:state_activated="true" android:drawable="#drawable/btn_top_enabled" />
<item android:drawable="#drawable/btn_top_disabled" />
</selector>
And
button.setActivated(true);

Android ToggleButton

By following this article I was able to create a toggle button that's made out of images. My toggle doesnt have any text, just on/off images.
When my toggle button is created it's being stretched and loses it's proportions, how do I make it retain it's original size?
These are the images im using:
The code:
main.xml:
<ToggleButton
android:id="#+id/changeNumerals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:checked="true"
android:background="#drawable/toggle_bg"
android:textOn=""
android:textOff=""
/>
drawable/toggle.xml:
<?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/toggle_off" />
<item android:state_checked="true" android:drawable="#drawable/toggle_on" />
</selector>
drawable/toggle_bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+android:id/background" android:drawable="#android:color/transparent" />
<item android:id="#+android:id/toggle" android:drawable="#drawable/toggle" />
</layer-list>

Try following attributes for <ToggleButton>
android:background="#android:color/transparent"
android:button="#drawable/toggle_bg"
It should work. Good luck :)

The dimensions are "hardcoded" but they'll scale with the size of your screen.
So the xml could look like:
android:layout_width="64dp"
android:layout_height="24dp"
The official documentation for dps is here

To support versions from GINGERBREAD up to the current ones, I ended up using:
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/filterPhotos"
android:checked="true"
android:textOn=""
android:textOff=""
android:paddingLeft="5dp"
android:drawableRight="#drawable/toggle_filter_photos"
android:background="#null"/>
and the drawable toggle_filter_photos.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/picture_filter_icons"
android:state_checked="true" />
<item android:drawable="#drawable/picture_inactive_filter_icons" />
</selector>
The other solutions above didn't work well for GINGERBREAD and newer as either the icons wouldn't show up at all (with android:button on GINGERBREAD) or the aspect ratio was lost (with android:background on JELLY_BEAN_MR1 (4.2.2)).