Setting image source for ToggleButton

Question

I have a 30px x 30px png file that i would like to use as an android:src rather than an android:background. By using it as the background, and mentioning \"wrap_content\" fo

Answer 1

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <inset android:insetLeft="15dp" android:insetRight="15dp" android:insetTop="15dp" android:insetBottom="15dp">
            <bitmap android:src="@drawable/ic_star_selected_centered" />
        </inset>
    </item>

    <item android:state_pressed="true" >
        <inset android:insetLeft="15dp" android:insetRight="15dp" android:insetTop="15dp" android:insetBottom="15dp">
            <bitmap android:src=" android:src="@drawable/ic_star_default_white_centered" />
        </inset>
    </item>

    <item >
        <inset android:insetLeft="15dp" android:insetRight="15dp" android:insetTop="15dp" android:insetBottom="15dp">
            <bitmap android:src="@drawable/ic_star_default_black_centered" />
        </inset>
    </item>
</selector>

Answer 2

"Quick and dirty" way of achieving this is to use relative layout and place your ImageView on top of the ToggleButton. Set android:layout_centerInParent="true" and set your onClick listener on the toggle

Said that - the other solution by CaseyB (customizing background files) is the right approach

Answer 3

You can make the toggle button look like whatever you want. You just need to create a style. Have a look in the /platforms//data/res/values/styles.xml and search for Widget.Button.ToggleButton It looks like this:

<style name="Widget.Button.Toggle">
    <item name="android:background">@android:drawable/btn_toggle_bg</item>
    <item name="android:textOn">@android:string/capital_on</item>
    <item name="android:textOff">@android:string/capital_off</item>
    <item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
</style>

So if you go find the btn_toggle_bg drawable you find this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+android:id/background" android:drawable="@android:drawable/btn_default_small" />
    <item android:id="@+android:id/toggle" android:drawable="@android:drawable/btn_toggle" />
</layer-list>

Which shows you that it uses the standard Button background and a drawable called btn_toggle for the src. btn_src.xml looks like this:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/btn_toggle_off" />
    <item android:state_checked="true" android:drawable="@drawable/btn_toggle_on" />
</selector>

Which are the two drawables that are used to show the state of the button. They are actually called btn_toggle_{on/off}.9.png since they are 9 Patch images so they stretch to match the button size.

Answer 4

I figured out how to do this (centering a smaller background image inside a large ToggleButton) using ScaleDrawable:

Set your ToggleButton to use a selector Drawable, as normal:

<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:variablePadding="true">
    <item android:drawable="@drawable/ic_star_selected_centered"
          android:state_checked="true" />
    <item android:drawable="@drawable/ic_star_default_white_centered"
          android:state_pressed="true" />
    <item android:drawable="@drawable/ic_star_default_black_centered" />
</selector>

Then, make a ScaledDrawable for each of the items' drawables above, which points to your ACTUAL image file. e.g. ic_star_selected_centered.xml:

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_star_selected"
    android:scaleGravity="center"
    android:scaleHeight="100%"
    android:scaleWidth="100%" 
     />

Finally, there is a bug in Android that makes any ScaledDrawables invisible at first, until you set their level. So when inflating your view, call setLevel() from 1-10000 (1 is smallest scale, 10000 is full-sized):

    StateListDrawable star = (StateListDrawable) myToggleButton.getBackground();
    star.setLevel(5000); // centers the image at half size. shame on Android for using magic numbers!

Answer 5

In addition to what @caseyB had to say (look at the comments), i had to change the theme of the activity to achieve the intended effect. I think this is an issue on HoneyComb Xoom and may not be seen on phones. Thanks for everyone for looking at my question and helping.