Xavier has posted 3 posts at DZone. View Full User Profile

EaSynth Look And Feel Customization (2)

08.21.2008
| 10197 views |
  • submit to reddit

Toggle Button Customization

In EaSynth look and feel, the toggle button has almost the same look of regular button, except that it has one more customized state: SELECTED. The figure below shows its appearance:

Actually the way to custom the toggle button is almost the same with that for the regular button, except that we need to replace the painter method value from "buttonBackground" to "toggleButtonBackground" and from "buttonBorder" to "toggleButtonBorder". Here is the xml to custom the toggle button:

<!-- The style for toggle button. -->
<style id="Toggle Button">
<insets top="4" left="6" bottom="4" right="6"/>
<!-- Use the same border painter with regular button -->
<painter idref="EaSynthPainter" method="toggleButtonBorder"/>
<!-- This property will specify the arc with of the round border -->
<defaultsProperty key="EaSynth.button.arc.width" type="integer" value="9"/>
<!-- This property will specify the arc height of the round border -->
<defaultsProperty key="EaSynth.button.arc.height" type="integer" value="9"/>
<defaultsProperty key="EaSynth.button.border.color.enabled" type="idref" value="Button_Border_Color_Enabled"/>
<defaultsProperty key="EaSynth.button.border.color.mouseover" type="idref" value="Button_Border_Color_MouseOver"/>
<defaultsProperty key="EaSynth.button.border.color.pressed" type="idref" value="Button_Border_Color_Pressed"/>
<defaultsProperty key="EaSynth.button.border.color.disabled" type="idref" value="Button_Border_Color_Disabled"/>
<defaultsProperty key="EaSynth.button.border.color.default.enabled" type="idref" value="Button_Border_Color_Default_Enabled"/>
<defaultsProperty key="EaSynth.button.border.color.default.mouseover" type="idref" value="Button_Border_Color_Default_MouseOver"/>
<defaultsProperty key="EaSynth.button.border.color.default.pressed" type="idref" value="Button_Border_Color_Default_Pressed"/>
<defaultsProperty key="EaSynth.button.border.color.default.disabled" type="idref" value="Button_Border_Color_Default_Disabled"/>
<state value="ENABLED">
<imagePainter method="toggleButtonBackground" path="resource/1204727000093_button_enabled.png" sourceInsets="5 5 5 5" paintCenter="true" stretch="true" center="false"/> </state>
<state value="MOUSE_OVER">
<imagePainter method="toggleButtonBackground" path="resource/1204727022828_button_mouseover.png" sourceInsets="5 5 5 5" paintCenter="true" stretch="true" center="false"/>
</state>
<state value="PRESSED">
<imagePainter method="toggleButtonBackground" path="resource/1204727039640_button_pressed.png" sourceInsets="5 5 5 5" paintCenter="true" stretch="true" center="false"/>
</state>
<state value="DISABLED">
<imagePainter method="toggleButtonBackground" path="resource/1204727048156_button_disabled.png" sourceInsets="5 5 5 5" paintCenter="true" stretch="true" center="false"/>
</state>
<state value="SELECTED">
<imagePainter method="toggleButtonBackground" path="resource/1204808843937_button_selected.png" sourceInsets="5 5 5 5" paintCenter="true" stretch="true" center="false"/>
</state>
</style>
<bind style="Toggle Button" type="region" key="ToggleButton" />

We can see that the open properties that supported by regular button are also used here, and the configuration of these properties are completely the same, so that the toggle button will have the same look with the regular button, besides that it will have one more stable state: SELECTED.

Making the toggle button looks like a regular button is only a decision of EaSynth look and feel, when we custom the look and feel, we can have our own decision. We can replace the images, specify the insets, change border colors, and we can even use another painter object to obtain a brand new look for the toggle button.

Published at DZone with permission of its author, Xavier Young.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)