CODEWITHSUNDEEP
androidbuttontoggle
Ran94
Ran94

Reputation: 139

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 :

enter image description here enter image description here

Upvotes: 0

Views: 1215

Answers (2)

coffeeCode
coffeeCode

Reputation: 22

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"

Upvotes: 1

sud
sud

Reputation: 505

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

Upvotes: 1

Related Questions