Configure Android toggle button

Question

I customized the Toggle button using the drawable defined with the selector. I use this template as the background for the Toggle button.

<ToggleButton android:id="@+id/mailbox:toggle_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_weight="1" android:background="@drawable/toggle_background" android:gravity="center_horizontal|center_vertical" /> 

The toggle_background value is defined here:

  <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/img1" android:state_checked="true" /> <item android:drawable="@drawable/img2" android:state_checked="false" /> </selector> 

The problem is that the image is always stretched. Is there a way to define an image for two states that are not stretched?

I need a background that will be stretched and in the center of the button there will be an icon that cannot be stretched.

Is it possible?

Answer 1

I did the same task this way, button:

  <ToggleButton android:id="@+id/mlAbout" android:textOn="@string/about" android:textOff="@string/about" android:background="@drawable/ml_about" /> 

@ drawable / ml_about:

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/list_bg_top"></item> <item android:left="10dp"> <bitmap android:src="@drawable/waiting_status_btn" android:gravity="center_vertical|left" /> </item> </layer-list> 

@ drawable / list_bg_top the background image to be stretched, and @ drawable / waiting_status_btn is the icon that will not be stretched using the widget

Answer 2

This is my final decision.

In the layout:

 <ToggleButton android:id="@+id/mailbox:toggle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/toggle_drawable_layers"/> 

in toggle_drawable_layers.xml file

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/toggle_drawable_bkg"></item> <item android:left="10dp" android:drawable="@drawable/toggle_drawable_left" android:gravity="center_vertical|center_horizontal" /> </layer-list> 

in toggle_drawable_left.xml file

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true"> <bitmap android:src="@drawable/bitmap_checked" android:gravity="center_vertical|center_horizontal" /> </item> <item android:state_checked="false"> <bitmap android:src="@drawable/bitmap_unchecked" android:gravity="center_vertical|center_horizontal" /> </item> </selector> 

Answer 3

Just use bitmaps instead of the ones selected in your selector (no need to use layers):

 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/img1" android:state_checked="true" /> <item android:drawable="@drawable/img2" android:state_checked="false" /> </selector> 

Also, be sure to declare android: textOff = "android: Texton =" "in the ToggleButton ad

Answer 4

This and it will definitely help you.

Answer 5

There is another way to overcome the problem of stretching:

Just convert the image to a Nine-Patch Image , where stretchable areas are only on all sides of the image.

Then Android will stretch the image only in invisible areas and save the visible image unchanged.