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"
/>

Android swtich compat icon?

I need to create the switch as the below image
I have both on and off images for it. I implemented them as
<android.support.v7.widget.SwitchCompat
android:id="#+id/swtichTournament"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:showText="false"
android:thumb="#drawable/switch_selector"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:checked="false" />
The selector XML
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/switch_off" />
<item android:state_pressed="true" android:drawable="#drawable/switch_on" />
<item android:state_checked="true" android:drawable="#drawable/switch_on" />
<item android:drawable="#drawable/switch_off" />
This is what I get
As you can see there is some extra color which is not required. How do I remove that?

If you are using the AppCompat library, replace your switch element by a SwitchCompat element and you'll get what you want.
For more info about switchCompat, please see: https://developer.android.com/reference/android/support/v7/widget/SwitchCompat.html

You can set Switch's background to transparent in your XML:
android:background="#android:color/transparent"

i hope this link will be help you
https://androidician.wordpress.com/2014/09/24/android-custom-toggle-button-example-ios-like-toggle-buttons/

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: why am i unable to use a selector for TextView background

My selector is:
<item android:state_pressed="true" android:color="#color/bg_grey"/>
<item android:state_focused="true" android:color="#color/bg_grey"/>
<item android:color="#color/white"/>
and i have my TextView as:
<TextView
android:id="#+id/tv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#drawable/textview_selector"
android:padding="5dp"
android:text="Some Text"
android:textColor="#color/text_grey"
android:textSize="16dp" />
This way i am getting:
android.view.InflateException: Binary xml file line #68: Error inflating class <unknown>
if i am using this selector as android:textColor="#drawable/textview_selector" its working fine

The problem here is that you cannot define the background color using a color selector, you need a drawable selector. So, the necessary changes would look like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/selected_state" />
</selector>
You would also need to move that resource to the drawable directory where it would make more sense since it's not a color selector per se.
Then you would have to create the res/drawable/selected_state.xml file like this:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/bg_grey" />
</shape>
and finally, you would use it like this:
android:background="#drawable/selector"

You are defining Color in place of a background Drawable in Selectors xml,try with backgrounds
drawable

you just need to ensure the colors are in colors.xml file and do not put the hex colors directly into the selector items.
my_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/category_item_selected_color" android:state_selected="true"/>
<item android:drawable="#color/category_item_selected_color" android:state_pressed="true"/>
<item android:drawable="#color/white" />
</selector>
and make your textview look like this:
<TextView
android:id="#+id/tv_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:letterSpacing="0.05"
android:textColor="#000000"
android:gravity="center"
android:textSize="17sp"
tools:text="New In"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:background="#drawable/my_selector"
android:layout_gravity="center"
/>

Unable to resolve color value

I am trying to make my buttons change the color of their text when it is pressed but i ran into a problem that i cant solve. I get an error saying "unable to resolve color value" then it gives me the path to the file. here are my files im using
This one is in a new folder named color under resources and its called button
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#ffff0000" />
<item android:state_focused="true" android:color="#ff0000ff" />
<item android:color="#ff000000" />
</selector>
And
<Button android:text="Main Menu" android:textColor="#color/button"
android:layout_width="200px" android:id="#+id/mainmenu"
android:layout_height="55px" android:layout_x="5dip"
android:layout_y="174dip"
android:textSize="18px">
</Button>
its driving me crazy if anybody could help me.

I successfully did it like this:
Files:
/drawable/button_states.xml
/layout/main.xml
/values/colors.xml
button_states.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/red" /> <!-- pressed -->
<item android:state_focused="true"
android:color="#color/blue_background" /> <!-- focused -->
<item android:color="#color/white" /> <!-- default -->
</selector>
colors.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="blue_background">#FF2f74c3</color>
<color name="white">#fefefe</color>
<color name="red">#ff0000</color>
</resources>
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:layout_height="wrap_content"
android:text="Button"
android:id="#+id/button1"
android:layout_width="wrap_content"
android:textColor="#drawable/button_states" />
</LinearLayout>

Try android:background instead.