CODEWITHSUNDEEP
androidtogglebutton
kingston
kingston

Reputation: 11419

customize toggle button on Android

I customized the Toggle button by using a drawable defined by using a selector. I use this drawable as 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 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 the two states that is not stretched?

What I need is a background that will be stretched and in the center of the button an icon that must not be stretched.

Is it possible?

Upvotes: 4

Views: 21090

Answers (4)

J&#246;rg Eisfeld
J&#246;rg Eisfeld

Reputation: 1319

There is another way to overcome the issue of stretching:

Just convert the image into a Nine-Patch image, where the stretchable areas are just on all sides of the image.

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

Upvotes: 0

lytridic
lytridic

Reputation: 343

Just use bitmaps instead of drawables in your selector like so (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, don't forget to declare android:textOff="" android:textOn="" in your ToggleButton declaration

Upvotes: 2

kingston
kingston

Reputation: 11419

This is my final solution.

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 the toggle_drawable_layers.xml

<?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 the toggle_drawable_left.xml

<?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>

Upvotes: 13

Dimanoid
Dimanoid

Reputation: 7279

I did the same task this way, the 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 background image that will be stretched and @drawable/waiting_status_btn is the icon the will not be stretched with the widget

Upvotes: 5

Related Questions