0

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 :

enter image description here enter image description here

Ran94
  • 139
  • 11

2 Answers2

1

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

Community
  • 1
  • 1
sud
  • 505
  • 1
  • 4
  • 12
  • my question is how to remove the default switch image which is overlapping with custom image! I don't know how your answer is suitable for this question. – Ran94 Oct 28 '15 at 12:49
  • I wanted to change the shape of the switch as a whole.. not just the thumb shape!! So, i think your answer is not the required answer for this question. – Ran94 Oct 28 '15 at 13:02
  • see this link for your help-[customize switch](http://stackoverflow.com/questions/22726408/switch-button-thumb-gets-skewed) – sud Oct 28 '15 at 13:15
  • Thanks .. it solved my problem. Can you edit the answer with the link you mentioned in the comment.. so, i can accept this answer! thank you – Ran94 Oct 28 '15 at 13:26
  • ok i will try. and if you like please upvote the answer so others can get benefit of it. thank you. – sud Oct 28 '15 at 13:32
1

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"
coffeeCode
  • 22
  • 4