Question

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>

Answer 1

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