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" for both the height and the width, the final result looks more like a 45px x 45 px.

Ideally, what i need is a mix of ImageButton and ToggleButton. I would like to have the feature of setting an android:src of ImageButton and the feature of toggling where states are saved automatically for me.

Any solution or workaround?

TIA.

Hi, It does not seem to help creating another style. The src still appears much bigger that it's original 30px x 30px.

In main.xml:

<ToggleButton android:id="@+id/blah"
    style="@style/myToggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
</ToggleButton>

In Styles.xml

<style name="myToggle">
    <item name="android:textOn">""</item>
    <item name="android:textOff">""</item>
    <item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
    <item name="android:background">@drawable/my_btn_toggle_bg</item>
</style>

In my_btn_toggle_bg.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/myBackground" android:drawable="@android:drawable/btn_default_small" />
    <item android:id="@+id/myToggle" android:drawable="@drawable/my_btn_toggle" />
</layer-list>

In my_btn_toggle.xml

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

playbutton.png and pausebutton.png are 30px x 30px each. But they appear much bigger when i see it laid out on the device

Answer 1

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 2

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!