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, Hide stock toggle when using custom background?

I've got a custom drawable for my toggle switch
// toggle_selector.xlm
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/toggle_on" android:state_checked="true"/>
<item android:drawable="#drawable/toggle_off" android:state_checked="false"/>
</selector>
Which I then apply to the switch
<Switch
android:id="#+id/geoLocationsToggle"
android:background="#drawable/toggle_selector"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:textOff=""
android:textOn=""
android:textSize="0dp" />
But the original (stock) toggle still shows overtop the custom background
How do I get rid of the stock switch on top of my custom one?
Thanks in advance.

You should use android:thumb and android:track, not android:background
And you should write a selector for each one of them.

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/

Change Color onClick and background on Focus

i have a ListView in my Navigation Drawer and want it looks like the Playstore App or Youtube App.
Means onClick changing FontColor for Example to red and when i just hold it the background should turn grey.
Do i have to use 2 onitemclicklistener?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp">
<ImageView
android:id="#+id/icon"
android:layout_width="25dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:contentDescription="#string/DrawerListIcon"
android:src="#drawable/ic_home"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#id/icon"
android:textSize="14sp"
android:textStyle="bold"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:textColor="#color/DrawerListFontColor"
android:gravity="center_vertical"
android:paddingRight="40dp"
android:paddingLeft="0dp"/>
</RelativeLayout>
Tried with Item and Selector. First thing Font Color don't change when i pressed the Button. Second the background of the Relative Layout turns blue insead of Grey.
drawer_list_font.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:color="#color/DrawerListFontColorPressed"
/>
<item android:color="#color/DrawerListFontColor"/></selector>
drawer_list_background.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:color="#color/DrawerListBackgroundFocused"
/>
<item
android:color="#color/DrawerBackground"
/></selector>
I had to use android:drawable instead of background on the relative Layout. On the Textview Android Stuio accepted android:color.

This is changed by changing view from ur java file at every click event u can change the view. U have to make multiple view ie xml files for that. Which are dynamically changed or u can also send parameters to a function and create an xml at runtime but that will be too deep for u

No need for listeners at all.
A better approach here is to create drawable XML's with definitions for every state ("pressed", "focused", etc).
Check out Color State List resources
For example:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false"android:color="#80000" />
<item android:state_focused="true" android:state_pressed="true" android:color="#ff0000" />
<item android:state_focused="false" android:state_pressed="true" android:color="#ff0000" />
<item android:color="#color/DrawerListFontColor" />
</selector>

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)).